上个月底写了AI生成UI代码实践 ------ Figba，介绍我让 AI 给我写的Sketch 查看器 + MCP server。当时还在一个初期阶段，需要"在实际需求里跑一段时间，把细节交互再打磨打磨"。
这一月中，改了一百多个大大小小的问题。本篇把这一个月的重要更新串起来讲一遍，虽然UI也全面升级了，但是不重要，哈哈。
从"喂数据"到"教方法"
9 月那篇讲过，Figba 的核心是把设计稿结构化数据喂给 AI。但用了一阵发现一个问题：数据给了，AI 不一定用得好。
比如数据里有个类型叫 IMAGE-CUT，这个是我自己定义的类型，意思是设计标记的切图。第一次遇到的 AI 会乖乖照做，但有时、换个模型，它可能就把切图组展开成一堆路径自己画， token 花了，效果还差。再比如 sameAs 字段（同款图层只详列第一个，其余给坐标存根），不懂的 AI 会为每个存根重复写一遍样式，懂的会做成组件循环复用。这些经验以前散落在一次次对话里，每个新会话都要重新教。
这个月我把它们固化成了两个 skill：
- figba-restore（数据还原指南）：字段语义、类型到代码的映射、常见问题清单。相当于给 AI 的"零件说明书"，哪些是素材、描边的 INSIDE/CENTER 位置差多少、动态内容（进度环之类）为什么不能切图。
- figba-verify（视觉验收）：还原完成后的像素对照闭环。设计稿为真值、成品截图为被测，统一 pixelmatch 出差异热区图，再按分级表判读------哪些差异是真 bug 要修，哪些是文字边缘的抗锯齿噪声可以放过。
通俗讲：以前是递给 AI 一箱零件；现在是零件 + 说明书 + 验收单。说明书让它少走弯路，验收单让它对自己的结果负责，AI 自己说检查没问题了不可信，必须拿图，事实说话。
比如这个页面，pixelmatch 逐像素对比。AI给的结论：
首轮对照差异 0.318%。热区图的红色差异全部集中在几行文字的边缘，是 HTML 渲染和 SVG 渲染的字形光栅化差异（抗锯齿晕带，可接受）；而所有图片、图标、渐变、按钮区域像素级基本一致，三个社交圆钮那一整块只差 2 个像素。我还试着给文字加了 0.5px 的微调想抹平晕带，结果反而更糊（0.44%），回退。
这正是验收闭环的价值：改没改好，热区图说了算，不是感觉说了算。
之前我说"还原度 90%"，那是目测。现在这个数字可以被量化、被复现：哪里像、哪里差、差的可不可接受，一这样就很直观了。
当然热区图不是万能的，也不要期待永远一次成功，100%还原。该有的检查，调整都是正常的。
从"拷文件"到"发链接"
9 月的形态是纯本地：.sketch 文件在自己电脑上，浏览器 file:// 打开。自己用很爽，但设计师那边怎么把稿子给你？企微传文件？太麻烦了。
这个月补上了完整链路：
- Sketch 插件上传：设计师在 Sketch 里装上 figba 插件，对任何文档执行"上传当前文档"，多画板文档会弹画板勾选，选择上传的目录，上传后直接得到一个链接，可以直接打开浏览。
- 服务器 + Docker ：查看器本体是纯静态页，
docker compose up一条命令起。设计稿文件不进容器，由一个自建的元数据服务管虚拟目录树和"文件 id → 链接"映射。
现在的协作流是：设计师插件里勾选画板上传 → 同事浏览器直接看，AI 工具接同一个稿子。
性能与保真
这两块不太适合截图，但对日常使用影响最大，拣要点说。
性能（对着 40~240MB 的真实项目稿调的）：
- 远程文件按需下载：zip 的目录在文件尾，先 Range 拉目录再按需取首屏条目，41MB 的稿子首屏只下 4%（1.73MB），翻页再取下一页的；
- 打开过的文件二次零下载零读盘，首开也从 1.37s 提到 0.55s；
- 大稿滚动、缩放的掉帧减少 60%~80%，来回切文件 ~100ms。
渲染保真：9 月我说"还原度比起蓝湖还差一些"。这个月拿真实语料当回归集，修了大几十个问题、嵌套布尔运算的挖孔、圆角逐角对位、嵌套画板的裁剪，等等。
修复套路是固定的：语料实证 → 定位根因 → 修复 → 逐像素验证，每条都记进 CHANGELOG。然后自己也让AI将出现过的还原问题整理了一个错误集，也是避免改了一个bug，影响了之前正常的功能，造成一个新的bug。
看稿体验的几个小更新
- 纯查看模式（Tab 键）：一键隐藏图层面板和检查器，选中、测距、切图虚线全部静默，只剩干净的画布，左下角带整页小地图。给不想被工具界面打扰的人看的------比如给产品经理演示的时候。
- 紧凑排版：设计稿里画板经常散点摆放、大片留白，现在默认按阅读顺序折行排成等距网格，想看设计师原始摆放可以一键切回。
- 总览模式：缩放到 40% 以下自动转只读展示，超大稿子（单页一百多个画板那种）缩小说不再卡。
写在最后
9 月的 figba 是"把设计稿数据喂给 AI"；这个月的 figba 是"喂好数据、教好方法、验好结果"------工具开始有闭环了。
下一步还是那句话：在实际需求里继续跑，哪里不爽改哪里。目标不变，怎么懒怎么来。