之前我一直用 Pencil MCP 来画原型，效果还不错。最近在社区看到有人说 Claude Code + Figma MCP 的出图效果也挺好，作为 AI 辅助设计的另一条路线，就想来实测对比一下。
刚好手头有个体脂秤 App（BodyMate）要改版，正好拿这个真实项目当测试场景——用 Claude Code 把 PRD 直接变成 Figma 原型，看看 Figma 这条线的 AI 画原型体验到底怎么样。
经过实测，梳理出当前 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 插件市场搜索安装）
- 输入本地服务器地址
