让 Agent 还原 Figma 设计时，最常见的做法是丢一张截图。问题是截图只能给视觉结果，给不了布局层级、间距、字体、颜色 token、frame 结构和命名。模型看得到“长这样”，但很难知道“为什么这样”。
Framelink MCP for Figma 做的是把 Figma 文件、frame 或 group 的设计数据通过 MCP 交给 Cursor 等 AI 编码工具。它会在返回前简化 Figma API 数据，只给模型最相关的布局和样式信息。说白了，别再让 Agent 纯看图猜 CSS 了，给它设计结构。
准备一个只读 Figma Token
使用前要创建 Figma access token。建议专门为 AI 编码准备一个权限受控的 token，不要把个人长期 token 直接丢进所有工具配置里。能按项目隔离就按项目隔离，离职、外包、临时协作时也好撤回。
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}接好以后，不要先让 Agent 重写整站。选一个独立组件更稳：按钮组、价格卡片、登录框、侧边栏、空状态页面。把具体 frame 链接给它，再要求它说明拿到了哪些设计信息。
请读取这个 Figma frame。
先列出布局层级、颜色、字体、间距和响应式风险。
确认后再用现有组件库实现，不要新增无关依赖。设计还原要有验收口径
Figma MCP 能提升还原度，但不等于自动拥有设计判断。真实项目里，建议把验收拆成四层：结构是否一致，样式 token 是否接近，交互状态是否补齐，响应式是否能用。
结构：frame / group / component 层级是否被正确映射
样式：颜色、字号、圆角、阴影、间距是否接近设计系统
状态：hover、disabled、loading、error 是否有实现
响应式：宽度变化时是否保持布局意图如果团队已经有 Tailwind、shadcn/ui、Ant Design 或内部组件库，要明确告诉 Agent 优先复用。否则它很容易为了贴近设计稿，写一堆一次性 CSS，最后和项目风格打架。
它解决的是上下文，不是审美
Framelink MCP 适合“设计稿已经清楚、需要减少来回沟通”的场景。它不适合拿来替代设计评审，也不应该把所有 Figma 文件都开放给 Agent。设计文件里可能有未发布产品、客户信息、商业策略和实验稿。
更稳的流程是：设计师确认 frame 可交付，开发者给 Agent 读取权限，Agent 输出实现和差异说明，人再做最终视觉验收。这样 Figma MCP 才不是“截图增强版”，而是真正把设计上下文接进代码工作流。