主题
设计协作
Figma / Pixso 是面向团队的产品设计协作平台,覆盖灵感、原型、设计、协作与交付。接入 MCP 后,AI 可以读取设计文件、页面、组件、节点、标注和交付信息,辅助前端实现、设计还原和 UI 检查。
适用场景
- 根据设计稿实现页面、组件或交互状态。
- 读取布局、颜色、字体、间距、组件层级和交付标注。
- 对照设计稿检查前端实现偏差。
- 将设计、原型、协作和交付信息带入编码任务。
推荐 MCP
| MCP | 适合团队 | 入口 |
|---|---|---|
| Figma | 使用 Figma 和 Dev Mode 的产品、设计、前端团队 | Figma MCP |
| Pixso | 使用 Pixso 进行产品设计协作和前端交付的团队 | Pixso MCP |
提示词示例
text
请读取当前设计稿中选中的页面或组件,
根据设计里的布局、间距、颜色、字体和交互状态实现前端组件。
实现后列出设计稿缺失或需要产品确认的信息。注意事项
- 设计协作平台提供的是产品设计与交付信息,不是业务逻辑的最终来源。
- 接入前确认设计文件、团队空间和客户项目是否允许 AI 客户端读取。
- 实现前补充响应式、空状态、错误状态、加载状态和权限规则。
- 交付后建议结合 测试与验收 做截图和交互检查。