Pixso Developer

中文

English

中文

English

Appearance

如何使用本地 MCP ​

第一步：启用客户端 MCP ​

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

启用客户端 MCP

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

D2C+ 模式

开启后，MCP 的 design_to_code 工具将基于 D2C+ 的生成结果输出代码。D2C+相关内容请参阅 D2C+ 组件解析器。

传输协议说明

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

第二步：在 IDE 中配置 Pixso MCP ​

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

Claude Code (CLI) ​

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

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

Codex (CLI / App) ​

Codex CLI 与 Codex app 共用 MCP 配置，存储在 ~/.codex/config.toml（也可在项目级 .codex/config.toml 中配置）。

方式一：命令行快速配置

在终端执行：

bash
codex mcp add pixso --url http://127.0.0.1:3667/mcp

方式二：编辑配置文件

打开 ~/.codex/config.toml，添加如下内容并保存：

toml
[mcp_servers.pixso]
url = "http://127.0.0.1:3667/mcp"

保存后，新开一个 Codex thread 或在会话中执行 /mcp 检查连接状态。也可运行 codex mcp list 查看已配置的 MCP 服务器。

NOTE

Codex 使用 TOML 格式的 config.toml 管理 MCP，与 Cursor 等 IDE 的 JSON 配置方式不同。如需安装 Pixso Skills 插件以获得更好的使用体验，请参阅 Pixso MCP Skill。

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，添加如下内容：
    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. 添加如下内容并保存：
    json
    {
  "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 配置文件中添加如下内容并保存：
    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 配置文件中添加如下内容并保存：
    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 服务配置：
    json
    {
  "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 服务：
    json
    {
  "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 服务配置：
    json
    {
  "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. 添加如下内容并保存：
    json
    {
  "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. 请保持容器所处的设计文件始终处于激活页签