从设计到代码再到设计：Claude Code + Figma 双向工作流实战

发表于 更新于 分类于 阅读次数： 本文字数： 4k 阅读时长 ≈ 4 分钟

cover

上个月我们团队的设计师发了一条消息：”这个按钮的圆角是 8px 还是 12px？”

我打开代码看了一眼，写的是 rounded-lg，对应 Tailwind 的 8px。但设计稿里明明是 12px。

这种误差是怎么来的？我当时对着设计稿手写 CSS，眼睛估了一下，估错了。来回确认了三轮，加上等待时间，半天没了。

这个问题，现在有了一个直接的解法——Claude Code + Figma MCP。让 AI 直接读取 Figma 的设计参数，颜色值、间距、字体大小，精确获取，不靠眼睛估。不仅如此，你还能把写好的代码”推回” Figma，让设计师在画布上继续优化。

今天这篇文章，我带你从零开始搭建这套流程。

先搞清楚一件事：什么是 Figma MCP？

MCP，全称 Model Context Protocol（模型上下文协议），是一个开放标准。你可以把它理解成一个”万能适配器”，让 AI 工具能够连接各种外部数据源。

Figma MCP Server 就是这个适配器在 Figma 上的具体实现。它把你 Figma 文件里的组件、变量、布局信息，用 AI 能理解的方式暴露出来。

没有 MCP 的时候，你跟 Claude 说：”帮我写一个蓝色的圆角按钮，带阴影。”你得靠文字描述，Claude 靠猜。

有了 MCP 之后，Claude 直接”看到”你的设计稿。颜色值、间距、字体大小，全都精准获取。

这是质的飞跃。

环境准备

在开始之前，你需要准备以下工具：

  • Claude Code：Anthropic 的命令行 AI 编程工具
  • Figma 账号：需要 Dev 或 Full 席位（免费账号功能受限）
  • Node.js 环境：用于安装 Claude Code

如果你还没安装 Claude Code，终端运行一行命令：

1
npm install -g @anthropic-ai/claude-code

准备好了，我们开始连接。

方法一：远程 MCP Server（推荐）

这是目前 Figma 官方推荐的方式，不需要安装桌面端，直接连接 Figma 的云端服务。

第一步：添加 Figma MCP

打开终端，运行：

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

如果你希望所有项目都能用这个连接，加上 --scope user：

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

第二步：认证登录

启动 Claude Code，输入 /mcp，选择 figma，然后选 Authenticate。

浏览器会弹出 Figma 的授权页面，点击 Allow Access。

回到终端，你会看到：

1
Authentication successful. Connected to figma

搞定。就这么简单。

更省事的方式：一键安装插件

Figma 还提供了 Claude Code 插件，包含了 MCP 配置和常用工作流技能，一条命令搞定：

1
claude plugin install figma@claude-plugins-official

这个插件会自动配置好 MCP 连接，还附带了一些 Agent Skills，比如实现设计、连接组件等常用操作的最佳实践提示词。

方法二：本地 MCP Server

如果你更喜欢本地运行，或者网络环境不太好，可以用 Figma 桌面端自带的本地 MCP。

第一步：开启 Figma 本地 MCP

  1. 打开 Figma 桌面端，确保是最新版本
  2. 点击左上角 Figma 菜单
  3. 进入 Preferences，勾选 Enable Dev Mode MCP Server
  4. 记下本地地址：http://127.0.0.1:3845/sse

第二步：连接 Claude Code

1
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

验证连接：

1
claude mcp list

看到 figma-dev-mode-mcp-server 就说明连上了。

核心工作流一：设计稿变代码

连接建好了，开始干正事。

基于链接的转换

最常用的方式。在 Figma 里复制某个 Frame 或组件的链接，然后在 Claude Code 里这样提问：

1
2
3
4
请根据这个 Figma 设计稿生成 React 组件代码：
[粘贴 Figma 链接]

技术栈：React + Tailwind CSS + TypeScript

Claude 会通过 MCP 获取设计稿的完整信息——布局结构、颜色变量、间距、字体——然后生成对应的代码。

基于选中元素的转换

如果你用的是本地 MCP，还有一种更直觉的方式：

  1. 在 Figma 桌面端选中一个 Frame 或组件
  2. 切到 Claude Code，直接说：
1
根据我在 Figma 中选中的元素生成代码

Claude 会自动读取你当前选中的内容。

提升生成质量的技巧

直接让 Claude 转代码，结果可能”能用但不够好”。这里分享几个实战技巧：

1. 提前声明技术栈

1
2
我使用 Next.js 14 + Tailwind CSS + TypeScript，
请按照这个技术栈的最佳实践来生成代码。

这一句话能让 Claude 匹配你的项目规范，而不是生成通用代码。

2. 让 Claude 先分析再动手

1
2
请先分析这个 Figma 设计稿，告诉我你看到了什么，
然后再生成代码。

