Figma Code to Canvas：Anthropic 联手打造代码转设计新范式

2026 年 2 月 17 日，Figma 与 Anthropic 联合发布了一项名为 Code to Canvas 的新功能。这不是又一个"AI 生成设计稿"的噱头，而是一次对设计与开发协作方式的根本性重构——它允许用户在 Claude Code 中构建的 UI 界面，直接以可编辑的设计图层形式传输到 Figma 画布上。

这意味着什么？以前，AI 帮你写好了前端代码，设计师想要在 Figma 中调整，要么截图重画，要么在代码里艰难修改。现在，一句 “Send this to Figma”，代码就变成了设计师熟悉的 Figma Frame——不是截图，不是位图，而是真正可以拖拽、编辑、标注的矢量图层。

Figma CEO Dylan Field 对此的判断很直接：“当 AI 能帮你构建任何你能描述的可能性时，你的核心工作就是找到最优解。” 而找最优解的最佳场所，不是 IDE 的终端窗口，而是设计画布。

Code to Canvas 到底是什么

Code to Canvas 是 Figma 与 Anthropic 深度合作推出的集成功能，核心能力可以用一句话概括：将浏览器中渲染的 UI 界面，转化为 Figma 画布上可编辑的设计元素。

从技术角度来看，它并不是简单的"截图导入"。传统的截图只是一张位图，无法编辑其中的文字、布局或颜色。Code to Canvas 的不同之处在于，它捕获的是浏览器的渲染状态（rendered state），然后将其语义化地解析为 Figma 的 Frame 结构，包括图层、文本、间距、颜色等属性都被保留下来。

打个比方：如果说截图是给房子拍了张照片，那 Code to Canvas 就是把这栋房子的 CAD 图纸导入了建筑设计软件——你可以移动墙壁、调整窗户、重新规划房间布局。

核心定位

工作原理与技术架构

Code to Canvas 的技术实现依赖于一个关键协议：MCP（Model Context Protocol）。如果你关注过 Claude Code 的生态发展，对 MCP 应该不会陌生——它是一个开放标准，允许 AI 工具与外部数据源和应用程序进行连接，本质上是 AI Agent 与外部世界的"通用适配器"。

在 Code to Canvas 的场景中，Figma 提供了一个本地运行的 Dev Mode MCP Server。这个 Server 不仅仅是一个传输通道，它能语义化地读取 Figma 中的组件库、设计变量、样式系统和布局结构。当 Claude Code 通过 MCP 与 Figma 连接时，双方建立的是一个结构化的双向通信，而不是简单的数据搬运。

工作流程

整个流程分为四个步骤：

第一步：在 Claude Code 中构建 UI

使用 Claude Code 通过对话式交互构建前端界面。这可以是一个全新的项目，也可以是对现有代码的迭代修改。构建完成后，UI 会在本地开发服务器、staging 环境或任何浏览器中运行。

第二步：启用 Figma MCP Server

打开 Figma 桌面端应用（注意：必须是桌面端，浏览器版不支持），进入偏好设置，开启 “Dev Mode MCP Server”。启用后，它会在本地地址 http://127.0.0.1:3845/sse 上运行一个服务。

第三步：连接 Claude Code 与 Figma

在终端中运行一条命令，将 Figma MCP Server 注册到 Claude Code 中：

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

这条命令告诉 Claude Code：“嘿，Figma 在这个地址等着你，你们可以开始通信了。”

第四步：发送到 Figma

在 Claude Code 中输入 “Send this to Figma”，系统会自动抓取当前浏览器中渲染的 UI 状态，将其转化为 Figma 兼容的 Frame，直接出现在你的 Figma 画布上。

架构示意

Claude Code (终端)
    |
    | 构建 UI，渲染到浏览器
    v
浏览器（本地 dev server）
    |
    | 捕获渲染状态
    v
MCP Protocol（通信层）
    |
    | 语义化转换
    v
Figma Dev Mode MCP Server（本地 127.0.0.1:3845）
    |
    | 生成可编辑 Frame
    v
Figma 画布（可编辑设计稿）

