Claude Code 配 Figma MCP 还原设计稿：插件或一条命令安装，复制图层链接，小块小块地让它出代码

本文根据 Figma 官方开发者文档《Figma MCP Server》系列页面和 Claude Code 官方《Connect Claude Code to tools via MCP》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 或 Figma 官方网站。

适用于谁

• 手里有 Figma 设计稿，想让 Claude Code 写出对应前端页面的人；
• 前端开发者，想减少「看着设计稿一个个量尺寸」的重复劳动；
• 连上了 Figma 但生成的代码总是不对、或者提示被限流的人。

结论先说

1. 官方推荐用远程服务器，地址是 https://mcp.figma.com/mcp，不需要装 Figma 桌面应用，第一次连接时用你的 Figma 账号登录授权。
2. Claude Code 有两种装法：官方首推安装 Figma 插件（claude plugin install figma@claude-plugins-official），它同时带上服务器设置和 Figma 的技能；装不了插件就手动执行 claude mcp add --transport http figma https://mcp.figma.com/mcp。
3. 取设计稿靠链接：在 Figma 里右键图层或画框，选 Copy link to selection，把链接贴给 Claude。官方说 Claude 不会真的打开这个链接，而是从中取出服务器需要的节点编号。
4. 一次只选小块。 官方明确建议：生成卡片、页头、侧边栏这样的小部分，别选很大的整屏画框，否则可能变慢、出错或返回不完整的结果。
5. 有调用次数限制，不同座位和套餐不一样，官方还写明 Figma 可能随时改。

图：本站根据 Figma 官方 MCP 文档 整理的示意图

第一步：安装

方式一：安装插件（官方首推）。 官方说插件包含 MCP 服务器设置，也包含 Figma 的技能，对常见流程更可靠。在终端执行：

bash
claude plugin install figma@claude-plugins-official

官方提醒：如果命令失败，可能是你的组织屏蔽了插件安装，可以联系管理员，或改用手动添加。装好后如果 Claude Code 正在运行，需要重启，然后在 Claude Code 里输入 /plugin 打开插件管理器，切到 Installed 标签，选中 figma 服务器按回车开始登录，浏览器里点 Allow access。回到 Claude Code 再看 /plugin，显示已连接就可以了。

方式二：手动添加。 官方原话是：如果你不能装插件，可以自己添加远程服务器，这样不会装上 Figma 的技能。

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

默认只加到当前项目；想所有项目都可用，加 --scope user。然后开新会话，输入 /mcp，选 figma，选 Authenticate，浏览器里点 Allow access，看到 Authentication successful. Connected to figma 即成功。MCP 的基础概念见 /guides/claude-code-mcp-setup。

官方另有一个「桌面服务器」方案，经 Figma 桌面应用运行，官方说它面向特定的组织和企业需求，大多数人用远程服务器即可。

第二步：复制链接，而不是在 Claude 里点选

官方说，读取设计的方式是基于链接：在 Figma Design 里右键你要的画框或图层，选 Copy link to selection，贴到 Claude Code，让它实现。注意官方的一条说明：「提示词里用当前选中内容」只在桌面服务器上有效；远程服务器必须在提示词里附上画框或图层的链接。

默认情况下，官方说取设计上下文的主要工具 get_design_context 会输出 React 加 Tailwind 的代码，但你可以在提示词里要求别的框架，例如官方示例里的「用 Vue 生成」「用纯 HTML 和 CSS 生成」，也可以要求使用你项目里已有的组件目录。

提示词 1：用项目已有组件还原一个小模块

text
请实现这个 Figma 设计：【粘贴图层链接】
要求：
1）用我们项目的技术栈【React + Tailwind / Vue / 纯 HTML 和 CSS】；
2）优先使用 src/components/ui 里已有的组件，没有合适的再新建，不要引入新的依赖；
3）颜色、字号、间距用项目现有的变量或 Tailwind 配置，不要写死数值；
4）先在计划模式给我方案：要新建的文件、复用的组件、不确定的地方。我批准后再写代码。

