Pixso MCP
连接设计和代码
Pixso MCP 旨在连接设计工具(Pixso)与 AI 模型/开发环境(如Cursor、VS Code、 Windsurf 等)，实现设计数据与代码的实时同步
结构化设计数据访问
统一存取设计资产，高效协同复用
内容自动化生成与导出
一键生成多端内容，自动导出交付物
样式与组件统一管理
全局管控样式规范，组件库一键同步
Pixso MCP
核心特性
为开发者打造的智能设计到代码转换的 MCP 服务
无缝集成
深度融合 Pixso 与主流 IDE，实现设计资产即时互通，无需复杂配置即可开启高效开发流程
AI 原生理解
基于 MCP 协议赋予 AI 深度解析图层逻辑，实现代码智能化精准构建
设计稿智能转代码
驱动 AI 自动化生成高质量代码，极速缩短从设计到落地的周期
标准化协议
完全兼容 MCP 标准，打破 AI 协作壁垒，构建开放、可扩展的智能工作流
原生样式与变量管理
支持云端样式实时同步，确保设计规范高度一致，从源头消除开发偏差
官方支持
Pixso 团队持续维护更新，提供详尽接入指南与示例项目，确保技术服务稳定且易于上手
如何使用
Pixso MCP
3 个步骤，快速启用 Pixso MCP
步骤一：启用 Pixso MCP
备注：成功启用 Pixso MCP 后，当前画布的底部会出现 PixsoMCP 已成功启用的提示
步骤二：将 Pixso MCP 集成至客户端中
Pixso MCP 服务器成功启动后，在 MCP 客户端中进行配置，即可成功连接至服务器
步骤三：在 MCP 客户端中对话
MCP 客户端与 Pixso MCP 服务器成功连接后，即可在客户端中使用。
PixsoMCP 支持以下两种方式获取 Pixso 设计稿数据：
方式一：复制链接
- 在 Pixso 客户端中打开设计文件
- 在设计文件中选中容器，复制容器链接
- 在客户端 IDE（如 Cursor）中打开对话模式，在对话中粘贴容器链接，并给出相关指令，如：生成 HTML 代码
方式二：选中容器
- 在 Pixso 客户端中打开设计文件
- 在设计文件画布内单选中容器图层
- 在客户端 IDE（如Cursor）中打开对话模式，并给出相关指令，如：生成 HTML 代码
注意事项
1.为保证 MCP 服务的正常连接
- 请保持 Pixso 客户端始终开启
- 请保持容器所处的设计文件始终处于激活页签
2.请使用先进的大模型（如 Claude-4.0-sonnet 等）
兼容多种
主流开发环境
在你熟悉的开发工具中，直接理解和转化设计稿
Cursor
AI驱动的代码编辑器
VS Code
通用开发环境
Windsurf
多模型 AI IDE
Claude Code
AI协作编程工具
常见问题
Pixso MCP 服务器提供什么格式的数据？
-
Pixso MCP服务器提供以下工具供LLM获取、理解设计稿数据：
- getcode：通过此工具可以获取设计稿对应的HTML数据
- getimage: 通过此工具可以获取设计稿中的图片数据
MCP客户端 IDE(如Cursor)中生成代码失败，报无法获取 Pixso 设计文件数据时怎么办？
-
MCP客户端中生成代码失败，可能原因及处理方式如下：
- Pixso 客户端未打开或未正常运行：检查Pixso客户端，保证Pixso客户端打开且正常运行，必要时可重启Pixso客户端
- Pixso MCP服务器或客户端未正常运行：检查Pixso客户端及客户端IDE中MCP相关设置，确保MCP是正常启动且连接成功
- Pixso客户端中设计文件未打开或打开处于非激活页签：使用时请确保链接/选中容器所在的设计稿文件在Pixso客户端中是打开，且处于激活页签
- 使用选择容器模式时，在画布中多选了容器：目前选择容器方式仅支持单选容器图层
- 所选中的大模型不支持MCP：部分模型不支持或不兼容MCP协议，使用时请选择先进、支持MCP协议的大模型，如cluade系列、qwen3系列等
生成代码的效果不达预期怎么办？
-
生成代码的效果受多方因素影响，包含但不限于：
- 设计内容的复杂度：当设计内容过于复杂（如存在多层蒙版）、图层数量过多时，可能造成输入内容超出大模型上下文处理能力，导致上下文溢出，大模型对设计稿的还原度较差或无法正确生成。
- 生成代码类型：Pixso MCP服务器会将设计内容对应的HTML代码数据发送至大模型，便于大模型生成高还原度的前端代码。当用户要求生成非HTML框架的前端代码时，效果可能受影响。
- 大模型的智能化程度：不同模型的智能化程度不一，对输入内容的语义理解、生成代码能力也大不相同。为了提高生成效果，请尽量选择先进的、代码能力较强的大模型。
客户端IDE中找不到MCP的配置入口怎么办？