EN
Figma Config

让 AI 自己审自己的设计稿,两个月工期压到两小时

The metacognitive design loop ft. Jenny Au & Mike Green | Config 2026 · Mike Green

20 min
Design-to-CodeAgentAI 编程

全片 19 分钟·真正值得盯屏约 7 分钟·3 个必看点

橙色 = 推荐必看的 7 分钟其余读导览就够
逐段导览 · 7 段
  1. 0:12 2:07

    守门员这个岗位正在失效

    开场抛出问题:设计团队长期靠人工守门来保证一致性,但 AI 大批量产出界面之后,这条防线开始崩。

    问题不出在 AI 画得不够好,而出在人工审查这个环节本身跟不上产出速度。

    这一段基本是讲者站着讲问题背景,画面只有标题页,边做别的事听着就行。▶ 跳到 0:12
  2. 2:07 4:20

    四十亿种组合:QA 在数学上就不成立

    现场打开他们的设计系统,用数字说明治理规模:50 多个组件、200 多个 token、100 多条规则,组合空间约 40 亿,而 QA 人力比大约 1:100。

    治理还有个「失败的钟摆」——管太严流程瘫痪,管太松就被上千个微小不一致慢慢拖偏。

    屏幕上是设计系统的组件面板和几组数字,扫一眼把量级看清即可,逐字听没有额外收获。▶ 跳到 2:07
    讲者 · Mike Green
  3. 4:20 7:15

    元认知闭环:让 AI 在你看到之前先自查

    提出核心方案,在规划与构建之后插入一个自我审查环节,AI 对照设计系统规则反复修正直到全部通过,每次修正都以一次代码提交固化成新规则。

    系统会越用越聪明,因为同一个错误的修法被沉淀下来,而不是每次重新讲一遍。

    闭环各环节之间的先后与回路关系全在那张图上,图里的箭头走向就是这套方法的说明书,光听会散。▶ 跳到 4:20
    讲者 · Jenny Au
  4. 7:15 10:10

    两道防线:一道护代码,一道护策略

    介绍自建的 Core UI 连接层直连 Figma 的实时 token 和最新组件目录作为唯一事实来源;另一条线是需求文档智能体,用结构化访谈产品负责人、翻译成确切组件、显式批准后交接的三步流程。

    最糟的时刻是开发开始之后才发现做错了东西,所以质量检查要挪到流程最前端。

    这一段主要在讲两条防线各自负责什么、为什么这样切分,画面只是配合文字的要点页,属于口头论述。▶ 跳到 7:15
  5. 10:10 12:29

    同一个组件,两个名字

    现场演示搭建组件映射文件时暴露的问题:一个顶部导航在代码里和在设计文件、组件文档里叫法完全不同。

    命名统一不是审美洁癖,而是提示词能否稳定生效的前提,这个坑他们真踩过。

    两套命名并排出现在屏幕上的那一下最有说服力,讲者也在直接指着屏幕说,不看画面基本感受不到问题的严重性。▶ 跳到 10:10
    讲者 · Mike Green
  6. 12:29 14:18

    翻车样本:被拆成两半的表格

    展示一个失败案例,AI 把表头和数据行当作两个独立的布局问题分别处理,导致列错位、栅格断裂。

    没有治理的智能体流程不只是产出错误,还可能把整体一致性拉到比开工前更低的水平。

    错位到底错在哪、断在第几列,只有看那张歪掉的表格才能直观感受到,讲述再细也补不上这个画面。▶ 跳到 12:29
    讲者 · Mike Green
  7. 14:18 19:26

    两小时交付,和你明天就能开始的四步

    给出成果数据与可复制路径:过去两个月的构建加质检压缩到两小时且没牺牲精度;四步是把质检提到需求阶段、让设计与代码共用一套语言、让闭环自检自纠、用辅导的方式把修正编码成规则。

    小团队起步只要三件事——把设计系统当代码管、遇到问题先问 AI「你为什么这么做」而不是「改好它」、把每次修正写成规则。

    收尾部分讲者主要在口头总结蓝图和角色转变,屏幕上没有需要盯着看的演示,听清那三件事和四步顺序就够。▶ 跳到 14:18