设计和开发之间经常有个空档：需求说清楚了，设计稿还没出来；设计稿出来了，代码又要重新理解一遍。光做“设计转代码”，其实只解决了后一半。如果能让需求先进画布、确认后的画布再进代码仓库，整个链路就顺了。Pixso MCP 刚好在这个位置上。
Agent 可以通过它调用 Pixso AI Skill 生成设计，Cursor 也能读取设计上下文继续写前端
。
拿商品详情页首屏来说。刚开始不用写一大篇PRD，只要把页面目标、主要内容、限制条件说清楚就行：商品图放左侧，右侧是标题、价格、规格、库存和购买按钮；整体偏简洁，桌面和移动都要看；先出结构和视觉方向，不急着接真实接口。
1. 先装好 2.2.0 或更高版本的
Pixso 客户端
，登录后打开目标设计文件，点文件顶栏左上角的 MCP 配置入口，开启本地 MCP 服务。客户端会显示当前服务地址，默认是 http://127.0.0.1:3667/mcp，不过端口可能被占掉，实际地址以客户端显示的为准。
2. 接着打开 Cursor，进 Settings → MCP & Integrations，在 MCP Tools 里点 New MCP Server。名称填 Pixso MCP，类型选 http，URL 填刚才复制的地址，保存并启动。懒得点的话，
直接改 mcp.json 也行：
"url": "http://127.0.0.1:3667/mcp",
MCP 通了之后，
还要装 Pixso 官方的 AI 插件
。去 PixsoLtd/pixso-ai-integration 仓库，按 README 下载或 clone 到本地；然后在 Cursor 的插件设置里选“从本地目录安装”，指向这个仓库根目录。装完重启或刷新 Cursor。进 Settings → Customize → Skills，看到 pixso-code-to-design、pixso-design-editing、pixso-design-to-code、pixso-read-dsl 这几项，就说明 Skill 已经加载好了。
这时候在 Cursor 对话里直接提需求就行，比如“调用 Pixso 的代码转设计或设计编辑能力，在当前 Pixso 文件中生成一个商品详情页首屏”。跑的时候 Pixso 客户端得保持登录和开启，目标文件也要放在激活页签。
生成出来的是可编辑的初稿，在画布里可以直接改
。这个版本适合拿来评审讨论，不建议直接丢给开发。
生成之后，设计师可以直接在画布里改，商品图比例、价格层级、按钮位置、留白，都能调。比起在聊天窗口里说“标题再醒目一点”，在画布上动手改要明确得多，改完还能直接传给 Cursor。AI 先给一个可以讨论的视觉方向，人再来判断怎么取舍。这样一来，“等设计稿”的时间确实短了不少，但设计决策还是掌握在人手里。
初稿确认之后，别把整个页面一次性丢给代码 Agent。先在 Pixso 里选中商品详情页首屏，检查一下图层名称、重复的规格项、颜色和字号变量。商品图、信息区、规格选择、库存提示、购买按钮，层级要分明；售罄、不可选、促销标签这些状态，哪些已经定了、哪些还要讨论，最好也分清楚。
回到 Cursor 的 Agent 对话框，
发一个指令就行
：
读一下当前选中的商品详情页首屏，先别动项目文件。说明商品图、信息区、规格选择、购买按钮的层级关系，重复结构、颜色和字号变量，还有设计稿里没画出来的状态。
这一步其实就是让 Cursor 把刚确认的设计复述一遍。如果它把价格当成了普通文字，或者没认出规格项是重复结构，就先回画布查一下层级和命名。这时候改，比写了好几个组件文件再回头返工要省事。
读取结果没问题的话，再补充项目约束
。假设仓库用的是 React + TypeScript + CSS Modules，基础按钮、价格标签、图片容器已经在 src/components 里了，那就让 Cursor 优先复用这些，别为了还原设计稿多搞一堆新依赖。商品规格适合做成数据驱动的结构，价格、库存提示、购买按钮要保留清晰的状态入口。
按刚才读到的设计上下文，实现 ProductDetailHero 组件。用项目现有的 React + TypeScript + CSS Modules，优先复用 src/components 里的基础组件，别动路由和接口。改完列出修改了哪些文件、复用了哪些组件、还有哪些地方需要人再确认。
Cursor 生成代码后，先看一下组件结构，然后跑一下项目里的类型检查和 lint。如果规格项还是复制粘贴的，后面改字段就头疼了；图片路径、价格格式、按钮状态，也不能光对着截图看。页面打开后，桌面和窄屏都过一遍，换成长标题和促销文案试试，再用键盘走一遍，看布局、焦点和按钮状态有没有漏掉的。
需求到画布、画布到代码，
不代表所有决定都甩给 AI
。库存为0时购买按钮是隐藏、置灰、还是改成“到货提醒”，这是产品规则；窄屏下商品图和信息区是上下排还是保持并排，这是设计和交互判断；接口字段、埋点、权限，这些是工程上下文。Pixso AI Skill 能生成可编辑的初稿，Cursor 能读选区并产出实现，但这些东西如果没明确给出来，就不该靠 AI 自己补。
这套流程建议从一个页面区块开始试，需求阶段让 Pixso AI Skill 生成几个方向，设计师在画布里确认结构和视觉，再把明确的选区交给 Cursor；代码跑出来发现信息层级不对，也能回画布改，改完重新读。设计和开发不再是单向交接，而是盯着同一份东西来回对。
个人项目的话，一个商品详情页就足够把流程跑通了。团队用的话，可以把需求提示词、图层命名、变量写法、组件目录这些沉淀下来，下次复用。真正有价值的不是“生成速度”，而是
从需求到设计再到代码，每一步都有据可查，改东西的时候也知道该回到哪一层去动
。
