AI 可以在几秒钟内快速搭建起一个功能完备的 React 应用，而像 GeekyAnts 这样的工具则承诺能将这些新生成的代码无损地拉回到 Figma 中，并保留设计系统的结构。这一主张至关重要，因为每当 AI 生成的代码出现时，设计团队往往被迫从零开始，从而增加了重新设计的时间和成本。

多年来，交付流程在理论上看起来很简单：设计师在 Figma 中制作界面，开发人员在代码中重写这些界面，双方各自保留布局的副本。而 AI 驱动的代码生成器打破了这种节奏。AI 引擎可以交付一个即插即用的 React 项目，但目前还没有一种直接的方法能将生成的组件导入回原始设计文件中。其结果是一个痛苦的“代码先行，设计在后”的循环，这侵蚀了共享的设计语言，并推高了维护开销。

为什么 DOM 存在局限性

大多数逆向工程工具都从文档对象模型（DOM）开始，即浏览器对 HTML 元素的表示。DOM 将每个视觉元素视为通用的 <div> 或 <span>。它无法区分按钮和卡片，也不知道一组元素是否属于设计系统中的主组件。当一个页面包含十个按钮时，DOM 只会报告十个匿名图层。与原始组件库的联系消失了，留给设计师的是一堆杂乱无章、未分组的形状，清理这些形状所花费的工作往往比从头开始重建界面还要多。

React Fiber 提供了更丰富的映射

React 的内部调度器称为 Fiber，它维护着一个组件树，其中包含了组件名称、父子关系以及属性集合。通过读取 Fiber 结构而非渲染后的 HTML，逆向工程工具可以识别出某个特定的 <div> 实际上是一个 PrimaryButton 组件，它位于 Header 组件内部，并且携带了一组定义其状态的 props。这种洞察力保留了原始开发人员（或生成代码的 AI）赋予 UI 的设计意图。

GeekyAnts 利用 React Fiber 提取技术，将实时代码带入可编辑的 Figma 文件中。

新工作流如何解决实际问题

变体扩展 (Variant expansion)

传统的捕获方法只能对组件的可见状态进行快照——例如，一个处于默认非悬停状态的按钮。通过检查 Fiber 树中的组件定义，该工具可以枚举源代码中声明的所有变体：悬停 (hover)、聚焦 (focused)、禁用 (disabled)、加载中 (loading) 等。然后，它会创建一个 Figma 组件集 (Component Set)，将所有这些状态打包在一起，在无需手动复制的情况下镜像设计系统的意图。

布局映射 (Layout mapping)

Web 布局高度依赖 CSS Flexbox，而 Figma 中的对应功能是 Auto Layout。如果有一个转换层能将 Flexbox 属性（方向、对齐方式、间距等）直接映射到 Auto Layout 参数上，就意味着间距、缩放行为和对齐方式可以在往返转换过程中得以保留。设计师不再需要手动重建复杂的 flex 容器。

状态触发 (State triggering)

许多 UI 组件——如模态框 (modals)、下拉菜单 (dropdowns)、折叠面板 (accordions)——在 JavaScript 改变状态之前在 DOM 中是隐藏的。由于 Fiber 树记录了这些逻辑，逆向工程工具可以以编程方式触发这些状态，使隐藏元素显现，并将其捕获为设计对象。其结果是一个完整的设计文件，包含了每一个交互组件，而不仅仅是初始加载时可见的部分。

新兴工具箱

  • GeekyAnts – 提取 React Fiber 以生成遵循组件边界的实时、可编辑的 Figma 文件。
  • Anima – 侧重于正向路径，将 Figma 设计转换为 React 或 Vue 代码。
  • Locofy.ai – 使用 AI 将 Figma 布局转换为响应式代码，强调速度。
  • Builder.io – 将 HTML 组件拉回到 Figma 中。
  • Codia AI – 将截图转换为结构化的 Figma 文件。

对团队和预算的影响

当设计与开发脱节时，修复不一致性的成本会迅速攀升。

反方观点与局限性

(本节故意留空)

后续关注点

(本节故意留空)

核心总结

(本节故意留空)

读取 React 的内部 Fiber 树而非表层的 DOM，将痛苦的“先代码、后设计”循环转变为了一种双向互通的模式。AI 生成的应用现在可以无损组件结构地拉回到 Figma 中。对于那些正与设计偏差和不断上升的维护成本作斗争的团队来说，这种转变可能意味着：是陷入混乱的重新设计冲刺，还是拥有一套严谨的、组件优先的工作流。