Pixso MCP：把设计上下文接入 AI 工作流

智能协作 · MCP

把设计上下文接入 AI 工作流

这里把 Pixso MCP 理解为连接设计与 AI Agent 的一座桥：让 Agent 在授权范围内读取节点、组件、样式和变量，也能协助生成代码或编辑画布。下面按常见的落地顺序，整理选型、接入和使用建议。

实际接入时，我建议先确定目标文件和希望 Agent 完成的任务。连接 Pixso 后，可以提供具体图层链接，或在客户端中选中目标容器；随后让 Agent 读取设计、生成代码，或在明确授权范围后修改画布。

判断“该接哪一种”时，可以先看目标文件在哪里、使用时是否能保持 Pixso 客户端开启，以及是否需要跨设备协作。下面这张表可以快速对照：

比较项	本地 MCP	远程 MCP
服务运行位置	Pixso 桌面客户端提供本地服务	Pixso 云端服务
目标文件	客户端中已打开且处于激活状态的设计文件	通过 Pixso 图层链接定位云端设计
使用前提	安装并登录 Pixso 客户端，使用期间保持客户端和目标文件开启	Agent 支持 Streamable HTTP，并完成 OAuth 2.1 授权或配置个人访问令牌
服务地址	`http://127.0.0.1:3667/mcp`；以客户端当前显示的端口为准	`https://pixso.cn/mcp`；私有化环境请使用对应内网地址
适合场景	本机边看设计边开发，依赖当前客户端文件或选区的工作	跨设备访问、远程协作，或不方便启动桌面客户端的工作

两种形态都能覆盖多类设计工作，但可用工具会随服务形态和版本变化。我建议在规划流程前，先用官方工具与指令清单核对具体能力。

为了让团队容易复现，我通常建议先在工作区的 .vscode/mcp.json 配置并验证连接。VS Code 原生 MCP 使用 servers 字段；本地和远程任选一种开始，远程首次连接时按客户端提示完成 OAuth 授权。

如果你需要围绕当前桌面文件工作，我会建议从本地服务开始：使用 Pixso 客户端 2.2.0 或更新版本，打开设计文件并在文件顶栏启用 MCP。

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

如果你要跨设备使用，或不方便一直打开桌面客户端，我会建议评估远程服务。连接后用图层链接指定目标，不需要保持 Pixso 客户端开启。

{
  "servers": {
    "pixso-remote": {
      "url": "https://pixso.cn/mcp"
    }
  }
}

个人访问令牌也是一种接入方式。我会把它当作账号凭证管理：不要提交到代码仓库，也不要粘贴到公开对话中。其他 IDE 的配置字段可能不同，请按对应客户端文档调整。

设计转代码：我会先让 Agent 用 design_to_code 处理明确的目标图层，再结合项目框架和组件规范检查生成结果。
理解设计结构：需要先读懂画布时，我会从 get_node_dsl、query_nodes、read_components、read_styles 或 read_variables 开始。
代码转设计：把 HTML 或网页项目带回 Pixso 时，可了解 code_to_design 的适用方式。
迭代与检查：确认写入范围后，再考虑使用 apply_design 等工具编辑，并用截图或布局检查复核。

排查权限问题时，我会先核对账号席位和文件权限。设计转代码 / D2C+ 对席位及企业空间文件另有要求，具体请查看官方文档。

这是个人整理的接入与实践说明，不代表官方产品公告。产品能力、席位要求和配置细节可能调整，请以 Pixso 官方 MCP 文档为准。