Figma 联手 Claude Code：直接把运行中代码抓取为可编辑设计稿

以前做产品，流程几乎是铁打的：设计师在 Figma 里画好像素级图层，交给前端敲代码还原，遇到对不齐的地方反复扯皮。

到了 AI 编程时代，很多人习惯颠倒了。打开 Claude Code，几句提示词下去，一个能点能跑的网页原型就出来了。但麻烦也跟着来了：你想给团队看，只能录屏、发截图，或者让人家本地跑服务；想改改间距和排版，还得回终端里继续调提示词。

Figma 宣布支持把 Claude Code 生成的真实界面直接搬进画布，变成完全可编辑的 Figma 图层。

抓取网页，塞回画布

这套功能做的事情，简单说就是逆向工程。

你在 Claude Code 里调出来的界面，无论跑在 localhost 本地服务、测试环境 staging，还是已经上线的生产环境，都能直接捕获。

截下来的不是一张死板的 PNG 图片，而是保留了层级关系的 Figma frame。你可以像对待普通设计稿一样，改文本、调间距、复制几十个画板去对比不同的按钮样式。

要是做的是多步骤的交互流程，它还支持连续捕获多个屏幕，把整个前后逻辑完整保留在画板上。

配合之前 Figma 推出的 Figma Make 原型功能，团队现在既可以从 Figma 画布向代码走，也可以从代码直接往画布反哺。

连上 MCP，走完双向闭环

单向抓取只是第一步，Figma 想要的是真正的回路。

通过 Figma 的 MCP 服务器，开发者可以在 Claude Code 等代理工具里直接引用 Figma 画板的链接。你在画布上改好了颜色、重新排了模块，AI 代理读取后能直接把修改同步到代码里。

写代码的人不用在终端里猜视觉效果，设计师也不用从白纸开始画那些已经被代码写出来的组件。

这项能力的背后，有 2024 年被 Figma 收购的 Dynaboard 团队的身影。前 Dynaboard 创始人 Alex Kern 和 Figma AI 设计总监 Gui 联手推行了这个项目，试图抹平设计与代码之间最后那道物理缝隙。

为什么重要

我们认为，这是 Figma 面对 AI 编码浪潮做出的一次非常聪明的防御与反击。

过去几个月里，以 Claude Code、Cursor 为代表的 AI 工具把前端原型的门槛压得极低，很多全栈和独立开发者已经习惯绕过设计软件，直接用代码出活。长此以往，Figma 最核心的协作阵地很可能会被边缘化。

把代码抓取回画布，实际上承认了代码优先探索的合理性，同时又把最终决策和发散创意的场景死死拉回 Figma。

对用户来说，如果你平时重度依赖 AI 敲前端，这个功能极其值得一试。以前你想改一个卡片的摆放顺序，在终端里调提示词可能要试三次才能对准；现在直接拖进 Figma 挪两下，再让 MCP 同步回代码，效率高得多。

不过隐患也是明摆着的。真实前端代码里的复杂组件状态、动态数据和自适应布局，转换成 Figma 图层后能不能完美保持设计规范，依然需要打个问号。但无论如何，设计和编程之间那堵十几年的墙，正在被彻底拆掉。