ACORG docs

主题

Pixso MCP ​

Pixso MCP 用于把 Pixso 设计文件、节点、图片和元数据接入 AI 客户端,让 Agent 根据真实设计稿生成代码、说明或设计检查结果。

官方文档:

适用场景 ​

  • 根据 Pixso 设计稿实现页面或组件。
  • 读取设计节点、布局、图片和样式信息。
  • 让 Agent 对照设计稿检查前端实现偏差。
  • 在 Cursor、Trae、Claude Code、Cherry Studio、5ire、Coze 等支持 MCP 的客户端中接入 Pixso。

两种服务方式 ​

类型地址适合场景
本地 MCPhttp://127.0.0.1:3667/mcp已安装 Pixso 客户端,需要读取当前本机设计上下文
远程 MCPhttps://pixso.cn/api/mcp/mcp不想依赖本地客户端,需要从云端访问 Pixso 设计资源

本地 MCP ​

本地 MCP 运行在 Pixso 客户端内。使用前需要:

  1. 安装并登录 Pixso 客户端。
  2. 在客户端中开启本地 MCP 服务。
  3. 在 AI 客户端中添加 MCP 地址:
text
http://127.0.0.1:3667/mcp

Pixso 官方文档说明本地 MCP 当前只支持 HTTP / Streamable HTTP 传输,不支持 SSE 协议。

远程 MCP ​

远程 MCP 运行在 Pixso 云端:

text
https://pixso.cn/api/mcp/mcp

远程 MCP 需要 Pixso 个人访问令牌。官方文档给出的请求头格式:

text
Authorization: Bearer <your personal access token>

访问令牌应只保存在本机客户端配置或安全的密钥管理系统中,不要写入仓库。

Cursor 配置示例 ​

本地 MCP:

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

远程 MCP:

json
{
  "mcpServers": {
    "pixso": {
      "url": "https://pixso.cn/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer <your personal access token>"
      }
    }
  }
}

可用能力 ​

Pixso MCP 官方文档围绕设计资源读取提供工具能力,常见用途包括:

  • 获取文件、页面或节点信息。
  • 读取节点结构、样式、尺寸和层级。
  • 导出或读取图片资源。
  • 辅助生成前端代码、设计说明和 UI 检查结果。

提示词示例 ​

text
请通过 Pixso MCP 读取当前设计稿的选中节点,
根据设计中的尺寸、间距、颜色和字体实现 Vue 组件。
实现后列出和设计稿不确定或缺失的信息。

注意事项 ​

  • 设计稿访问权限由 Pixso 账号和令牌决定,不要给 Agent 超出任务范围的权限。
  • 本地 MCP 依赖 Pixso 客户端运行,排查问题时先确认客户端和本地服务状态。
  • 远程 MCP 使用个人访问令牌,应定期轮换并避免提交到 Git。
  • 设计稿只提供视觉和结构上下文,业务逻辑、接口字段和权限规则仍需以产品和代码为准。
  • 实现后建议用浏览器截图与设计稿对照验收。

相关文档 ​