VS Code 生成 UI 设计稿转代码：接入 Pixso MCP 配置教程

做前端这几年，浏览器、设计工具、IDE来回切是常态，最烦的是最后还得自己把设计图上的信息一个字一个字“翻译”成代码。

这两年VS Code早就不是那个只能写代码的编辑器了。装上AI扩展之后，项目里的代码它能读，文件也能直接改，还能通过MCP去调外部工具。Pixso MCP就是把Pixso设计文件里的内容接到IDE对话框里。这么弄不是为了把VS Code变成设计软件，就是让AI写代码的时候能看一眼Pixso当前画布里具体长什么样，结构和样式都是什么。

按实际操作的顺序往下捋：先把环境准备好，连上Pixso MCP，然后分别试一下“需求生成设计稿”和“设计稿生成代码”两条路。下面用React项目做示例，换成Vue也不影响。VS Code、AI扩展、Pixso客户端更新都挺勤的，界面上的名称可能有出入，配置的时候看你自己当前版本的显示就行。

一、先准备环境和一个小测试任务

需要准备的东西就三样：VS Code（版本别太旧）、一个支持MCP的AI编程扩展、还有Pixso客户端和你要用的设计文件。VS Code管编辑和运行，AI扩展管对话和调工具，Pixso那边提供画布和设计稿。先把分工搞清楚，后面万一出问题了排查起来也省事。

用支持MCP的Pixso客户端版本，打开目标文件、登录账号。装好之后，在文件顶栏左上角能找到MCP配置入口，把本地服务开起来。服务开启之后，Pixso会显示一个地址，常见的是http://127.0.0.1:3667/mcp。但端口号这东西每台电脑可能都不一样，别直接抄网上的，去Pixso界面复制它实际显示的那个。

测试任务别一上来就选整套后台。先挑个边界清楚的区块，登录卡片、设置面板、商品信息区都行。心里先有个数：能不能读到当前选中的图层？重复结构能不能认出来？颜色间距对不对？生成的代码能不能过项目里的类型检查？范围小一点，出了问题才好判断是连接的事、选区的事还是提示词写的事。

二、在 VS Code 中配置 Pixso MCP

打开VS Code，先看一眼AI扩展里的MCP功能开了没有。不同扩展入口叫法不一样，有的叫MCP，有的叫Tools或者Connectors。配置的话，一般可以从命令面板添加MCP Server，也可以在工作区建一个.vscode/mcp.json文件。我自己习惯用后一种，配置放项目里，团队里别人打开项目也能看到同一份连接信息，排查起来方便很多。

在项目根目录建一个.vscode/mcp.json，内容大概长这样：

json

{
  "servers": {
    "pixso": {
      "type": "http",
      "url": "http://127.0.0.1:3667/mcp"
    }
  }
}

这里的 url 要替换成 Pixso 客户端实际显示的地址。有些扩展可能要你把配置放在它们自己的JSON文件里，字段名可能叫mcpServers，也可能需要额外加一些headers。这些只是不同客户端格式上的差别，连接地址还是那个地址，照着扩展文档里的示例填就行。不要把两个格式拼在同一个文件里，否则 VS Code 可能能打开文件，却不会加载服务。

保存完之后，去VS Code的MCP面板里检查一下pixso是不是已启用。面板里能看到工具列表的话，应该会有读取设计上下文、获取选区信息之类的工具名。第一次用别急着让它写代码，先在Pixso里选一个小图层，然后在VS Code对话框里发个只读请求：

请读取我在 Pixso 中当前选中的图层。
先不要修改项目文件，只说明组件层级、主要颜色、字号、间距、重复结构，
并列出设计稿中没有明确表达的状态。

如果它回复的内容明显不是你选的那个区块，先确认Pixso是不是还在目标文件和页签上，再看选区是不是选太大了，最后检查VS Code的服务状态。连接上了不代表读到的内容就对，选错父级画板这个坑还挺多人踩的。服务列表要是空的，先把Pixso MCP服务和VS Code重启一遍，然后看端口有没有被别的程序占着。

Pixso 官方还提供了一套 Skill（可以理解为给 AI 的场景使用指南），告诉 AI 在“设计稿转代码”“设计稿编辑”这些具体场景下应该调用哪些工具、按什么顺序来。装上之后 AI 操作 Pixso 会更准，少走弯路。

VS Code 场景下的 Skill 配置方式：

1. 下载 Pixso Skill 配置文件，可以从官方 GitHub 仓库获取：[PixsoLtd/pixso-ai-integration]（VS Code 同样适用，复制 skills 目录下的 .md 文件即可）
2. 在项目根目录下新建一个 .pixso/skills/ 文件夹，把下载的 .md 技能描述文件放进去
3. 在 .vscode/mcp.json 中，给 pixso 服务加上 tools 字段，指向这些技能文件，例如：

json

{
  "servers": {
    "pixso": {
      "type": "http",
      "url": "http://127.0.0.1:3667/mcp",
      "tools": [
        "./.pixso/skills/design-to-code.md",
        "./.pixso/skills/design-editing.md"
      ]
    }
  }
}

4. 保存后重启 VS Code 的 AI 会话

装好之后，AI 在对话中就能根据你的需求自动匹配对应的技能，不用每次都在提示词里反复解释要做什么、怎么做。如果只是单纯打通设计稿到代码的读取通道，MCP 本身已经够用；但如果你希望 AI 更稳定地处理“设计稿生成代码”或“需求生成设计稿”这类任务，加上 Skill 会更省心一些。

