Figma MCP 设计智能体

设计稿与代码为什么总对不齐

前端按 Figma 手写样式时，颜色、间距、字体往往靠肉眼量；设计一改，代码和设计 token 容易脱节。若希望 AI 直接读懂画板而不是截图猜样式，需要一条稳定链路：从选中节点拿到结构与样式，再落到项目里的设计变量和组件，而不是另一套硬编码。

技能如何协作

本技能把角色定位为「设计工程化」桥梁：通过 MCP 把智能体接到 Figma，典型流程分三步：

1. 读取：经 MCP 拉取当前选中节点的层级与样式（填充、描边、排版等）。
2. 映射：把 Figma 中的 token 对应到代码侧变量（颜色、间距、字体族与字号阶梯）。
3. 生成：输出组件代码，并标注对应设计节点，便于设计走查时回查。

落地时强调：设计稿先组件化、命名统一；生成物接现有设计系统，用变量而非散落数值。

适用边界与注意点

• 设计稿混乱时，智能体只能读到散节点，还原质量会明显下降。
• 硬编码像素值会与设计系统长期脱节，需坚持 token 映射。
• AI 输出不替代前端评审；最终还原度以设计与官方规范为准，仍建议人工比对关键界面。

本技能为工程协作参考，不保证像素级自动验收。