Claude Code 转 Figma：把运行中的界面变成可编辑设计稿

Claude Code 转 Figma 能捕获哪些内容？

Claude Code 转 Figma 捕获的是浏览器中正在运行的界面，既可以来自生产环境、预发布环境，也可以来自 localhost，也就是你本机上的开发服务器。一次会话可以捕获多个页面，放到画布上对照查看。每个页面都会变成可编辑的画框，供你重新排列、复制、修改和添加标注。Figma 的公告介绍了这些环境和多页面流程的支持情况。

可以把它理解为将正在运行的应用展开，放到编辑台上：浏览器呈现用户一步步操作时的体验，Figma 则让团队有空间把这些步骤放在一起审视。

MCP 是 Model Context Protocol（模型上下文协议）的缩写，Claude Code 通过它调用 Figma 的工具。负责捕获的工具名为 generate_figma_design，可以将图层发送到新的 Figma Design 文件、已有的 Design 文件或剪贴板。通过捕获新建的文件会进入团队或组织的草稿区；输出到剪贴板的内容则可以粘贴到画布上。Figma 工具参考文档解释了这些输出位置。

如何连接 Claude Code 与 Figma？配置一次即可复用

这套工作流需要使用远程服务器。连接地址为 https://mcp.figma.com/mcp，无需运行 Figma 桌面应用。Figma 提供了推荐的插件安装方式和手动配置方式，任选其一即可。远程服务器配置文档。

推荐方式：安装 Figma 的 Claude Code 插件

已安装 Claude Code 的情况下，在终端运行：

claude plugin install figma@claude-plugins-official

然后按 Figma 文档中的流程完成授权：

1. 如果 Claude Code 正在运行，先重启。
2. 输入 /plugin，打开 Installed（已安装），选择 figma 并开始授权。
3. 转到浏览器，在你的 Figma 账号下选择 Allow access（允许访问）。
4. 返回 /plugin，确认 Installed（已安装） 中的 Figma 显示为已连接。

插件包含 MCP 配置和 skills，也就是可复用的操作指引，用于常见的 Figma 工作流。如果组织限制了插件安装，Figma 建议联系你的 Claude 管理员。Figma 的 Claude Code 配置指南。

手动方式：让所有项目都能使用这条连接

如果希望手动配置，并在不同项目中复用连接，Figma 文档给出的完整命令是：

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

新建一个 Claude Code 会话，输入 /mcp，选择 figma，点击 Authenticate（身份验证），再选择 Allow Access（允许访问）。随后用 /mcp 检查连接状态。

--scope user 参数让连接在你的各个项目中都可用。Figma 文档也列出了 claude mcp add --transport http figma https://mcp.figma.com/mcp，这条命令默认只对当前项目生效。手动配置与作用域说明。

需要哪种 Figma 套餐和席位？

连接服务器、写入画框、读取设计，三者的要求并不相同。以下是截至 2026 年 10 月 12 日核对的 Figma 官方规则：

来源：MCP 可用范围、捕获权限及读取限制。

Starter 用户以及 View 或 Collab 席位每月最多可进行 20 次读取工具调用。一次工具调用就是一次独立请求，因此这份额度不等于能完成 20 次从代码到设计再回到代码的完整往返。捕获工具 generate_figma_design 不受标准 MCP 速率限制。读取额度说明和捕获工具的豁免说明。

想进一步了解产品和购买决策，可以阅读我们的 Figma 评测。

实例：让三个新手引导页面完成设计与代码的往返

假设你的应用已经可以运行，包含三个新手引导页面：欢迎、邀请团队成员和首个项目。下面用这个示例，走一遍捕获、设计评审和代码实现的完整流程。

把整个流程捕获到同一个文件中

在 Claude Code 中打开项目，提供应用地址和目标文件。例如：

如果需要新文件，就改为要求 Claude 创建一个。应用尚未运行时，可以让它先启动本地服务器。捕获流程会由客户端准备所需脚本并打开浏览器，窗口打开时会进行首次捕获。Figma 捕获操作说明。

确认欢迎页面已捕获后，继续在应用中操作。进入邀请团队成员和首个项目页面时，使用捕获工具栏中的 Entire screen（整个屏幕）。如果只需要页面的一部分，可以使用 Select element（选择元素）。完成后点击 Open file（打开文件）。工具栏与完成步骤。

我建议第一次捕获时始终保持相同的视口尺寸，并记录每次捕获的页面状态。同一个页面显示校验错误和输入有效时，应该分别命名。

在 Figma 中调整整个用户流程

把原始捕获结果排成一行，再复制一行用于提出修改方案。给画框起清晰的名称，然后逐页明确要改什么：

这些修改都是有待验证的设计假设。尤其要注意，在画面上增加“跳过”选项，并不等于已经实现了背后的权限和路由逻辑。把决定写在确认后的画框旁，同时纳入开发说明。

在把捕获结果当作设计系统资产使用前，先检查图层。Figma 表示，捕获内容以普通图层导入，不会自动映射到组件库中的组件或样式。不过，它可以绑定文件或已添加组件库中的兼容变量，也就是颜色、间距等可复用的值。添加已发布的组件库需要付费套餐。捕获结果与变量的处理方式。

把确认后的画框交回 Claude Code