先分析后执行，准确率会高很多。Claude 会告诉你它识别到了哪些组件、颜色、布局方式，你可以在这一步纠正它的理解偏差。

3. 从小组件开始

不要一上来就让 Claude 转整个页面。先从一个按钮、一张卡片开始，确认工作流跑通了，再逐步扩展。

4. 配合 Code Connect 使用

如果你的项目有成熟的设计系统，可以设置 Code Connect，让 Claude 复用你现有的组件库，而不是每次都从零生成。

核心工作流二：代码变设计

这是 2026 年初 Figma 推出的重磅功能——Code to Canvas。

你在 Claude Code 里写好了代码，启动了本地开发服务器，然后一句话：

1
启动我的应用的本地服务器，把 UI 截图发送到 Figma

Claude 会打开浏览器，捕获你正在运行的界面——不管是 localhost、staging 还是 production——然后把它转成 Figma 画布上可编辑的 Frame。

注意，这不是简单的截图。它会把页面结构拆解成 Figma 的图层，你可以在 Figma 里继续编辑每一个元素。

这意味着什么？

想象一下这个场景：

  1. 你用 Claude Code 快速搭了一个登录页面的原型
  2. 一句话把它推到 Figma
  3. 设计师在 Figma 里调整配色、优化间距、增加动效说明
  4. 你再通过 Figma MCP 把设计师的修改拉回来，更新代码

设计 → 代码 → 设计 → 代码。每个环节都有 AI 帮你搬运，上下文不丢失。

这就是真正的闭环。

一个完整的实战案例

让我们用一个具体例子把整个流程串起来。

假设你要做一个电商 App 的商品详情页。

第一步：设计师在 Figma 完成设计

商品图片、价格、描述、购买按钮、评价区域，都在 Figma 里画好了。

第二步：开发者用 Claude Code 生成代码

1
2
3
4
5
6
7
8
请根据这个商品详情页的设计稿生成 React 组件：
[Figma 链接]

要求：
1. 使用 Tailwind CSS
2. 响应式布局，适配移动端
3. 图片使用 Next/Image 组件
4. 价格区域需要支持促销价展示

Claude 通过 MCP 读取设计稿，生成完整的组件代码。

第三步：本地调试并推回 Figma

代码跑起来后，你发现比设计稿多做了一些交互——比如图片轮播、加入购物车的动画。你把这些新增的 UI 状态推回 Figma：

1
把当前页面的三个状态（默认、图片切换、加购成功）分别截图发送到 Figma

第四步：设计师在 Figma 评审优化

设计师看到实际运行的效果，直接在 Figma 里标注修改意见，调整了按钮的颜色和间距。

第五步：开发者同步修改

1
2
3
请根据这个更新后的 Figma 设计稿，
更新我现有的 ProductDetail 组件中的按钮样式和间距：
[Figma 链接]

整个过程，没有一次”你看看这个截图对不对”的来回沟通。

使用中的一些坑和建议

说了这么多好的，也聊聊现实中的限制。

免费账号的限制

Figma 的 Starter 计划或者 View/Collab 席位，每月只能调用 6 次 MCP 工具。如果你是重度用户，建议升级到 Dev 席位。

复杂页面要拆着转

一个包含十几个组件的复杂页面，直接丢给 Claude 效果不好。建议按模块拆分：先转导航栏，再转内容区，最后转底部栏。每个模块单独验证，再组装。

记得设置 Rules

Figma 官方建议给 AI Agent 设置自定义 Rules，指导它的代码生成行为。比如：

  • 使用哪个 CSS 框架
  • 组件命名规范
  • 文件组织方式

好的 Rules 能让生成质量提升一个档次。

Code to Canvas 目前仅支持部分客户端

Code to Canvas 功能目前只支持 Claude Code、Codex 和 VS Code。如果你用的是 Cursor 或 Windsurf，暂时只能做设计稿转代码，还不能把代码推回 Figma。

这套工作流改变了什么？

回到文章开头那个 8px vs 12px 的问题。

用了 Figma MCP 之后，这类问题基本消失了。Claude 直接从 Figma 读取 border-radius: 12px，生成的代码就是 rounded-xl，不需要我眼睛估，也不需要设计师来回确认。

但我也踩过一个坑：第一次用的时候，我直接把整个页面的 Figma 链接丢给 Claude，让它一次性生成所有组件。结果生成的代码结构乱，组件之间的间距关系也没处理好。后来改成按模块拆分，先转导航栏，再转内容区，每个模块单独验证，效果好多了。

Code to Canvas 这个功能我还在试。把代码推回 Figma 的图层质量，目前还不够稳定，复杂的交互状态有时候会丢失层级关系。但设计稿转代码这个方向，已经够用了。

如果你还没试过，从一个按钮开始。跑通之后，你会知道下一步该怎么扩展。