导读：我造了一套 Figma → Vue 的编译流水线：包含中间表示层（IR）、视觉回归、自动修复与半自动控制流。
我用半年时间，从零搭了一条从 Figma 设计稿到 Vue 静态页面的自动化流水线。
它不是“AI 看一眼截图就吐代码”的黑盒，而是一条可拆解、可校验、可半自动干预的工程链路：
Figma JSON
→ extractCleaner 清洗
→ buildIR / buildMinIR 构建中间表示
→ gen-vue 生成 Vue 组件
→ fill-svg 补齐 SVG
→ Playwright 截图
→ Pixelmatch 差异对比
→ fix-vue-from-diff 差异报告驱动修复
核心诉求很明确：数据驱动 + 像素级还原 + 自动校验 + 自动修复。市场上现成的工具都做不到我想要的闭环，所以自己造。
为什么不用现成方案
| 工具 | 核心问题 |
| --- | --- |
| figma-local-mcp | 黑盒，绝对定位信息被降维成布局关系，右上角元素变成上下排列 |
| figma-restoration-mcp | 只做视觉比对，不生成代码 |
| Cline + 截图流 | 链路过长，本地环境容易卡死，AI 容易陷入写脚本死循环 |
| imgcook / Deco | 大厂内部工具，用不上 |
我需要的是可控的数据流，而不是“提示词调好了就靠运气”的一次性生成。
我踩过的三个关键坑
1. MCP 黑盒导致定位信息丢失
- 现象：右上角元素被生成成上下排列。
- 定位：
figma-local-mcp把绝对定位降维成了布局关系。 - 解决：自己写
extractCleaner + buildIR，完整保留几何信息（x/y/width/height、绝对定位语义），不再依赖黑盒。
2. 规则引擎出现环形依赖
- 现象：表单联动 A→B→C→A，死循环。
- 定位：单链表查不出环。
- 解决：改成拓扑排序（图论），后来才正式学了数据结构里的图与拓扑排序。
3. AI 越改越差
- 现象：提示词写了 500 字，视觉校验反馈慢，AI 在瞎猜。
- 定位：差异没有被量化，模型没有精确的“错在哪里”信号。
- 解决：引入 Pixelmatch 做像素级差异量化，差异报告驱动脚本修复，而不是把
diff.png直接丢给多模态模型瞎改。
这些坑让我彻底从“让 AI 一步生成完美页面”转向“工程化拆解 + 脚本兜底 + 精确控制流”。
流水线关键设计取舍
- IR（中间表示）是核心：不是简单删字段，而是重新构建可定位、可校验的结构。后面的视觉回归和自动修复都依赖 IR 上的稳定 ID 与几何信息。
- 视觉校验必须量化：Pixelmatch 输出差异像素数 + 区域，而不是只靠人眼或 AI 看图说话。
- 半自动是有意设计：全自动、半自动、纯手动三条路径都保留。脚本限制 AI 的行动边界，人可以随时介入。想怎么玩就怎么玩。
- 从“提示词调教”转向“编译器思想”：清洗 → IR → 代码生成 → 校验 → 修复，本质上已经在做轻量编译器流水线。后来才意识到自己在反推编译原理。
一句话总结
我不是最会写代码的人，但我是能把复杂问题拆到能解决、并且坚持到跑通的人。 五月份靠提示词已经能跑到 80-90% 相似度，当时觉得“差不多就行”。但页面一复杂，同样的方法就明显衰退。后来的脚本、视觉回归、拓扑规则引擎，是在把一次性的运气，沉淀成可复现的工程能力。过程看起来更累、更琐碎，性质上是升级，而不是倒退。
附录：关键时间线（日记浓缩版）
- 2026-03 ~ 04：从 AI Agent 设想切入，确认 Vue3 + FastAPI 技术栈，开始接触 Figma。
- 2026-05：尝试多种 MCP，最终选定 figma-local-mcp + Framelink Exporter，发现黑盒问题。
- 2026-06 ~ 07：意识到 JSON 脏数据问题，开始自己写清洗脚本；引入 Playwright + Pixelmatch 视觉回归。
- 2026-07 下旬：明确 IR 概念，把“清洗”升级为“中间表示层”。
- 2026-08：深度打磨 Vue 页面规范（DTO / pageData / uiData / RuleEngine），规则引擎从单链表改为拓扑图 + Effect。
- 2026-08 下旬 ~ 09：反复迭代 extractCleaner / buildIR / gen-vue / fill-svg，解决 SVG 丢失、截图一致性、熔断检查等问题，形成可半自动干预的完整流水线。
