一个设计师用 TensorFlow 做了件狠事：让设计系统有了“AI 拼写检查”

设计系统最大的敌人不是规范不够，而是人类自己。一次 Config 演讲里，一位产品设计师展示了一个反直觉的原型：用 TensorFlow 给 Figma 做“拼写检查”，自动揪出设计系统里的隐形错误。这不是概念，而是已经跑起来的插件。

设计系统最讽刺的问题：大家都“看起来对”，但系统层面全错

如果你管理过设计系统，一定见过这种画面：两个界面几乎一模一样，视觉上挑不出毛病，但在系统眼里，一个是规范组件，另一个是 detached instance，甚至是手画的“伪组件”。

JooHyung P 在演讲里把这个问题说得很直白：设计系统规模越大，问题反而越多。组件和模式数量爆炸，旧组件难以替换，设计文件里混入历史遗留、临时修补、甚至 emoji 和“独角兽”。

更讽刺的是，设计系统团队已经做了所有“正确的事”：更新指南、做 Design QA、写手册、画漫画解释规范。但错误依然存在，因为这些手段的前提是——人要一直保持高度自觉。

他的结论很残酷：不是设计师不努力，而是这是一个不该靠人力兜底的问题。

反直觉解法：把设计系统当成“语法”，让 AI 来做拼写检查

真正的转折点在于一个类比。

我们已经习惯机器自动做人脸识别、目标检测、语音纠错，那为什么设计系统里的“语法错误”，一定要靠人肉检查？

JooHyung 的想法很清晰：
- 让机器先“看懂”界面上有什么 UI 元素（计算机视觉）
- 再把这些检测结果，与 Figma 里的设计系统信息对齐
- 如果两者不匹配，就像拼错单词一样，直接标出来

于是，Figma ML 这个项目诞生了。

在插件运行时，TensorFlow.js 会在浏览器里实时检测界面上的 UI 元素，画出一组蓝色框；与此同时，Figma API 提供设计系统里的组件信息，用橙色框标出。插件做的事情只有一件：比较这两套框。

如果它们在位置、尺寸、重叠区域、甚至标签文本上对不上——恭喜，你的设计系统“拼写错误”被抓住了。

真正难的不是模型，而是数据、性能和“别打扰设计师”

项目听起来很酷，但 JooHyung 说得很实在：这是一个小项目，却一点也不轻松。

他遇到的三个核心挑战，几乎是所有 AI 应用落地的缩影。

第一，数据规模。
UI 目标检测不是 ImageNet 那种现成任务。他通过联系新加坡的 Mobbin，拿到了上万张高质量移动端 UI 截图；又和韩国的 SelectStar 合作，手工标注了 5 万多个 bounding boxes。这一步，几乎决定了项目的上限。

第二，模型选择与性能。
他基于 Google TensorFlow Hub 的模型做迁移学习和微调，在准确率和实时性之间反复权衡。最终选定的模型，能在浏览器里实时检测 UI 元素，这一点对插件体验至关重要。

第三，也是最容易被忽视的：如何不打断设计师。
插件不是为了“教育”用户，而是要在设计流程中自然出现。于是他把所有反馈直接画在 Figma 的 iframe 里，用框选和提示告诉你哪里不对，而不是甩一堆报表。

这一点，反而是很多 AI 工具失败的原因。

从 Figma 到 Zeplin：这不是 Demo，而是可被团队使用的原型

为了证明这不是只存在于演讲里的概念验证，JooHyung 还做了 Zeplin 版本。

逻辑完全一致：浏览器识别 UI → 对比设计库 → 通过 Zeplin Comment API 抛出检查点。换句话说，这套“AI 拼写检查”不依赖某一个工具，而是设计协作流程中的一层智能。

项目发布后，反馈比他预期得更猛烈：
- Figma 的设计师倡导者主动交流，持续给建议
- Zeplin 把它当成超级用例推荐
- Google TensorFlow 团队成员评价这是一次“很棒的旅程”

它最终被带到了韩国最大的开发者大会之一 DEVIEW21。一个由设计师发起、用 ML 驱动的工具，站上了开发者舞台。

最锋利的反思：我们是不是“习惯了低效”，还以为那是专业

演讲最后，JooHyung 抛出了一个让人不舒服的观点。

他说，职场里最糟糕的事情之一，是“对低效的精通”。当一个流程足够低效时，人们会发展出各种技巧去适应它，最后忘了——问题本身是荒谬的。

设计系统已经把设计从像素对齐，推进到了组件沟通，这是巨大进步。但它仍然不完美，还有大量低效等待被解决。

而 Figma 的意义，不只是画 UI，而是一个可以被扩展、被改造、用来解决工作环境问题的平台。

这也是他做这个项目的真正动机。

总结

这个项目最值得 AI 从业者学习的，并不是用了什么模型，而是选对了问题。它精准卡在“人类不擅长、机器正好擅长”的缝隙里，用计算机视觉去兜底人类的疏忽。

如果你在做 AI 应用，不妨问自己三个问题：这个错误是不是人类迟早会犯？这个判断是不是可以被形式化？这个反馈能不能无缝嵌入用户流程？

当答案都是“是”的时候，也许下一个值得做的插件，就在你每天忍受的低效里。

关键词： Figma 插件， TensorFlow.js， 设计系统， UI 目标检测， AI 应用落地

事实核查备注： 需要核查：1）演讲者姓名拼写 JooHyung P；2）视频发布时间 2022-05-19；3）Mobbin 提供的数据规模（上万张截图）；4）SelectStar 标注的 bounding box 数量（约 50，000）；5）Google TensorFlow Hub 与 TensorFlow.js 的具体使用描述