如何使用本地 MCP

Pixso MCP 服务器的本地地址为： http://127.0.0.1:3667/mcp

使用注意

• 本地地址与端口：默认端口为 3667，但并非一直固定。配置 IDE / Agent 时，请以 Pixso 客户端中实际显示的地址为准。若同时打开 Pixso IDE 插件 与 Pixso 客户端，可能出现端口占用并导致端口变化；连接失败时请先核对客户端当前地址再更新配置。建议日常只保留一端提供本地 MCP 服务，避免双开冲突。
• 保持服务可用：使用本地 MCP 期间，请保持 Pixso 客户端（或 Pixso IDE 插件）开启并已登录；关闭后 IDE 将无法继续调用工具。
• 保持目标文件激活：目标设计文件需保持打开，且所在页签处于激活状态。切换到其他文件页签或关闭文件后，基于当前文件 / 选区的调用可能失败。
• 选区依赖：若指令依赖「当前选中图层」，请先在画布中明确选中目标图层（建议单选容器）。也可改用带 item-id 的图层链接定位，详见下文「第三步」。
• 席位与权限：调用工具还需满足账号席位与文件权限要求（如全功能 / 研发席位；写入需可编辑权限）。详见 工具与指令 中的权限说明。
• 客户端版本：本地 MCP 要求 Pixso 客户端版本不低于 2.2.0。

传输协议说明

本地 Pixso MCP 仅支持 HTTP / Streamable HTTP 方式接入，不支持 SSE。

第一步：启用客户端 MCP

1. 安装并登录 Pixso 客户端（客户端版本不低于 2.2.0）
2. 在 Pixso 客户端中新建或打开一个设计文件
3. 点击设计文件的顶栏左上角 MCP 配置入口

D2C+ 模式

开启后，MCP 的 design_to_code 工具将基于 D2C+ 的生成结果输出代码。

仅 Pixso 企业空间中的文件支持 D2C+；非企业空间文件无法使用。更多说明请参阅 D2C+。

第二步：在 IDE 中配置 Pixso MCP

请找到你使用的 IDE / Agent，按对应说明配置即可。

兼容说明

只要 IDE / Agent 支持 Streamable HTTP，即可接入 Pixso MCP，不限于下方列出的产品。

Claude Code (CLI)

在终端中执行以下命令快速配置：

claude mcp add --transport http pixso-desktop http://127.0.0.1:3667/mcp

---

Codex / ChatGPT

手动配置

1. 先在 Pixso 客户端中开启本地 MCP 服务
2. 打开 Codex 左下角账号菜单，进入 设置：

3. 在 集成 → 插件 中切换到 MCP，点击 + 添加服务器：

4. 选择类型为 流式 HTTP，填写名称与本地地址 http://127.0.0.1:3667/mcp 后保存：

---

Cursor

1. 打开 Cursor -> Cursor Settings -> MCP & Integrations。
2. 找到 MCP Tools 区域，点击 New MCP Server。
3. 名称可自定义（如 Pixso MCP），类型选择 http，并将 URL 设置为 http://127.0.0.1:3667/mcp。
4. 或者直接编辑 mcp.json，添加如下内容：

   {
     "mcpServers": {
       "Pixso MCP": {
         "url": "http://127.0.0.1:3667/mcp",
         "headers": {}
       }
     }
   }

5. 保存后，在设置面板点击启动。

---

VS Code

VS Code 原生 MCP 的配置结构与其他 IDE 不同，使用 servers 字段而非 mcpServers。

1. 在 VS Code 中打开 MCP 配置文件（用户级或工作区 .vscode/mcp.json）。
2. 添加如下内容并保存：

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

3. 重新加载 VS Code 或在 MCP 面板中刷新，连接成功后即可在对话中使用 Pixso MCP。

---

CodeBuddy

CodeBuddy IDE 支持 MCP 服务器配置，用于扩展 Agent 能力。

1. 在侧边栏对话面板右上角，点击 CodeBuddy 设置，切换到 MCP 标签页。
2. 点击右侧 添加 MCP，在 JSON 配置文件中添加如下内容并保存：

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

3. 保存后，MCP 服务器显示绿色状态即表示连接成功；也可在 Craft 智能体 中直接使用 Pixso MCP 工具。

也可通过配置文件添加：用户级 ~/.codebuddy/.mcp.json，或项目级 .mcp.json。

---

Qoder

