如果你在用 AI 编码智能体（Cursor、Claude Code、Windsurf、Codex）从设计构建 UI，多半碰到了同一面墙：聊天里塞一张截图给智能体，对琐碎组件还行，遇到稍微像样的 UI 就崩。智能体推断、推断错、你纠正、token 烧光、最后还是手工重做。
更好的管线是这样的：先用 Codia AI 把截图转成结构化 Figma 文件；再把 Figma MCP server 接到智能体。智能体消费的是结构化版式数据、Variables、组件、设计 Token——不是一张被压扁的图像。输出质量上去了，迭代轮数下来了，工作不再像"和工具搏斗"。
什么是 Figma MCP server
Figma MCP server 是 Figma 文件与支持 Model Context Protocol 的 AI 智能体之间的官方桥梁。它把你 Figma 文件的图层、组件、Variables、设计 Token 暴露成智能体能直接读的结构化数据——而不是逼智能体从一张截图里反推一切。
支持 MCP 的编辑器：VS Code、Cursor、Windsurf、Claude Code、Codex。
MCP 解决的问题
把截图粘进 Cursor 或 Claude Code 说"按它建"，智能体的动作是：
- 用 Vision 看图
- 猜版式结构
- 猜间距
- 猜配色
- 猜组件
- 据这些"猜"写代码
每一个"猜"都堆 token、降质量。真实设计文件本来就把这些以数据形式存好。MCP 把它暴露出来。
Codia 解决的问题（针对这个工作流）
MCP 需要一份 Figma 文件才有用。如果你只有想做的参考 UI 的截图——MCP 帮不上忙。你又被推回"粘图"。
Codia 关上这个缺口。截图 → Codia → 结构化 Figma 文件（带 Variables、Auto Layout、命名组件）→ MCP-ready。
三步管线
第 1 步：用 Codia 转换截图
把参考截图——竞品页面、灵感图、现有生产屏——扔进 Codia AI：
- 上传到 Codia Figma 插件或 Web 应用
- 跑转换（一屏干净 UI 约 10 秒）
- 在 Figma 中打开
输出是真实 Frame、真实文字图层、清晰处的 Auto Layout、重复元素的组件。关键：它有结构，这正是 MCP 要消费的。
转换本身的细节见 截图转 Figma：完整指南。
第 2 步：为 MCP 清理 Figma 文件
MCP 对干净 Figma 文件的回报是不成比例的。花 5 分钟：
- 给颜色应用 Variables。 裸 hex 给智能体的是字符串；Variables 给的是 Token。智能体的输出会用你的设计系统而不是自己造一套。
- 确认 Auto Layout 已应用到所有应该响应式的容器。MCP 直接把这个传给智能体作为版式应该如何变化的理解。
- 给组件起有意义的名字。
PrimaryButton、NavItem、PricingCard，不是Group 47。智能体会用这些名字写代码。 - 重复元素分组为组件，不是临时副本。MCP 把组件作为一等概念暴露。
如果你从 Codia 转换的文件起步，多数已经做好了——转换会创建 Auto Layout、命名元素、组合重复模式。那 5 分钟只是打磨。
第 3 步：在编辑器里接 MCP，生成代码
在你的编辑器里安装并配置 Figma MCP server。官方设置见 Figma MCP server 指南。
然后在 prompt 里引用 Figma 文件或选区：
"用 Figma 文件 [链接或选区 ID] 严格按设计构建一个 React 组件。使用设计系统 Variables，匹配间距 Token。"
智能体现在拿到：
- 真实图层层级
- Auto Layout 的真实间距值
- Variables 的真实颜色 Token
- 真实组件定义
- 可选的选区截图（视觉确认）
输出对设计的对齐度比"粘截图"基线高得多。
为什么这套管线胜过"聊天里粘截图"
| 方法 | 智能体得到 | 输出质量 | Token 消耗 |
|---|---|---|---|
| 聊天里粘截图 | 像素 + 你的 prompt | 低-中，大量推断 | 高——多轮纠正 |
| Codia → MCP → 智能体 | 结构化版式 + Variables + 组件 + 截图 | 中-高，更少推断 | 低——更少纠正 |
| Codia → MCP → 智能体 + 干净 Figma | 同上加设计系统数据 | 高 | 最低 |
实测影响：用完整管线的团队报告 UI 生成任务的"再修一下"轮数下降 ~50–70%。Token 花费同步下降。
Cursor 中的步骤示例
具体走 Cursor：
- 在 Figma 里打开 Codia 生成的文件，选中要构建的 Frame。
- 在 Cursor 里安装 Figma MCP server（设置 → MCP → Add Server）。
- 在 Cursor 聊天写："用 Figma MCP server 拉取我 Figma 文件的选中 Frame，生成一个严格匹配设计的 React + Tailwind 组件，用 Variables 作为 Tailwind 主题 Token。"
- 智能体调用 MCP 工具，拿到结构化数据 + 选区截图。
- 生成组件。 第一稿就比"截图 prompt"接近设计很多。
- 迭代时引用同一份 Figma 源做具体修改。
配 Claude Code
同管线，工具略不同。Claude Code 原生支持 MCP。Figma MCP server 安装方式相同，prompt 风格相同。
如果已经在用 Claude Code 做后端，加 Figma MCP server 就让同一个智能体从你的 Codia-Figma 文件构建 UI。
配 Windsurf
同上。Windsurf 的 MCP 支持让 Figma MCP server 接入方式与 Cursor / Claude Code 相同。
常见坑
跳过 Variables。 如果 Figma 文件到处用裸 hex，MCP 给智能体的是裸字符串。应用设计系统 Variables——这就是"对的品牌色"和"接近你品牌色"的差异。
忘记 Auto Layout。 没有 Auto Layout，MCP 能描述位置但不能描述响应式意图。Auto Layout 把它转成"这是 16px gap 的 flex row"——可执行。
一次 prompt 要太多。 "把整个仪表盘建出来"太大。"按 Figma 选区构建侧栏组件"好得多。在组件层组合，再拼装。
Figma 选区不准。 MCP 拉的是你选中的。模糊选区→模糊上下文。挑你想要的那个 Frame。
MCP 与截图 prompt 混用。 已经接 MCP 就用 MCP，别再粘截图——智能体会看到两个真理来源，挑省事的那个。
超越单屏：构建组件库
管线可放大：
- 用 Codia 批量转一组代表性截图
- 在 Figma 里组件化结果
- 应用 Variables 与设计系统
- 用 MCP 让智能体在代码侧生成对应组件库
批量转换用 Visual Struct API——每批 1000 张。
何时不用这套管线
- 简单按钮或图标。 直接粘截图给智能体有时反而更快。
- 设计已经原生在 Figma 里。 跳过 Codia，直接 MCP。
- 代码生成不要求设计保真。 "大致对"够用时，截图路径可能就够。
常见问题
Figma MCP server 要付费吗？
官方 Figma MCP server 是 Figma 平台的一部分，请查 Figma 的套餐。
智能体看到的是 Figma 文件本身还是只有 API？
MCP server 给智能体结构化数据（图层、命名、位置、Variables、组件）和可选的选区截图。
能用我自己的 Figma 文件（不是 Codia 出的）吗？
可以——MCP 适用于任何结构良好的 Figma 文件。Codia 是"只有截图、没有 Figma 源"时的桥梁。
转换后的 Figma 文件有点乱怎么办？
花 5 分钟整理：命名组件、应用 Variables、确认 Auto Layout。智能体输出质量随文件质量缩放。
配 Cursor 的 Auto / Claude / GPT 模型行吗？
行。MCP 与模型无关；server 给结构化数据，模型由编辑器决定。
与 Figma Make 怎么对比？
Figma Make 在 Figma 内从 prompt 生成 UI；Codia + MCP 管线在 Figma 外用你的 Figma 文件作为设计真理来源生成代码。不同工具，不同输出。