用Vibe coding一天做出一个App的故事，现在已经很普遍了。但看实际结果 — 功能是跑起来了，但UI有种"AI做的感觉"。那种千篇一律的感觉。让设计师看到只会叹气的差距。
问题很简单。AI写代码很厉害，但让它"按照这个设计精确实现"，能对上80%，剩下20%就崩了。间距不对，颜色微妙地不一样，布局歪了。为了修这些问题"这里再宽一点""不是那里是这里"地来回沟通，AI省下的时间全花在调设计上了。
但有人解决了这个问题。背景像素匹配率99.8%的案例都出来了。核心是三件武器的组合。
这是什么？
将Figma设计传给AI编码智能体有三种主要方式：
- 直接展示截图 — AI视觉解释。最常见但不精确。
- 使用Figma官方MCP — 通过Figma API将设计数据转换成代码（React/Tailwind）传递。
- 使用Framelink MCP — 通过Figma API将设计数据转换成描述性JSON传递。
这里2和3的区别至关重要。
Figma官方MCP读取设计节点后直接生成React + Tailwind代码。问题在于这些代码充斥着leading-[22.126px]这样的任意值。AI就直接复制了 — 完全忽略你项目的模式。
Framelink MCP的方式不同。它以"这个元素有1px边框和16px内边距，使用UI/Button - Large样式"这样描述性的数据发送。AI读取这个规格，按照项目的现有组件和设计系统来写代码。
有什么不同？
| 项目 | Figma官方MCP | Framelink MCP |
|---|---|---|
| 输出格式 | React/Tailwind代码（处方式） | 描述性JSON（说明式） |
| 数据大小 | 更大、更冗余 | 约小25% |
| 样式名称 | 丢失 | 保留（如UI/Button - Large） |
| 嵌套组件 | 平铺化（引发结构误解） | 精确表达 |
| 去重 | 仅组件 | 样式+自动检测重复 |
| AI行为 | 复制代码（含任意值） | 解读规格后按项目实现 |
Framelink是Graham Lipsman创建的开源项目，在GitHub获得了13000+个星。 支持Cursor、Claude Code、Windsurf、VS Code等几乎所有支持MCP的编辑器。
但光有Framelink还不够。精确传递设计令牌只是解决了一半。另一半是验证AI用这些令牌做出的结果是否真的与设计一致。
| 项目 | 以前：手动反馈循环 | 变化：自动像素diff循环 |
|---|---|---|
| 流程 | 传递设计 → AI实现 → 人眼对比 → 请求修改 | 传递设计 → AI实现 → 自动截图 → diff热力图 → AI自动修正 |
| 每轮反馈 | 5~10分钟 | 1~2分钟 |
| 迭代次数 | 10次以上（手动） | 8次以内（自动） |
| 精度 | 人眼 = 大概 | 像素级 = 精准 |
布局和颜色完美匹配，只剩下文字渲染差异 — 这才是现实意义上"像素级还原"的上限。
核心总结：如何开始
- 接入Framelink MCP
在Claude Code（或Cursor等）中添加Framelink MCP服务器。需要Figma个人访问令牌，配置只需一行：claude mcp add framelink-figma -- npx -y figma-developer-mcp --figma-api-key="令牌" - 分区块传递
不要一次传整个页面。按Header、Hero区块、卡片网格等分区块传递Figma框架链接。在Figma中选择对应框架，Cmd+L（复制链接）即可。 - 初期实现 → 截图
AI完成首次实现后，用Playwright或浏览器MCP以相同分辨率（如1440x900）截图。从Figma也将同一框架导出为PNG。 - 用像素diff热力图自动修正
用PIL（Python）或Pixelmatch（Node.js）生成两张截图的像素diff热力图。让AI"修改直到热力图红色区域消失"，它就会自动循环修正。 每个组件推荐最多迭代8次。 - Computed Style验证（可选）
仅靠视觉diff可能捕捉不到某些bug。用Playwright MCP测量实际computed CSS值，可以找到"看起来对但行为不同"的bug。
没有Figma设计，想复刻网站
AI Website Cloner（GitHub 8900+星）只需输入一个URL，AI智能体就会分析网站并用React+Tailwind复刻，内置截图→令牌提取→并行构建→视觉diff QA流水线。
