关于Pixso MCP

MCP（Model Context Protocol，模型上下文协议）是一种开放协议。通过MCP可以为LLM（大模型）提供一种标准化、安全、可扩展的框架，使LLM能够与外部工具或数据源进行交互。

Pixso MCP服务器可实现将 Pixso设计稿数据传送至包含AI编程工具的本地IDE（如Cursor、VS Code、Windsurf等）中，智能化生成前端代码，高效实现设计到代码的转变。

Pixso MCP功能仅在Pixso客户端中可用。

通过Pixso MCP，用户可以：

1. 为选中的容器（设计稿）生成代码，实现设计到代码的转变
2. 提取容器结构化数据：将容器对应的前端代码、图片数据直接发送至客户端

如何使用Pixso MCP

步骤1：启用Pixso MCP

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

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

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

步骤2：将Pixso MCP集成至客户端中

Pixso MCP服务器成功启动后，在MCP客户端中进行配置，即可成功连接至服务器。

Pixso MCP支持的客户端及配置说明如下：

Cursor

1. 打开Curosr→设置（Cursor Settings）→MCP & Integrations
2. 在MCP & Integrations页中找到MCP Tools，点击新增MCP服务器（New MCP Server）
3. 将下列配置粘贴进mcp.json文件中，保存

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

保存后返回MCP & Integrations页，启动Pixso MCP，启动过程中会loading tools，加载出tools时，表示已成功连接至Pixso MCP服务器。

VS Code

1. 打开VS Code→打开对话窗（Ctrl+Alt+I）→在输入框内选中并打开Configure Tools
2. 在Configure Tools页面选中Add MCP Server→选择HTTP，首次使用时，任意输入内容，以打开mcp.json
3. 将下列配置粘贴进mcp.json文件中，保存

{
    "servers": {
        "pixso": {
            "url": "http://localhost:3667/mcp",
            "type": "http"
        }
    },
    "inputs": []
}

保存后，输入框内会出现MCP服务器相关设置，点击设置→点击Start Server，在客户端内启动MCP服务。控制台中输出：Connection state：Running时，连接成功

注意：VS Code1.99版本及以后才支持MCP，使用时注意检查版本哈

Windsurf

1. 打开并登录Windsurf→点击Settings→打开Windsurf Settings
2. 在General页面上找到MCP Servers→点击Manage MCPs，打开MCP配置面板
3. 在MCP配置面板上找到并点击 View raw config，打开mcp_config.json文件，将下列配置粘贴进json文件中，保存

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

4. 保存后返回Manage MCPs页面，点击刷新，加载出以下内容后，说明配置成功

Claude Code

1. 在终端使用以下命令配置即可

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

步骤3：在客户端中对话

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

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

复制链接

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

选中容器

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

注意事项：

1. 为保证MCP服务的正常连接：
1. 请保持Pixso客户端始终开启
2. 请保持容器所处的设计文件始终处于激活页签
2. 请使用先进的大模型（如Claude-4.0-sonnet等）