WorkBuddy + Figma：一键生成设计稿教程！

3 种方式，按需选择​

⭕️方式一：AI 生成 HTML 原型 → 导入 Figma（入门用）​

​

📟

这是从零开始最快的 AI 画原型方式——让 WorkBuddy 根据你的 PRD 生成 HTML，再一键导入 Figma。​

​

第一步：让 WorkBuddy 生成 HTML 原型​

​

✅

把你的 PRD 和 UI 设计规范丢给 WorkBuddy ，一句话搞定：​

​

"根据PRD和UI设计规范，把所有页面原型画在一个HTML文件里"​

​

WorkBuddy 会生成一个包含所有屏幕的 HTML 文件，每个屏幕是一个 390×844 的 iPhone 框架，并排排列。​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

第二步：导入 Figma（两种方式任选）​

HTML 生成后，有两种方式导入 Figma：​

​

✅

方式 A：用 MCP 自动推送（推荐）​

如果已经连通了 Figma MCP（配置方法见方式三），直接告诉 WorkBuddy ：​

​

"启动本地服务器，把这个 HTML 捕捉到我的 Figma 文件里"​

​

WorkBuddy 会自动启动服务器、打开浏览器、捕捉页面、推送到 Figma，全程自动化。​

​

​

​

​

​

47%

​

​

​

​

53%

​

​

​

✅

方式 B：用 Figma 插件手动导入​

启动本地服务器（WorkBuddy 会自动帮你启动）​

打开 Figma → 运行插件 html.to.design​

输入本地服务器地址​

点击 Import，所有屏幕变成可编辑的 Figma Frame​

​

​

一个 HTML 文件，5 个屏幕，一键全部导入 Figma。​

​

适合什么情况?​

​

✅

•

项目初期，从 PRD 快速出原型，不想在 Figma 里一个个拖组件​

•

想让 AI 理解你的设计规范后自动排版​

•

独立开发者没有设计师，需要 AI 辅助设计出图​

​

导入方式对比​

​

#fBEuGitDGeQN text { white-space: pre; }#fBEuGitDGeQN .fb0 { stroke: var(--N900-FG, 0.15); }#fBEuGitDGeQN .fb0 {stroke: rgba(31,35,41, 0.15)}#fBEuGitDGeQN .fx0 { stroke-miterlimit: 10; }#fBEuGitDGeQN .fx0 {stroke-miterlimit: 10}#fBEuGitDGeQN .fa1 { fill: rgb(187, 191, 196); }#fBEuGitDGeQN .fa1 {fill: rgb(187, 191, 196)}#fBEuGitDGeQN .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fBEuGitDGeQN .fx1 {font-style: normal}#fBEuGitDGeQN .fx2 { text-anchor: middle; }#fBEuGitDGeQN .fx2 {text-anchor: middle}#fBEuGitDGeQN .fx3 { dominant-baseline: central; }#fBEuGitDGeQN .fx3 {dominant-baseline: central}#fBEuGitDGeQN .fx4 { stroke: none; }#fBEuGitDGeQN .fx4 {stroke: none}#fBEuGitDGeQN .fc0 { fill: var(--text-caption); }#fBEuGitDGeQN .fc0 {fill: #646a73}#fBEuGitDGeQN .fa2 { fill: var(--text-link-disabled); }#fBEuGitDGeQN .fa2 {fill: rgb(187, 191, 196)}#fBEuGitDGeQN .fa3 { fill: rgb(225, 234, 255); }#fBEuGitDGeQN .fa3 {fill: rgb(225, 234, 255)}#fBEuGitDGeQN .fx5 { font: 700 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fBEuGitDGeQN .fx5 {font-style: normal}#fBEuGitDGeQN .fx6 { text-anchor: start; }#fBEuGitDGeQN .fx6 {text-anchor: start}#fBEuGitDGeQN .fx7 { dominant-baseline: alphabetic; }#fBEuGitDGeQN .fx7 {dominant-baseline: alphabetic}#fBEuGitDGeQN .fc1 { fill: rgb(51, 51, 51); }#fBEuGitDGeQN .fc1 {fill: rgb(51, 51, 51)}#fBEuGitDGeQN .fx8 { font: 400 16px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#fBEuGitDGeQN .fx8 {font-style: normal}#fBEuGitDGeQN .fc2 { fill: rgb(143, 172, 2); }#fBEuGitDGeQN .fc2 {fill: rgb(143, 172, 2)}#fBEuGitDGeQN .fb1 { fill: var(--N900-FG, 0.15); }#fBEuGitDGeQN .fb1 {fill: rgba(31,35,41, 0.15)}#fBEuGitDGeQN .fa4 { fill: var(--bg-body); }#fBEuGitDGeQN .fa4 {fill: #fff}ABC12345项目手动导入（html.to.design 插件）自动捕捉（MCP generate_figma_design）操作方式还原度是否付费适合场景在 Figma 里运行插件手动导入免费初次导入、追求精确Claude Code 通过 MCP 自动推送会有一定失真（不受配额限制）频繁迭代、追求速度高，基本无失真免费

