之前一直用 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 插件市场搜索安装）
- 输入本地服务器地址
- 点击 Import，所有屏幕变成可编辑的 Figma Frame
两种导入方式对比
| 手动导入（html.to.design 插件） | 自动捕捉（MCP generate_figma_design） |
|---|
