这不是一个”完美的 Figma 转代码工具”，而是一次尽量跑通真实业务闭环的尝试。

先说结果：我们做出了什么

这次我们实际搭了一条可以跑起来的链路：产品修改figma，ai自动完成前端app对应修改并部署到线上（无感知）。

这条链路里，已经跑通的部分包括：

  1. 能从 Figma 版本里检测出真实变更
  2. 默认只比较相邻两次 Completed
  3. 能把变更限制在指定开发区间内
  4. 能让 Claude 读取本地 Flutter 仓库
  5. 能结合 Figma 文本层级推断代码落点
  6. 能把改动真实写进页面文件
  7. 能复用已有自动部署链路

一、我真正想解决的问题

真实痛点是：

  1. 产品或设计同学改了 Figma，开发往往不能第一时间知道改了什么
  2. 即使知道改了，也要自己去 Figma 里定位节点、理解设计意图
  3. 改完还不算结束，还要提交、部署，最后才能去真实环境看效果

二、这次踩过的坑

1. “生成成功”不等于”业务成功”

模型很容易生成一个独立组件，看起来没问题，但没有真正挂到页面里。

2. 最大难点其实是”找到宿主页”

比如一个节点叫 Frame 2087327689，你单看名字几乎得不到任何有用信息。

真正起作用的是：

  • 它在 Figma 里的父子路径
  • 它兄弟节点里的业务文本
  • 周围是否出现”分类 / 预约 / 首页 / 我的”这类导航词
  • 本地代码里有没有对应页面结构

3. 文本比截图更稳定

我后来基本放弃了”靠截图猜宿主页”的路线，转向文本层级和代码上下文。

三、总结

如果一句话总结这次实践：

这不是一个完美的 Figma 转代码系统，而是一次把”设计变更 -> 代码修改 -> 自动部署 -> 真实环境验证”尽量跑通的闭环尝试。

只要把设计上下文、本地代码、推理约束和部署链路串起来，AI 确实可以开始承担一部分真实前端迭代工作。