跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSSAI大前端

Claude Code + Figma：AI 辅助设计原型工作流实战

综述由AI生成Claude Code 与 Figma 协作的三种 AI 画原型方式：HTML 原型导入、Copy as code 同步及 Figma MCP Server 双向同步。所有方式均免费，其中 MCP 写入功能不限次数。文章提供了具体操作步骤、配置教程及常见坑点记录，并推荐根据项目阶段选择合适的工作流。初期用 HTML 导入快速出原型，日常用 Copy as code 同步代码，进阶用 MCP 实现全自动双向同步。此外还建议建立设计 - 代码映射表以提高 AI 定位精度。

MongoKing发布于 2026/4/6更新于 2026/5/2451 浏览
Claude Code + Figma：AI 辅助设计原型工作流实战

Claude Code + Figma：AI 辅助设计原型工作流

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 插件手动导入

  1. 启动本地服务器（Claude Code 会自动帮你启动）
  2. 打开 Figma → 运行插件 html.to.design（Builder.io 出品，在 Figma 插件市场搜索安装）
  3. 输入本地服务器地址
  4. 点击 Import，所有屏幕变成可编辑的 Figma Frame

Claude Code + Figma AI 画原型完整教程：3 种协作方式总览

两种导入方式对比

手动导入（html.to.design 插件）自动捕捉（MCP generate_figma_design）
操作方式在 Figma 里运行插件手动导入Claude Code 通过 MCP 自动推送
还原度高，基本无失真会有一定失真
是否付费免费免费（不受配额限制）
适合场景初次导入、追求精确频繁迭代、追求速度

初期建议用手动导入，追求还原度。等工作流跑顺了、需要频繁迭代时，再考虑 MCP 自动捕捉。

适合项目初期从 PRD 快速出原型，不想在 Figma 里一个个拖组件；想让 AI 理解你的设计规范后自动排版；独立开发者没有设计师，需要 AI 辅助设计出图。

方式二：Figma Copy as code（日常最实用）

这是设计改完后同步到代码最顺手的方式，完全不需要配置任何 MCP，零门槛。

操作步骤

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

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

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

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

第二步：粘贴给 Claude Code

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

进阶用法：Copy link to selection

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

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

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

在这里插入图片描述

适合设计师改了 Figma，开发需要同步到代码；微调某个组件的样式；不想折腾 MCP 配置，粘贴就能用。

方式三：Figma MCP Server（全自动双向同步）

这是 Figma 官方发布的 AI 集成方案，支持设计和代码双向同步。配置好后，Claude Code 可以直接读取 Figma 设计数据，也可以把代码界面推回 Figma。

两种 MCP Server 的区别

Remote ServerDesktop Server
地址mcp.figma.com/mcp127.0.0.1:3845/mcp
认证OAuth 登录无需认证
要求所有 Plan（含免费）付费 Plan + 桌面端
能力读取 + 写入读取 + 写入（基于选中内容）

各 Plan 调用限额

Plan限额说明
Starter（免费）每月 6 次generate_figma_design 不占配额
Pro每天 200 次10 次/分钟
Organization每天 200 次15 次/分钟
Enterprise每天 600 次20 次/分钟

重点：generate_figma_design（把代码推送到 Figma）不受配额限制，免费用户也能无限次使用。每月 6 次的限制主要影响读取类工具（如 get_design_context），日常够用了。

Figma MCP 各 Plan 调用限额对比：写入 Figma 永远免费不限次数

MCP 配置教程

配置 Remote Server（推荐先试这个）

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

配置 Desktop Server

  1. 打开 Figma 桌面端
  2. 切换到 Dev Mode → Enable desktop MCP server
  3. 在 Claude Code 终端添加本地 MCP 服务器地址

连通后能做什么

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

  • 读取设计 — get_design_context（获取样式和布局）、get_screenshot（截图）、get_metadata（节点结构）等，帮你把 Figma 设计数据提取给 AI
  • 写入 Figma — generate_figma_design，把 HTML/代码界面推送回 Figma（不限次数）

用起来很简单——把 Figma 设计链接丢给 Claude Code，它会通过 MCP 自动读取设计数据，然后帮你实现对应的代码。反过来，代码改了 UI 之后，也可以让 Claude Code 自动捕捉界面推回 Figma。

