Claude Code + Figma：AI 辅助设计工作流实战
之前一直用 Pencil MCP 画原型，效果不错。最近看到社区讨论 Claude Code + Figma MCP 的出图效果也很好，作为 AI 辅助设计的另一条路线，想实测对比一下。
刚好手头有个体脂秤 App（BodyMate）要改版，就拿这个真实项目当测试场景——用 Claude Code 把 PRD 直接变成 Figma 原型，看看这条线的体验到底怎么样。
折腾了一圈，踩完所有坑，终于摸清了近期 Claude Code + Figma 的正确工作流。
结论先行：3 种方式，按需选择
Figma 和 Claude Code 之间有 3 种协作方式，适合不同阶段：
| 方式 | 适合场景 | 是否付费 | 难度 |
|---|---|---|---|
| HTML 原型 + Figma 插件导入 | 从零画原型 | 免费 | 简单 |
| Copy as code → 粘贴给 AI | 设计改了同步代码 | 免费 | 最简单 |
| Figma MCP Server | 全自动双向同步 | 免费可用（有调用限额） | 中等 |
好消息是，三种方式都不需要付费。MCP Server 免费 Plan 就能连通，generate_figma_design（推代码到 Figma）甚至不限次数。
下面逐个展开，每种都给操作步骤。
方式一：AI 生成 HTML 原型 → 导入 Figma
这是从零开始最快的 AI 画原型方式——让 Claude Code 根据你的 PRD 生成 HTML，再一键导入 Figma，整个过程不需要手动画任何组件。
操作步骤
第一步：让 Claude Code 生成 HTML 原型
把你的 PRD 和 UI 设计规范丢给 Claude Code，一句话搞定：
'根据 PRD 和 UI 设计规范，帮我把所有页面的原型画在一个 HTML 文件里'
Claude 会生成一个包含所有屏幕的 HTML 文件，每个屏幕是一个 390×844 的 iPhone 框架，并排排列。
第二步：导入 Figma
HTML 生成后，有两种方式导入 Figma：
方式 A：用 MCP 自动推送（推荐）
如果已经连通了 Figma MCP（配置方法见方式三），直接告诉 Claude Code：
'启动本地服务器，把这个 HTML 捕捉到我的 Figma 文件里'
Claude Code 会自动启动服务器、打开浏览器、捕捉页面、推送到 Figma，全程自动化。
方式 B：用 Figma 插件手动导入
- 启动本地服务器（Claude Code 会自动帮你启动）
- 打开 Figma → 运行插件 html.to.design（Builder.io 出品，在 Figma 插件市场搜索安装）
