文章目录
- 一、范式变化：从「导出像素」到「导出语义 + 上下文」
- 二、Figma 官方能力栈（自下而上）
- 1. Dev Mode（开发检视）
- 2. Variables / 设计 Token
- 3. Code Connect（质量分水岭）
- 4. Dev Mode MCP Server（2025 起的关键）
- 三、高质量生成的前置条件（设计侧）
- 四、工程侧：推荐 AI 工作流（Figma → 前端）
- 标准流水线
- 与「只丢截图给 GPT」的对比
- 五、双向与闭环（代码 ↔ 设计）
- 六、从「质量维度」看什么叫「高效且高质量」
- 七、团队落地建议（可执行清单）
- 八、边界与常见坑
- 九、和其他方案的横向对比
- 十、适用模型
- 适合「Figma MCP 工作流」的模型
- 适合「纯 UI 截图」的模型
- 实操建议
- 十一、总结
从「能力栈 → 设计侧准备 → 工程侧接入 → AI 工作流 → 质量与边界」梳理：AI 时代 Figma 如何更高效、更高质量地生成前端 UI 代码。参考了 Figma 官方 Dev Mode MCP、Code Connect 文档、以及 Cursor 内置 Figma MCP/Skills 的能力模型。
一、范式变化：从「导出像素」到「导出语义 + 上下文」
| 时代 | 典型做法 | 问题 |
|---|---|---|
| 传统 D2C | 切图 + 绝对定位 CSS / 一次性 HTML | 难维护、与设计系统脱节 |
| 插件时代 | Figma → React/Vue 插件 | 常生成「像设计」但不像开发者仓库的代码 |
| AI + MCP 时代 | 结构化设计上下文 + 截图 +真实的组件映射→ LLM 在 IDE 里改写 | 更接近「在现有项目里实现一屏」 |
核心转变：高质量不再等于「Figma 一键出完整项目」，而是把「设计意图 + 设计系统 + 代码库约定」一起喂给 AI，由 AI 在目标仓库里落地。
)