Qoder IDE 通过 MCP 扩展 Agent 能力，支持 STDIO、SSE 和 Streamable HTTP 等传输方式。本地 Pixso MCP 使用 HTTP 接入即可。

1. 在 Qoder IDE 右上角点击用户图标，或使用快捷键 Ctrl + Shift + ,（Windows）/ ⌘ + Shift + ,（macOS），打开 Qoder 设置。
2. 在左侧导航栏选择 MCP，进入 我的服务器 标签页。
3. 点击右上角 添加，在 JSON 配置文件中添加如下内容并保存：

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

4. 保存后，服务器条目旁出现链接图标即表示连接成功；展开可查看可用工具列表。

也可通过配置文件添加：用户级 ~/.qoder/settings.json，项目本地级 ${project}/.qoder/settings.local.json，或项目级 ${project}/.mcp.json。

---

Cline 插件

Cline 是一款流行的 AI 编程插件。要将 Pixso MCP 接入 Cline：

1. 在 Cline 侧边栏的顶部导航中，点击 MCP Servers 图标（或在 Configure 标签下点击 "Configure MCP Servers"）。
2. 这将打开 cline_mcp_settings.json 文件。
3. 在文件中添加基于 Streamable HTTP 的 MCP 服务配置：

   {
     "mcpServers": {
       "pixso-mcp": {
         "type": "streamableHttp",
         "url": "http://127.0.0.1:3667/mcp"
       }
     }
   }

4. 保存文件，Cline 会自动连接到 Pixso MCP，连接成功后即可在 Cline 对话中使用。

---

Trae IDE

Trae v1.3.0 及以上版本原生支持 MCP。

1. 打开 Trae 设置，进入 MCP 配置面板；或直接编辑配置文件：项目级 .trae/mcp.json，或全局级 ~/.cursor/mcp.json（Trae 兼容 Cursor 配置目录）。
2. 在配置文件中添加 MCP 服务：

   {
     "mcpServers": {
       "pixso": {
         "url": "http://127.0.0.1:3667/mcp"
       }
     }
   }

3. 重启 Trae，或在 MCP 面板中点击刷新即可连接。

---

Kiro

Kiro 也支持通过 MCP 连接外部工具：

1. 打开 Kiro 的配置文件：全局级别的 ~/.kiro/settings/mcp.json 或工作区级别的 .kiro/settings/mcp.json。
2. 添加 Pixso 的 MCP 服务配置：

   {
     "mcpServers": {
       "pixso-mcp": {
         "url": "http://127.0.0.1:3667/mcp"
       }
     }
   }

3. （可选）如果您不希望频繁被询问是否允许调用 Pixso 工具，可以在配置中加入 "autoApprove": ["getCode", "getNodeDSL"] 等参数。保存并重新加载 Kiro 即可。

---

Windsurf

1. 打开 Windsurf 设置，进入 MCP Servers 面板，点击 Manage MCPs。
2. 点击 View raw config 打开 mcp_config.json。
3. 添加如下内容并保存：

   {
     "mcpServers": {
       "pixso": {
         "serverUrl": "http://127.0.0.1:3667/mcp"
       }
     }
   }

4. 返回配置页点击刷新，显示绿色状态即连接成功。

TIP

完成 MCP 连接后，建议继续安装 Pixso MCP Skill 插件，以获得更好的 Agent 使用体验。请参阅 Pixso MCP Skill。

第三步：在 Agent 客户端中对话

MCP 客户端与 Pixso MCP 服务器成功连接后，即可在客户端中使用。

Pixso MCP 支持以下两种方式获取 Pixso 设计稿数据：

复制链接

注意事项

图层的链接不是文件的分享链接，也不是页面的链接

链接上的 "item-id" 用于帮助 Agent 找到你想要的图层

1. 在 Pixso 客户端中打开设计文件
2. 在设计文件中选中容器，复制容器链接
3. 在客户端 IDE（如 Cursor）中打开对话模式，在对话中粘贴容器链接，并给出相关指令，如：生成 HTML 代码

将链接粘贴到 Agent 对话框中

选中容器

1. 在 Pixso 客户端中打开设计文件
2. 在设计文件画布内单选中容器图层
3. 在客户端 IDE（如 Cursor）中打开对话模式，进行对话，如：生成 HTML 代码

注意事项：

为保证 MCP 服务的正常连接：

1. 请保持 Pixso 客户端始终开启
2. 请保持容器所处的设计文件始终处于激活页签