设计稿交到开发手里，大结构一般不会错。容易丢的一般都是小地方：图层顺序、间距、字号、颜色、组件状态，还有哪些元素本来能复用。以前只能看截图、查标注，再手工翻成 JSX 和 CSS。页面简单还能扛，后台系统或者组件一多，来回确认就很花时间。
这次我把 Pixso MCP 接进 VS Code ，完整跑了一遍：连接、读设计上下文、用 Pixso AI Skill 生成和编辑设计稿，再辅助出前端代码。MCP 管工具之间怎么传上下文，Pixso AI Skill 管 AI 怎么调用 Pixso 的设计能力，两个得配合着来。
一、准备工作：先确认版本和权限
开始前，先把这些准备好：
- VS Code；
- 支持 MCP 的 AI 编程扩展；
- Pixso 客户端；
- 一个能编辑或查看的 Pixso 设计文件；
- 当前项目的技术栈和组件目录。
Pixso 客户端尽量用支持 MCP 的版本，账号也先登录。打开目标设计文件，确认自己至少有查看权限。后面要让 AI 改画布，编辑权限也必须有。
第一次别拿完整项目试，找一个边界清楚的容器就行，比如表单区块、设置面板或者卡片。连接有没有成功，很快能判断，也不容易把页面背景、历史稿和其他图层一起传给模型。
还有件事得提前说清：MCP 连接成功，只代表 VS Code 能访问 Pixso 服务，不代表模型已经理解设计。文件、页面和当前选区对不对，仍然要人工确认。
二、在 VS Code 中添加 Pixso MCP
打开 Pixso 客户端，在目标文件中找到 MCP 配置入口，开启本地 MCP 服务。客户端会显示一个本地服务地址，常见形式是：
http://127.0.0.1:3667/mcp实际用的时候，别照抄固定端口，直接复制 Pixso 界面当前显示的地址。端口被占用，或者客户端版本变化，地址可能不同。
然后在 VS Code 中打开 AI 扩展的 MCP 配置界面，新增一个 HTTP 类型的服务。扩展支持工作区配置的话，也可以在项目根目录创建：
.vscode/mcp.json常见配置格式如下：
{
"servers": {
"pixso": {
"type": "http",
"url": "http://127.0.0.1:3667/mcp"
}
}
}有些扩展用的是 mcpServers 字段，具体格式看扩展当前版本要求。别把两种格式混在一个文件里。JSON 能正常打开，服务却可能不加载。
保存配置后，回到 VS Code 的 MCP 面板，检查 Pixso 服务是否启用。扩展能显示工具列表，基本连接就算建立。
这时先别让 AI 改代码或画布，发一次只读请求：
请读取 Pixso 中当前选中的容器。
先不要修改设计，也不要改动项目文件。
请说明当前图层层级、主要颜色、字号、间距、重复元素，
并列出设计稿中没有明确表达的交互状态。返回内容和当前选区不一致，先检查 Pixso 是否停留在正确文件和页面，再确认选中的是目标容器，而不是整个画板。很多"AI 理解错了"的问题，其实是选区范围过大。
三、别漏掉 Pixso AI Skill
只接入 MCP，主要解决"让 AI 访问 Pixso"。如果还想在 VS Code 对话里调用 Pixso 生成、编辑或转换设计，需要安装 Pixso 官方 AI Skill。
Skill 可以理解成一组面向 AI 的操作说明。它会告诉客户端什么时候读取设计、什么时候编辑画布、什么时候执行设计转代码，以及这些工具应该怎样组合。没有 Skill，客户端可能能连上 MCP，但不知道如何完整调用 Pixso 的设计能力。
目前官方示例通常以 PixsoLtd/pixso-ai-integration 项目为基础。安装时，需要把 Skill 放入当前 AI 客户端能够识别的 Skills 目录，或者使用客户端提供的本地 Skill 导入功能。不同版本的 VS Code 扩展，入口名称可能叫 Skills、Custom Instructions、Agent Skills 或 Extensions。
安装完成后，重启或刷新 VS Code，再检查 Skill 是否已经加载。常见的能力名称包括：
pixso-read-dsl：读取设计结构；pixso-design-editing：编辑 Pixso 画布；pixso-design-to-code：将设计内容转换为代码；pixso-code-to-design：将代码或页面结构转换为可编辑设计。
名称可能随版本更新，以官方仓库和当前客户端显示为准。
安装完成后，先让 AI 列出当前可用的 Pixso Skill，不要马上开始生成：
请确认当前已经加载了哪些 Pixso Skill，
分别说明它们可以读取、生成、编辑或转换什么内容。
先不要执行设计修改。如果客户端无法识别 Skill，优先检查安装目录、文件层级和扩展版本。Skill 文件多套了一层目录、配置文件没有被扫描到，都是比较常见的原因。
四、连接后能做什么
连接完成并加载 Skill 后，VS Code 里的 AI 就不只是"看截图写代码"了。
第一种用法，是让 Pixso AI 生成设计稿。比如已有一段页面需求，可以要求 AI 调用 Pixso 的设计生成或编辑能力，在当前文件中创建一份可继续调整的设计初稿：
请调用 Pixso AI Skill，在当前文件中新建一个后台设置页面初稿。
要求包含页面标题、左侧导航、基础表单和保存操作。
优先使用当前项目已有的颜色和文字样式。
先生成可编辑的画布结构，不要修改代码仓库。
完成后说明创建了哪些页面和组件。
生成完成后，设计师仍然可以在 Pixso 中调整布局、组件、颜色和文案。这个过程和生成一张静态图片不同，画布中的节点可以继续编辑，也可以作为后续协作和开发的依据。
第二种用法，是从 Pixso 读取设计上下文。设计确认后，在画布中选中明确的容器，再让 AI 读取它的结构和变量。相比只提供截图，模型可以获得更多信息，例如图层层级、重复元素、尺寸关系和文本内容。
第三种用法，是辅助设计转代码。可以把技术栈、目录结构和组件约束一起告诉 AI：
请基于当前 Pixso 选区生成 React + TypeScript 组件。
要求：
- 优先复用项目现有基础组件；
- 不新增第三方依赖；
- 样式沿用当前项目方案；
- 不修改路由和接口；
- 完成后列出修改文件，以及设计稿中仍需确认的部分。生成结果通常更适合当作组件初稿，而不是直接提交的最终代码。开发仍然需要检查类型、lint、响应式布局、键盘焦点、加载状态、错误状态和真实资源路径。
这套连接最明显的变化，是减少了重复搬运。字号和颜色不必全部手工抄写，组件结构也不需要完全依赖截图猜测。设计发生局部调整时，还可以重新选中对应容器，让 AI 只处理受影响的组件。
五、排错和使用边界
如果服务显示未连接，先看 Pixso MCP 是否开启，再核对 VS Code 中的 URL、协议类型和配置格式。Pixso 本地服务使用 HTTP 或 Streamable HTTP，不要误配成其他传输方式。
- 如果能连接但读取结果不对，优先缩小选区，确认文件权限和当前页面，再发起只读请求。不要在上下文错误时直接生成代码，否则错误会被带进项目。
- 如果生成页面和设计稿差距较大，也不一定是 MCP 失效。设计稿可能没有定义断点、错误态、禁用态或权限差异；项目中已有组件的真实用法，也不一定能从画布中推断出来。这些内容应该补充到需求、设计说明或提示词里。
还要注意安全边界。不要把生产密钥、用户隐私或无关目录暴露给 AI。团队项目可以共享 MCP 配置，但账号令牌和敏感路径不应该写进仓库。
实际使用下来，MCP 负责把连接打通，Pixso AI Skill 负责调用设计能力，设计师和开发者仍然负责判断与验收。建议先连接，再只读验证；先安装并确认 Skill，再生成或编辑；先处理一个小区块，再逐步扩大范围。这样得到的结果，才更容易真正进入项目流程。