Pixso Developer

中文

English

中文

English

Appearance

如何使用远程 MCP ​

远程 MCP 运行在 Pixso 云端服务器上，无需打开 Pixso 网页端即可使用。通过访问令牌进行身份验证，即可在各类 Agent 工具中接入 Pixso 远程 MCP 服务。

第一步：获取访问令牌 ​

  1. 在 Pixso 工作台界面，点击右侧用户头像，选择 "用户中心"，找到 "个人访问令牌"
  2. 点击 "生成令牌"，并将生成的令牌复制一次，妥善保存

获取访问令牌

注意

访问令牌是您访问 Pixso 远程 MCP 的凭证，请妥善保管。如果令牌泄露，请及时重新生成。

令牌仅在首次生成时可以复制完整内容，如果忘记，需要重新生成。

Pixso 远程 MCP 服务器地址为： https://pixso.cn/api/mcp/mcp

第二步：配置 ​

Claude Code (CLI) ​

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

bash
claude mcp add --transport http remote-pixso https://pixso.cn/api/mcp/mcp --header "Token:个人访问令牌"

Cursor ​

  1. 打开 Cursor -> Settings -> MCP Tools。
  2. 点击 New MCP Server。
  3. 名称可自定义（如 Pixso Remote MCP）。
  4. 编辑 mcp.json文件，添加如下内容：
    json
    {
  "mcpServers": {
    "Pixso Remote MCP": {
      "url": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Token": "用户个人访问令牌"
      }
    }
  }
}
  5. 保存后，当 Pixso Remote MCP 状态为绿色，表示连接成功；红色表示故障，不可用。

启用客户端 MCP

Cline 插件 (VS Code 中使用) ​

将 Pixso 远程 MCP 接入 Cline：

  1. 打开 vscode，选择 Extensions，搜索 cline，点击 install 完成安装
  2. 打开 cline 插件，选择 Remote Servers，输入对应信息，点击 Add Server。

注意

Server name填写 pixso-remote-mcp，Server URL填写 https://pixso.cn/api/mcp/mcp。

启用客户端 MCP

  1. 确定开关以及状态灯，绿色为连接成功，点击 Configure MCP Servers，输入用户个人访问令牌即可（正常情况下部分代码已经存在，仅需输入个人访问令牌即可）
    json
    {
  "mcpServers": {
    "pixso-remote-mcp": {
      "autoApprove": [
        "get_local_styles",
        "get_variable_sets",
        "get_variables",
        "get_variants"
      ],
      "disabled": false,
      "timeout": 60,
      "type": "streamableHttp",
      "url": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Token": "用户个人访问令牌"
      }
    }
  }
}
  2. 保存文件，Cline 会自动连接到 Pixso 远程 MCP，连接成功后即可在 Cline 对话中使用。

Trae IDE ​

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

  1. 打开 trae -> Settings -> MCP-> 手动添加。

启用客户端 MCP

启用客户端 MCP

  1. 在配置文件中添加远程 MCP 服务：
    json
    {
  "mcpServers": {
    "Pixso Remote MCP": {
      "url": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Token": "用户个人访问令牌"
      }
    }
  }
}
  2. 保存文件，连接成功后即可在 Trae 对话中使用。

Kiro ​

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

  1. 打开kiro，打开一个文件夹（任意文件夹、空文件夹也可以）
  2. 点击设置，搜索 MCP
  3. 点击 Open User MCP Config (JSON)

启用客户端 MCP

  1. 将以下这段代码粘贴进去，保存。
    json
    {
  "mcpServers": {
    "pixso-remote-mcp": {
      "url": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Token": "用户个人访问令牌"
      }
    }
  }
}
  2. （可选）如果您不希望频繁被询问是否允许调用 Pixso 工具，可以在配置中加入 "autoApprove": ["getCode", "getNodeDSL"] 等参数。保存并重新加载 Kiro 即可。

Windsurf ​

  1. 打开 Windsurf Settings，进入 MCP Servers 面板，点击 Manage MCPs。
  2. 点击 View raw config 打开 mcp_config.json。
  3. 添加如下内容并保存：
    json
    {
  "mcpServers": {
    "pixso-remote": {
      "serverUrl": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Token": "用户个人访问令牌"
      }
    }
  }
}
  4. 返回配置页点击刷新，显示绿色状态即连接成功。

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

与 Pixso 远程 MCP 服务器成功连接后，即可在网页端通过图层链接获取 Pixso 设计稿数据，使用大模型进行对话。

复制文件链接 ​

  1. 在 Pixso 工作台中打开设计文件
  2. 右键复制容器图层的链接

注意事项

图层的链接通过右键图层，选择“复制链接”获取

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

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

提示

远程 MCP 无需保持 Pixso 网页端开启，只需确保访问令牌、图层链接有效即可使用 推荐使用先进的大模型（如 Claude-4.6-sonnet 等）

启用客户端 MCP

  1. 在客户端 IDE（如 Cursor）中打开对话模式，在对话中粘贴容器链接，并给出相关指令，如：根据设计稿生成 HTML 代码

启用客户端 MCP