如何使用本地 MCP

第一步：启用客户端 MCP

1. 安装并登录 Pixso 客户端（客户端版本不低于 2.2.0）
2. 在 Pixso 客户端中新建或打开一个设计文件
3. 在设计文件的左上角文件下，找到并启用 Pixso MCP

成功启用 Pixso MCP 后，当前画布的底部会出现 Pixso MCP 已成功启用的提示。

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

第二步：配置

Claude Code (CLI)

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

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

Cursor

1. 打开 Cursor -> Cursor Settings -> MCP & Integrations。
2. 找到 MCP Tools 区域，点击 New MCP Server。
3. 名称可自定义（如 Pixso MCP），类型选择 sse 或 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. 保存后，在设置面板点击启动。

Cline 插件 (VS Code 等)

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

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

   {
     "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.json 或全局配置 ~/.cursor/mcp.json (Trae 兼容配置目录)。
2. 在配置文件中添加 SSE 类型的服务：

   {
     "mcpServers": [
       {
         "name": "pixso",
         "url": "http://127.0.0.1:3667/mcp",
         "type": "sse"
       }
     ]
   }

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. 返回配置页点击刷新，显示绿色状态即连接成功。

第三步：在 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. 请保持容器所处的设计文件始终处于激活页签
3. 请使用先进的大模型（如 Claude-4.6-sonnet 等）