第三步：大设计稿怎么办

官方「Avoid selecting large, heavy frames」一页的建议是：给较小的部分（卡片、页头、侧栏）生成代码；觉得卡住了就少选一点再试；真的要处理大设计稿，让 Claude 先用 get_metadata 拿到一份轻量的结构提纲，再只对需要的部分取详细上下文。官方的工具说明里，get_metadata 返回的是图层编号、名称、类型、位置、大小的简要 XML，适合特别大的设计。

提示词 2：大页面分块还原

text
这是一个完整页面的设计：【粘贴页面画框链接】。它很大，请不要一次生成。
请先获取页面的结构提纲，告诉我它由哪些区块组成，按「页头、主要内容、侧栏、页脚」之类切分，并给出每个区块对应的图层名称。
等我确认切分方式后，再逐个区块获取细节并实现，每完成一个区块先停下来让我看。

图：本站根据官方文档整理的示意图

第四步：核对还原结果

还原出来「像不像」要靠对照。官方没有给还原度的保证。本站的做法是：用浏览器打开生成的页面，对着设计稿看。Claude Code 官方的 Chrome 集成文档里就把「用 Figma 设计稿做界面，再在浏览器里打开验证是否匹配」列为一个用法，设置方法见 /guides/claude-in-chrome，浏览器自动化也可以见 /guides/claude-code-playwright-mcp-browser-testing。

提示词 3：对照检查

text
请对比刚实现的页面和 Figma 设计【粘贴链接】，逐项检查：布局、间距、字号、颜色、圆角、图片资源、悬停和按下状态。
把不一致的地方列成表：位置、设计稿里是什么、代码里是什么、修改建议。
只列差异，先不要修改，等我确认哪些要改。

次数限制和费用

官方「Rate limits & access」页的说法：使用频率取决于你的套餐和座位类型，每分钟的限制是在每天或每月限制之外叠加的。官方当天的表格里，Starter 套餐以及 View、Collab 座位，每月最多 20 次；Professional、Education、Organization 套餐的 Full 或 Dev 座位，每天最多 200 次、每分钟 10 到 15 次；Enterprise 的 Full 或 Dev 座位每天最多 600 次、每分钟 20 次。官方写明 Figma 可能随时修改，请以官方页面为准。限制只针对读取 Figma 数据的工具，写入类工具中有一部分不计入。

如果收到「没有权限」的错误，官方建议检查三件事：链接是不是 Figma Design、FigJam 或 Make 文件的链接；你登录的是不是对的账号（可以让 Claude 调用 whoami，它会显示邮箱、套餐和座位）；这个账号是否属于拥有该文件的套餐。

常见问题

Q：为什么总是返回 React 代码？

默认输出就是 React 加 Tailwind，要别的框架得在提示词里明说，官方有专门一页讲这个问题。

Q：能把代码反过来画进 Figma 吗？

官方介绍里有「写入画布」功能，要求使用远程服务器，写到草稿之外需要 Full 座位，官方说目前是 beta、将来会变成按用量收费。本文没有展开，请以官方为准。

订阅和额度

读设计稿再生成代码，会占用不少上下文，分块做更稳。Claude Code 订阅选择见 /chongzhi/claude-code，价格和额度以官方页面当前显示为准；Figma 的座位和套餐以 Figma 官方为准。

相关教程

• /guides/claude-code-mcp-setup：MCP 怎么配
• /guides/claude-code-build-frontend-project-react-vue：从零搭前端项目
• /guides/claude-code-plugins-marketplace：插件与市场

参考资料

• Figma 开发者文档：Figma MCP Server — https://developers.figma.com/docs/figma-mcp-server/
• Figma 开发者文档：Set up the remote server — https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
• Figma 开发者文档：Tools and prompts — https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
• Figma 开发者文档：Rate limits & access — https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
• Claude Code 文档：Connect Claude Code to tools via MCP — https://code.claude.com/docs/en/mcp