值得注意的是，这个流程也支持反向操作：你可以在 Figma 中选中一个 Frame，将其链接发送给 Claude Code，Claude 会根据设计稿生成符合你设计系统（组件、Token、Tailwind 变量等）的生产级代码。这就形成了一个设计与开发之间的闭环。

核心功能详解

1. 多方案并排对比

这是 Code to Canvas 最实用的能力之一。在传统工作流中，如果想对比三个不同的 UI 方案，你需要分别构建、截图、粘贴，再逐一标注差异。现在，你可以让 Claude Code 快速生成多个变体，全部发送到 Figma 画布上，像在白板上摆卡片一样并排比较。

设计师可以一眼看到不同方案的模式差异、信息层级变化和视觉一致性问题，而不需要在多个浏览器标签页之间来回切换。

2. 无代码结构探索

设计稿到了 Figma 画布上，设计师可以直接用熟悉的操作来探索和调整：

• 复制 Frame，重新排列步骤顺序，测试不同的信息架构
• 调整布局间距，观察不同排版方案的效果
• 修改文字内容，检验文案与设计的匹配度

整个过程不需要触碰一行代码。这对于不熟悉终端操作的设计师来说，大大降低了参与 AI 辅助设计流程的门槛。

3. 团队协作标注

PM、设计师和工程师可以在同一个 Figma Frame 上进行标注和评论。区别在于，他们评论的对象不再是一张静态原型图，而是实际构建出来的、真实保真度的界面。这消除了"原型图和实际效果不一样"这一经典协作痛点。

4. 设计系统对齐检查

如果你的 Figma 项目中已经定义了设计系统（组件库、颜色变量、排版规范），MCP Server 会将这些信息传递给 Claude Code。这意味着 AI 生成的代码会尽量遵循你已有的设计系统，而不是用通用的 UI 框架从头构建。当生成的界面传回 Figma 时，设计师可以快速检查它与现有设计系统的一致性。

使用场景与工作流

场景一：快速原型验证

产品经理有一个新功能的想法，传统流程是：写 PRD –> 设计师出原型 –> 开发实现 –> 评审反馈。使用 Code to Canvas，流程可以压缩为：

1. 在 Claude Code 中用自然语言描述功能需求
2. Claude 生成可运行的 UI 原型
3. “Send this to Figma” 传到画布上
4. 团队在 Figma 中直接讨论和迭代

从想法到可讨论的高保真原型，可能只需要几分钟。

场景二：设计方案发散

设计师在概念探索阶段需要快速发散多个方向。可以让 Claude Code 根据不同的设计理念生成 5-6 个界面变体，全部传到 Figma 画布上。设计师从"逐个创建方案"变成了"从多个方案中筛选和精炼"——角色从创作者转变为策展人。

场景三：设计还原度审查

开发完成后，将实际运行的界面通过 Code to Canvas 传到 Figma，与原始设计稿并排放置。PM 和设计师可以逐像素比对，标注出所有需要调整的差异点。这比传统的"打开浏览器看看效果"要高效得多。

场景四：AI 生成代码的设计审查

在 AI 辅助编程越来越普及的今天，很多代码是由 AI 生成的。但 AI 生成的 UI 代码，视觉效果往往不够精致。通过 Code to Canvas，设计师可以把 AI 生成的界面拉到 Figma 中，用专业的设计眼光进行审查和优化，然后再把调整后的设计稿反馈给开发。

与其他 AI 设计方案的对比

当前市场上有多种 AI 辅助设计和开发的工具，它们的定位和能力各有不同。

核心区别在于方向性。v0、Bolt、Lovable 都是从文本/需求出发，直接生成可运行的代码或应用——它们解决的是"从 0 到 1 构建"的问题。而 Code to Canvas 解决的是代码生成之后的问题：怎么让设计师参与进来，怎么让团队在视觉层面进行协作和决策。

换句话说，Code to Canvas 不是这些工具的竞争对手，而是它们的下游补充。你可以用 v0 生成代码，再用 Code to Canvas 把结果传到 Figma 中进行设计审查。