三、生成一版可编辑的 UI 设计稿

连接好了之后，可以先走一遍“从需求到画布”。这种方法比较适合需求大概有了但视觉稿还没出的情况。VS Code这边负责把任务发过去，Pixso那边生成画布结果，生成完还能继续改。

比如说要做个SaaS项目的登录页，那就把目标、内容和限制都说清楚：需要邮箱和密码输入框、验证码入口、登录按钮、忘记密码链接，桌面和窄屏都要适配，颜色先用项目里已有的品牌变量，暂时不接真实接口。

在 VS Code 对话中明确要求调用 Pixso 的设计生成或画布编辑能力，并且先产出结构，不要直接改仓库：

请调用 Pixso 能力，在当前文件中生成一个 SaaS 登录页初稿。
包含邮箱、密码、验证码入口、登录按钮和忘记密码链接，考虑桌面与窄屏布局。
先创建可编辑的画布结构，不修改当前代码仓库；完成后说明生成了哪些页面和组件。

执行的时候Pixso客户端要一直登录着，目标文件也要打开。生成完了回画布看一眼层级、文案和状态，别把第一版当成最终稿。重点检查输入框的错误和禁用状态有没有，按钮层级清不清楚，移动端是不是简单粗暴地缩放了事。要调整的话，直接在Pixso画布里改，再让VS Code读最新的选区就行。这么做的好处是设计上的决定留在了设计工具里，代码助手拿到的是确认好的结构，不是聊天记录里模模糊糊的一段描述。

这一步不用追求像素级一次到位，目标就是快速出一个能讨论、能标注、还能接着改的版本。产品规则、表单校验、接口字段这些还得项目里的人来确定，不能因为画布是自动生成的，就默认这些业务细节都已经有了。

四、读取设计稿并生成前端代码

等设计师在Pixso里把登录卡片或者某个区块确认好，就可以让VS Code去读设计内容了。先回Pixso，整理一下图层名称和层级，确认重复元素确实用了相同的结构，然后只选中要实现的区块。选区越清楚，代码助手越不容易把页面背景、标注、旁边历史版本这些东西一股脑儿都当成需求。

第一轮仍然只读：

请读取当前 Pixso 选区，先不要写入文件。
请输出组件树、可复用元素、颜色/字号/间距，以及设计稿没有表达的交互状态。
如果存在不确定项，请单独列出，不要自行补充业务规则。

等它理解对了，再把项目里的约束条件补上。假设项目用的是React、TypeScript和CSS Modules，已经有src/components/Button、表单控件和主题变量了，那可以这样提要求：

基于刚才确认的设计上下文实现 LoginCard 组件。
使用项目现有的 React、TypeScript 和 CSS Modules；优先复用 src/components 中的基础组件。
不要修改路由、接口和依赖。完成后列出修改文件、复用组件，以及仍需人工确认的差异。

生成之后先看代码再看页面。代码部分检查一下组件是不是数据驱动的，有没有复制粘贴相同结构，有没有乱加依赖，类型检查和lint能不能过。页面部分看字号、行高、间距、圆角、焦点样式和窄屏布局。另外主动测一下错误、加载、禁用这些状态，设计稿通常只画默认样子。图片和图标如果只是占位路径，交付之前换成项目里真实的资源。

如果生成结果跟设计稿差得比较多，不一定CSS写错了，经常是设计稿里没标断点规则，或者项目里的组件命名跟图层名字对不上。与其继续叠提示词，不如把这些拿不准的地方打回去，让设计和需求那边再评审一下。MCP确实能省一些搬砖的功夫，但代码评审、视觉验收、业务判断这些该走的流程还得走，省不掉。

最后给一个我日常用的排查顺序：先看Pixso服务开没开，再确认VS Code里的URL和配置格式对不对；然后缩小Pixso选区，发一条只读请求；等确认上下文没问题了，再让它写代码。涉及团队仓库时，.vscode/mcp.json 可以提交，但不要把账号令牌、生产密钥或不必要的敏感路径写进配置和提示词。

五、这套连接适合什么，不适合什么

VS Code连Pixso MCP，我平时用下来最顺手的有三类场景：需求描述明确的时候，能快速生成能改的UI初稿；设计区块选好之后，能变成项目里的组件骨架；设计有小改动的时候，让代码助手重新读一遍上下文，直接找到要改的文件。颜色、字号、间距、图层层级这些结构化信息特别管用，能少抄不少东西，也少确认好几个来回。

不适合的场景也得提一下：整站一次性生成、复杂图表、强业务权限、接口联调和无障碍验收这些，光靠设计上下文根本搞不定。画布里没写的规则，AI助手不可能凭空知道。生成的代码也不会因为是MCP出来的就天然符合团队规范。把任务拆成能验收的小块，保留只读分析和文件变更记录，再走一遍项目原有的测试流程，这比追求“一句话生成整页”要稳得多。

我自己用下来，Pixso MCP的价值不是给开发者一个一键出码的按钮，而是让VS Code里的AI助手少靠猜、多靠读。先把设计选区、项目约束、验收标准这些交代清楚，再让它动手，出来的东西才有继续改的基础。连上之后，设计稿能进到代码里，需求也能先在画布上形成可讨论的版本，两个方向都走得通。但最终怎么定，还是设计、产品和工程这边说了算。

注：本文部分内容由AI辅助生成，核心方法和案例经过人工校验和实际操作验证。