Google 工程师现场拆解 AI 实时生成界面的四层落地路线，演示与踩坑同样坦诚
Design for the future of apps ft. Craig Labenz (Google) | Config 2026 · Craig Labenz
全片 20 分钟·真正值得盯屏约 10 分钟·3 个必看点
- 0:11 – 3:50看
Gen Latte：为什么需要 Gen UI
从 Cloud Next 与 I/O 上的 Gen Latte 演示切入：用户与 Gemini、Nano Banana 共创图像并印上拿铁；Gemini 预生成的追问混杂多选、滑块、开放文本，暴露出“一种控件走天下”的不可行。
Gen UI 的动机是让智能体用临时生成的界面取代没人想读的文字墙
77s 和 201s 两处被判定为值得看的画面：拿铁打印实拍和多题型作答界面，是理解全片动机的视觉锚点▶ 跳到 0:11 - 3:50 – 7:13听
A2UI 协议与 Gen UI 的定义
正式给出 Gen UI 的定义，并介绍 Google 为智能体到界面通信制定的 A2UI（Agent to User Interface）协议，资料可在 A2UI.org 查阅。
A2UI 是把“AI 决定展示什么”标准化为 UI 指令下发的开放协议
本段以口头定义和协议介绍为主，章节无视觉依赖，记下 A2UI.org 即可▶ 跳到 3:50 - 7:13 – 10:40听
四层采用谱系
提出 Level 0/1 确定性 UI、Level 2 AI 驱动服务端 UI、Level 3 AI 接管的四层框架，并给出统一心智模型：每个屏幕都是客户端与服务端围绕用户意图的对话触点，委托给运行时 AI 的问题越多走得越深。
Gen UI 不是有或没有的布尔属性，而是可按需上下调节的谱系
纯概念论述、无视觉依赖标记，框架本身靠听即可完整吸收，适合通勤场景▶ 跳到 7:13 - 10:40 – 13:00看
Level 2 的排版代价
动态内容让文案长度、选项数量都不可预知，H1 级标题被省略号截断会让界面显得“坏掉了”；Gen Latte 只能在影子画布上预排版、逐像素测量文本再迭代缩小字号。
消灭意外省略号的代价是组件复杂度剧增和字号不稳定，这类取舍必须有设计师参与
641s 与 709s 两处视觉时刻展示截断翻车与影子画布测量方案，看画面比听描述直观得多▶ 跳到 10:40 - 13:00 – 14:19听
Level 3：AI 接管界面与状态
Level 3 把界面自由度和完整应用状态都交给 AI：用户点按钮时前端可能没有任何本地代码，AI 在生成按钮时已为其配好服务端动作，前端只负责把交互回传智能体。
Level 3 的按钮本质上是 AI 预先绑定好的工具调用
本段是进入 Hatcha 演示前的口头铺垫，无视觉时刻，理解概念即可▶ 跳到 13:00 - 14:19 – 17:59看
Hatcha 演示与组件粒度取舍
Flutter 团队的 Hatcha 让 Gemini 玩即兴 20 问直至凑齐活动提案所需信息，界面构成与状态全由 AI 现场决定；随后剖析核心取舍——给 AI 粗粒度智能组件换一致性，还是交出细粒度设计系统换创造力。
组件目录粒度是 Gen UI 最核心的设计决策：一致性与创造力不可兼得
863s 起的 Hatcha 演示被标记为值得抽帧的画面，行为驱动的单屏合成与缓存 A2UI 输出的思路也在此段展开▶ 跳到 14:19 - 18:02 – 19:41听
总结：端侧模型化解代价
承认 Level 3 让几乎每次交互都变成需要 LLM 推理的网络请求（更慢且按 token 付费），但端侧模型 Gemma 4 已能在高性能笔记本上驱动 Gen UI，几年内有望在手机流畅运行。
延迟与 token 成本是当下短板而非长期宿命，端侧推理是解法
收尾展望以口头论述为主、无视觉依赖，适合边听边消化前面的框架▶ 跳到 18:02