同时，Figma 自家的 Figma Make（原 Figma AI）走的是另一个方向——从文本或设计出发生成代码。Code to Canvas 与 Figma Make 形成了互补：一个从代码到设计，一个从设计到代码，共同构成了 Figma 生态中的双向闭环。

当前的局限性

尽管 Code to Canvas 的理念令人兴奋，但当前版本仍存在一些明显的局限：

其中最关键的限制是缺少视觉微调的自动回路。目前，设计师在 Figma 中调整了间距或颜色后，这些修改不会自动反映到代码中，还需要手动在代码层面进行同步。未来如果能实现"Figma 中改了设计，代码自动更新"，那才是真正的闭环。

对设计师和开发者的影响

对设计师

Code to Canvas 不会取代设计师，反而会强化设计师的角色。当 AI 可以在几秒钟内生成多个 UI 方案时，“创建设计稿"这件事的稀缺性下降了，但判断哪个方案更好的能力变得更加重要。设计师的角色从"生产者"向"策展人"转变——你不再需要花大量时间亲手画每个方案，而是从 AI 生成的多个选项中挑选、组合、精炼出最优解。

这与 AI 辅助创作领域的一个共同趋势高度一致：AI 降低了创作的执行成本，但提高了对审美判断力和设计决策力的要求。

对开发者

开发者终于有了一个让设计师"看到自己工作成果"的便捷方式。以前，开发者完成前端实现后，设计师的反馈往往是"这里间距不对"“那个颜色偏了”，双方需要在代码和设计稿之间来回跳转。现在，开发者可以直接把实现效果传到 Figma，设计师在自己熟悉的工具中标注反馈，沟通效率大幅提升。

对产品团队

产品团队获得了一个更快速的决策工具。以前从"想法"到"可视化的讨论素材"可能需要几天甚至几周，现在可以压缩到几个小时。产品经理可以在周会之前，让 AI 生成几个方案草图，传到 Figma 上供团队讨论——决策的速度和质量都在提升。

更大的图景：设计工具与编程工具的融合

Code to Canvas 的发布，反映的是一个更深层的行业趋势：设计工具和编程工具正在融合，不是作为竞争对手，而是作为同一个系统的两个部分。

过去十年，设计和开发是两条平行线——设计师在 Figma/Sketch 中工作，开发者在 VS Code/终端中工作，两者通过"设计交付"这个节点进行衔接。交付过程中的信息损失和沟通成本，是无数团队的痛点。

AI 正在重新定义这条分界线。当 Claude Code 能够生成高质量的 UI 代码，而 Code to Canvas 又能把这些代码变成可编辑的设计稿时，“设计"和"开发"不再是两个串行的阶段，而是可以并行、交叉、循环迭代的过程。

Figma 的战略意图也很清晰：在 AI 编程工具崛起的时代，设计画布不仅没有被淘汰，反而变得更加重要。因为当 AI 能快速生成大量方案时，你更需要一个视觉化的空间来比较、筛选和决策——而这正是 Figma 画布的核心价值。

总结

Code to Canvas 是 Figma 和 Anthropic 对"AI 时代设计与开发如何协作"这个问题给出的一个务实答案。它没有试图用 AI 取代设计师或开发者，而是在两者之间搭建了一座桥梁。

核心价值可以概括为三点：

1. 降低协作摩擦：代码到设计的转换不再需要手动重建，一句话完成传输
2. 加速决策循环：AI 生成多个方案，团队在画布上快速比较和选择
3. 保留专业价值：设计师的审美判断和开发者的工程能力，都在各自擅长的工具中发挥作用

对于已经在使用 Claude Code 的开发者来说，Code to Canvas 是一个值得尝试的工作流升级。对于设计师来说，这是一个了解 AI 辅助设计趋势、主动拥抱变化的好机会。

而对于整个行业来说，Code to Canvas 或许预示着一个更大的变革：未来的产品创造过程，将不再有严格的"设计阶段"和"开发阶段"之分，取而代之的是设计与代码在同一个工作流中的自由流动。