逐个右键点击确认后的画框，选择 Copy link to selection（复制所选内容的链接），再把链接连同实现要求一起粘贴到 Claude Code。这是 Figma 文档介绍的远程工作方式。画框链接的用法。

针对这个示例，一份实用的开发说明可以这样写：

Figma 的 get_design_context 工具会向智能体提供设计信息。你可以在提示词中指定所用框架，以及现有组件所在的目录。使用远程服务器时，需要提供画框或图层链接；仅在画布上选中内容，并不会向远程服务器传入相应上下文。设计转代码工具说明。

最后，运行更新后的应用，再走一遍相同流程。先对照布局和文案，再检查跳过逻辑、输入校验和键盘导航。如果还需要设计评审，就再次捕获修改后的页面。这一步验证由你的团队负责：Figma 提供上下文，编码智能体负责生成实现。MCP 与智能体各自负责什么。

五种值得尝试的使用场景

优先从这样的场景入手：界面已经存在，而多人需要共同作出决定。下面这些用途按减少重复工作的直接程度排序，供你尝试。

如果团队正在把可复用的设计指引整理成规范，可以阅读我们的 Figma Make 自定义 skills 设计系统资源包；它面向的是另一套独立的 Figma Make 工作流。

值不值得用？先算清重画页面的成本

应重点核算设计准备和反复开发的成本。如果团队目前需要先重建已经实现的页面，才能开展评审，就把这部分投入与捕获、整理所需的工作量作比较：

每次评审的净收益 =（原有准备与返工工时 − 新流程的捕获、整理与返工工时）× 内部小时成本 − 新增工具费用。

使用团队实际记录的时间，并计入这套工作流带来的任何额外实现评审。对于已经使用 Claude Code 且具备所需 Figma 席位的团队，现有订阅费用应同时计入比较两侧；只有新增支出才会改变结果。Figma 的席位使用资格和文件权限是两回事，Professional 订阅费用则取决于席位数量与计费周期。Figma 计费说明。

我的判断标准是：如果团队能以更少的设计与工程总投入，完成一项经确认的修改，就保留这套流程。导入更快、后续却需要大量整理，并不算理想结果。

两个可以围绕这套流程开发的产品

值得探索的机会，是围绕原生连接，把评审过程做成可交付的产品或服务。以下都是产品假设。DataForSEO 的美国英语市场估算数据核对于 2026 年 10 月 12 日，衡量的是月搜索量，不是付费客户数。

最值得优先验证：新手引导评审工具包

产品团队或小型服务机构，可能愿意付费购买一套可重复使用的方法，把正在运行的新手引导流程转化为有条理的评审和开发说明。相关需求信号包括：“claude code to figma”每月 590 次搜索，以及 “website to figma”每月 260 次搜索。这两类搜索人群可能重叠。

最小版本可以包含项目专用的捕获检查清单、Figma 评审模板、画框命名规范，以及将确认后的画框链接与行为决策配套使用的可复用提示词。先以辅导式服务起步，便于观察团队究竟在哪些环节需要帮助。

这个机会最值得优先考虑，是因为交付内容包含了针对客户自身流程作出的决策。但要看到限制：Figma 已经提供捕获能力，单纯给导入功能套一层包装，价值有限。客户是否愿意为评审工具包付费，仍需验证。

开发说明检查工具

如果团队经常把 Figma 修改交给 Claude Code 实现，可以考虑做一个小型检查工具，在开发开始前，找出缺失的画框链接、含糊的跳转目标，以及未提供的组件使用指引。“Figma to code”的估算月搜索量为 720 次，它只能说明相关工作的广泛需求，不能证明这类检查工具已有市场需求。

最小版本可以读取包含已确认链接、组件路径和验收标准的结构化开发说明，再列出尚未解决的问题。难点在于语义判断：工具能指出说明中缺少跳过规则，却无法决定是否应该允许用户跳过。这仍然需要产品负责人作出决定。

设计与代码往返，仍有哪些问题解决不了？

应把它看作一轮需要主动推进的捕获、编辑和实现过程。Figma 将 MCP 定位为结构化设计上下文的来源和代码生成的起点；智能体仍需要了解项目约定，并获得清晰的指令。它不保证交付可直接使用的完整代码，也不会自动修复实现中的问题。Figma 对能力边界的解释。

捕获质量也会因页面而异。Figma 列出的潜在难点包括大量 JavaScript 动画、canvas 渲染，以及虚拟化列表——这类列表一次只渲染长列表中的一部分。如果整页捕获效果不佳，可以尝试只捕获具体元素。经过混淆的 CSS 变量名也可能导致变量匹配失败；从开发服务器捕获，可能保留下可读的变量名。已知捕获限制。

如果只是修正一处简单文案，不涉及设计决策，我会跳过这轮往返。如果把完整流程放在一起比较，很可能改变团队最终实现的内容，我才会使用它。若 Figma 共享画布本身就不适合你的团队，我们的 Figma 替代工具对比讨论了更广泛的选择。

下周一就可以这样开始：选一条包含三个页面的新手引导流程，捕获页面，就一项改进达成一致，再把这个决定落实到应用中。先完整走通这一轮，再把流程扩展到产品的其他部分。

如果希望围绕团队自己的产品搭建这套评审流程，我们可以帮你实现自动化。