​

​

建议： 初期用手动导入，追求还原度。等工作流跑顺了、再 MCP 自动捕捉。​

​

​

​

​

⭕️方式二：Figma Copy as code​

​

​

1.基础操作步骤​

第一步：在 Figma 里复制设计信息​

选中你改过的组件，右键：​

Copy/Paste as → Copy as code → CSS（或选 iOS/Android）​

Figma 会把该组件的样式属性（尺寸、圆角、颜色、字体等）导出为结构化的代码格式。​

第二步：粘贴给 WorkBuddy​

把复制的内容粘贴给 WorkBuddy，告诉它要更新哪个组件就行。WorkBuddy 会自动识别设计属性，把设计稿的改动同步到代码。​

​

​

​

​

33%

​

​

​

​

33%

​

​

​

​

33%

​

​

2.进阶用法：Copy link to selection​

如果已经配置了 Figma MCP（方式三），还可以用更快的方式：​

​

✅

选中组件 → 右键 → Copy/Paste as → Copy link to selection​

​

得到一个带 node-id 的链接。把这个链接粘贴给 Claude Code，AI 会自动通过 MCP 读取该节点的完整设计数据​

​

​

适合什么情况?​

​

✅

•

产品改了 Figma，开发需要同步到代码​

•

微调某个组件的样式​

•

不想折腾 MCP 配置，粘贴就能用​

​

​

​

⭕️方式三：Figma Server​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

📟

这是 Figma 官方年初发布的 AI 集成方案，支持设计和代码双向同步。​

​

1.两种 MCP Server 的区别​

2.MCP 配置教程（Remote Server）​

​

​

​

​

36%

​

​

​

​

64%

​

​

在 Claude Code 终端里运行一行命令就行，首次使用会弹出 Figma OAuth 授权页面，打开登录允许即可。整个过程不超过 1 分钟。​

​

✅

配置 Desktop Server​

​

打开 Figma 桌面端​

切换到 Dev Mode → Enable desktop MCP server​

在 Claude Code 终端添加本地 MCP 服务器地址​

​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

3.能做什么​

配置好 Figma MCP 后，Claude Code 获得 13 个工具，核心分两类：​

​

•

读取设计 — get_design_context（获取样式和布局）、get_screenshot（截图）、get_metadata（节点结构）等，帮你把 Figma 设计数据提取给 AI​

•

写入 Figma — generate_figma_design，把 HTML/代码界面推送回 Figma（不限次数）​

​

4.踩坑记录（重要）​

实测过程中遇到了 3 个坑，提前避开能省很多时间：​

坑 1：VSCode 扩展里 OAuth 可能不弹出​

Remote Server 在 VSCode Claude Code 扩展里可能无法完成 OAuth 认证流程。​

​

✅解决方案： 先在终端 claude 里完成认证，再回 VSCode 就正常了。​

​

坑 2：第三方 MCP 和官方 MCP 容易搞混​

npm 上的 figma-developer-mcp 是第三方包（Framelink 出品），只能读不能写，还需要手动配 API Token。Figma 官方的 Remote MCP 地址是 mcp.figma.com/mcp，用 OAuth 认证，功能完整——别装错了。​

坑 3：Plan 完全够用​

一开始以为 MCP 需要 Pro，实测发现 Free Plan 就能连通。generate_figma_design（推代码到 Figma）不受配额限制；读取类工具每月 6 次，日常够用。​

​

​

我的推荐工作流​

根据项目阶段选择不同的 AI 画原型方式：​

​

✅

初期：快速出原型​

​

PRD + UI 规范 → Claude Code 生成 HTML 原型 → html.to.design 插件导入 Figma​

​

​

​

✅

日常：设计改完同步代码​

​

​

✅

进阶：全自动双向同步（MCP 连通后，免费即可）​

​

设计改了 → MCP 自动读取 → 代码同步 → 代码改了 UI → 自动推回 Figma（不限次数）​

​

​

​

​

实用技巧：建立设计-代码映射表​

在项目里维护一份映射关系表，AI 看到就知道该改哪个文件：​

​

​

这样不管用哪种方式，告诉 Claude Code"改体重卡片"，它就能精准定位到对应的 Figma 设计和代码文件。​

​

​

总结​

2026 年，AI 辅助原型图绘制的链路已经完全跑通了：​

​

✅

•

三种方式： HTML 原型、Copy as code、Server 都不需要 Pro​

​

工具在进化，但思路比工具重要——先把 PRD 和设计规范写清楚，AI 才能帮你高效干活。​

​