常见问题

实测过程中遇到了 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

5 分钟出完所有页面，比手动画快 10 倍。

日常：设计改完同步代码

Figma 改设计 → Copy as code → 粘贴给 Claude Code → 自动同步

设计稿转代码最顺滑的方式，零配置。

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

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

真正实现设计和代码的双向同步，免费 Plan 就能用。

推荐工作流：按项目阶段选方式，从初期出原型到日常迭代到全自动同步

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

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

UI 组件Figma 帧代码文件
体重卡片Home/WeightCardWeightCard.swift
睡眠条Home/SleepBarSleepCard.swift
AI 聊天气泡AI/ChatBubbleChatBubble.swift

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

对于独立开发者来说，这张表就是你的设计系统文档，维护成本极低但效果很好。

总结

AI 辅助设计的链路已经完全跑通：

  • 三种方式都免费：HTML 原型、Copy as code、MCP Server 都不需要 Pro
  • MCP 免费版限制很少：generate_figma_design 不限次数，读取类工具每月 6 次，日常够用
  • 核心思路：让 AI 理解你的设计规范，而不是一个个像素去抠

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

最后说说 Figma 和 Pencil MCP 的选择

实测完整个流程后，个人的感受是：Figma 这条线更适合有团队协作需求的场景。

Figma 本身的设计组件生态非常成熟，设计师和开发者之间有现成的协作规范（Dev Mode、设计系统、组件库）。如果你的项目有专门的设计师，或者需要多人在同一份设计稿上协作，Figma MCP 能把这条链路打通得很顺滑——设计师在 Figma 改完，开发通过 MCP 自动同步，不需要反复截图对照。

但如果你是独立开发者、一个人搞定设计和代码，Pencil MCP 这类更轻量的方案可能效率更高，不需要绕一圈 Figma。

选哪条线取决于你的团队结构，不是工具本身的好坏。

目录

  1. Claude Code + Figma：AI 辅助设计原型工作流
  2. 方式一：AI 生成 HTML 原型 → 导入 Figma
  3. 操作步骤
  4. 两种导入方式对比
  5. 方式二：Figma Copy as code（日常最实用）
  6. 操作步骤
  7. 进阶用法：Copy link to selection
  8. 方式三：Figma MCP Server（全自动双向同步）
  9. 两种 MCP Server 的区别
  10. 各 Plan 调用限额
  11. MCP 配置教程
  12. 连通后能做什么
  13. 常见问题
  14. 推荐工作流
  15. 初期：快速出原型
  16. 日常：设计改完同步代码
  17. 进阶：全自动双向同步（MCP 连通后，免费即可）
  18. 实用技巧：建立设计 - 代码映射表
  19. 总结
  20. 最后说说 Figma 和 Pencil MCP 的选择
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • Transformers 库模型推理与微调实战教程
  • C++ 基础教程：从 For 循环到算法初步
  • ChatGPT 记忆功能揭秘：使用与管理指南
  • Android Termux 安装 llama.cpp 并启动 WebUI
  • VSCode Copilot 接入智谱 GLM-5.1 实现自定义大模型配置
  • 详解高速 ADC 的串行 LVDS 数据捕获与接口设计
  • Tomcat 集群部署实战：负载均衡与会话共享
  • 飞算 JavaAI 工具实战：从需求分析到代码生成全流程体验
  • VSCode GitHub Copilot 智能补全失效修复指南
  • B-树原理及 Java 模拟实现
  • Linux 进程间通信进阶：管道与共享内存详解
  • 大语言模型提示工程与高效交互指南
  • 基于 Rokid CXR-M SDK 的 AR 演讲提词器开发
  • HID Remapper 实现手柄到鼠标的精准转换
  • Java 中基于属性的访问控制（ABAC）：动态上下文感知权限管理
  • 深入理解 HTML img 标签：性能、安全与无障碍最佳实践
  • Groovy 与 Java 语言特性差异详解
  • 深度学习：激活函数大全
  • 利用 Figma 插件将 AI 生成的 HTML 原型导入 Axure
  • 主流 AI 编程助手对比：Claude、Cursor、Aider 与 Copilot 选型

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online

  • 随机西班牙地址生成器

    随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。 在线工具，随机西班牙地址生成器在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online