TGUI-AIGC时代的GUI框架

1. 2026.03.24 阿里巴巴全球总部_访客中心中国杭州 HANGZHOU CHIA

2. TGUI-AIGC时代的 GUI 框架 TaoBao Generative UI：AI 时代 GUI 的框架探索

3. 主会场演讲嘉宾李健⺠（敬鸣）淘宝终端平台

4. 1背景 2TGUI 介绍 3未来与展望

5. 人机交互演进史 CLI CLI (命令行界面) GUI GUI (图形用户界面) LUI LUI / VUI (语言/语音用户界面) AIGUI AI GUI (AI 生成式界面) 交互范式：精确指令交互范式：直观操作交互范式：对话理解交互范式：动态创造说明：人机交互的起点,人类需要学习机器的语言，通过键盘输入精确的文本命令来控制计算机。说明：革命性的⻜跃。机器开始用图形来模拟现实世界（如桌面等）说明：随着自然语言处理技术的发展，机器开始能理解人类的自然语言。特点:人可以通过鼠标点击等直观动作来与数字对象互动。它极大地降低了计算机的使用⻔槛说明: 由大模型驱动的新纪元，机器不仅能理解你的意图，更能为你动态地 “创造”内容和界面特点：人可以通过自然语言的方式跟机器进行交互。特点：UI成为可以根据对话上下文、用户偏好实时生成、组合、甚至自我修正的动态体验特点：强大、高效，但⻔槛高

6. 若⻚面交互由AI驱动，GUI的底座该⻓什么样？

7. 业界的表达形式

8. 用 Markdown 构建 AI GUI 遇到的三大障碍功能鸿沟无法表达丰富的、可交互的UI组件，只能描述静态文本结构。体验断崖昂贵的修改 Markdown的全量渲染，与AI流式输出不和，导致输出的性能损耗和闪烁。无法局部更新，任何微调都需要对整个UI进行整体重绘。

9. TGUI 简介 TGUI（TaoBao Generative UI）核心目标是：赋予 AI 构建⻚面级 UI 以及交互的能力

10. 架构解析

11. 第一基石：为 AI 输出建立规则标准混乱确定我们的选择标准化的Markdown 解析结果不一100% 确定性解析渲染样式混乱AI 生成更稳定更可靠输出质量不可控视觉主题可定制

12. 第二基石：超越 Markdown，注入原生「微组件」通过扩展语法+自定义渲染如<img-bg>毛呢外套</img-bg>

13. 内联“微组件”够了吗？

14. 第二基石：超越 Markdown，组件化渲染 AI 输出代码块指令 ```product-card\n``` 组件渲染

15. 协议映射 # TGUI 协议规范 TGUI 支持标准 Markdown 语法与自定义组件的混合渲染，提供极致的原生体验。 - 原生渲染性能极致 - 支持流式动态更新 | 特性 | 支持度 | |----------|--------| | Markdown | 100% | | Patch | Full | ```productCard { "title": "双11 限定礼盒", "price": 299.00 } ```

16. 组件注册中心：让 AI 成为真正的"UI 编排师" AI 生成指令 → TGUI 框架 AI 输出 → ① ```product- card``` → TGUI 解析映射解析与映射识别 AI 生成指令组件查找调用 → 业务组件生态最终呈现 →→ ②③ 查找并调用商品卡片组件原生 UI 渲染渲染为原生UI 组件注册中心研发从"页面开发者"升级为"AI 可调度资产的创造者" 可交互的原生商品卡片 📱

17. 第三基石：拥抱 AI Stream

18. Committed / Pending 双态分离问题逐步输入示意大模型逐 Token 输出，如何高效解析？解法 T1 输入列表 List Committed 已提交区语法结构已完整闭合的文本前部解析结果锁定，不重新解析 ↓ T2 输入段落 List Paragraph ↓ Pending 待定区文本末尾的最后几个节点每次新 Token 到来时实时重新解析 T3 输入代码 List Committed Paragraph Pending Code

19. 滑动窗口机制滑动窗口示例（窗口大小 = 2）窗口大小策略随着 Token 输入，CommitPointer 不断右移，Pending 窗口始终固定大小小窗口（如 2）高性能 H1 P1 UL LI1 LI2 P2 Code … ⬇ Window ⬇ 解析范围更小，性能更优 T1 大窗口（如 4~6）高容错 ↓ ↑ CP ⬇ Window ⬇ T2 容忍更多未完成的语法结构 ↓ ↑ CP ⬇ Window ⬇ T3 自适应窗口根据当前节点类型动态调整智能 ↑ CP ↓ ⬇ Window ⬇ T4 ↑ CP ↓ ⬇ Window ⬇ T5 ↑ CP Committed Pending 未到达

20. 滑动窗口：从 O(N²) 到 O(N) 解析耗时 vs 文本长度传统方案全量重解析 100字→解析100字 / 10000字→解析10000字越写越卡，体验断崖式下降全量解析 O(n²) 解析耗时 TGUI 差距滑动窗口解析 100字→解析~50字 / 10000字→解析~50字 TGUI O(n) 始终流畅，与文档长度无关文本长度

21. 异步渲染流水线 ① Token 流入 ③ 轻量级异步 Diﬀ ② 增量解析 → 大模型逐 Token 输出 Markdown 滑动窗口解析 Committed + Pending → 非阻塞后台线程计算新旧列表差异、增量渲染 ④ 主线程调度 → 执行 Insert / Update / Remove 顺序保证 ⑤ 用户看到 → 平滑打字机效果无闪烁最小化更新 60 FPS0< 2%O(1) 长文本闪烁次数CPU 增量单次解析复杂度

22. Token 预测：消除闪烁问题：代码块的身份危机 ① 收到 ` ` ② ③ 收到 ``` 解析为普通文本判断为代码块收到 ```product-card``` 识别为组件用户看到：文本 → 代码块 → 组件，连续闪烁 3 次解法：先缓存，后裁决 1遇到 \n`进入预测 2暂存到缓冲区 3整行完毕统一提交

23. 流式语法补全不处理补全处理后粗体 **粗体 → *斜体 [淘宝](https://ww 核心原则：只读不写（虚拟补全）斜体淘宝

24. 流式预测状态机 IDLE | * / _ EMPHASIS 1→2→3 ── ① 补全闭合标记识别语法标记，进入对应状态 ↩ IDLE ↓ ` ` ` FENCED_CODE ── [ text ](──LINK # / - / =──HEADING / LIST 裁剪代码围栏文本 ↩ IDLE 截剪为纯文本↩ IDLE 保持原样↩ IDLE ② ↓ ③ **加粗 → 补全闭合标记 **加粗** ```jav → 缓存裁剪代码围栏逐字符判断：升级、闭合或保持根据当前状态，应用策略 [链接](url → 截剪为纯文本链接

25. TGUI 流式协议：从一次性文本流到动态可编辑画布 TGUI 流式协议原生流式线性单向，不可逆已输出的内容无法回头修改、删除或重排⻚面是一张只读胶片 → 赋予 AI 可编辑画布 AI 可追加、可替换、删除、移动，⻚面变成可编辑画布支持的操作类型 Add添加元素Move移动内容（先 remove 再 add） Append追加内容Copy复制内容到新路径 Remove删除指定路径的内容ReplaceSubstr 子串替换 Replace替换指定路径的值

26. AI 作为"UI 画家"的工作流 "这是第一句话" → "这是第二句【错误】" 用户看到一半的内容突然中断。发现错误？只能关掉整个"水龙头"。 ↓ 转变 1. 画布初始状态 2. AI 创作第一句 → 3. AI 创作第二句 (不完美) → “这是第一句话。” 4. AI 发出“修正指令” → “这是第一句话。”“这是第一句话。” “第二句写错了。”“第二句现在对了。”

27. 还需要什么？

28. 端侧MCP——让大模型直接参与UI 交互从意图到操作的跃迁我们的目标：让大模型成为 App 的“操盘手”。 Agent 指令反馈 • 痛点: 用户的意图必须手动完成 MCP 通道观测执行端侧 Tools • MCP 架构：大脑、手眼与神经 • 大脑 (云端 Agent): LLM 负责思考与规划。 • 手眼 (端侧 MCP Tools): 封装的原生原子能力。 • 神经 (MCP 通道): 双向的指令与观测通道。

29. 端侧 MCP —— 大模型直接参与 UI 交互用户自然语言指令 → Agent 理解规划 → MCP 协议调度端侧能力 → 自动执行并反馈 ① ② 👤 ③ 🤖 ④ 🔗 📱 用户AgentMCP 通道端侧执行发出指令云端 · 大模型驱动端云通信协议Client-Side "如何关闭视频自动播放" → 理解用户意图分解为原子任务 → ↓ 下行：指令分发 ↑ 上行：结果回传生成工具调用指令 ⟵ 结果反馈 · Agent 决策闭环 ⟵ → MCP Tools 解析指令调用原子能力执行 UI 操作

30. 大模型幻觉的容错处理方案一：降级方案二：流式修复当 AI 指令错误，无法解析时…当 AI 流式输出的内容需要修正时… 【错误指令】比如拼写错误"...价格是 [计算中...]" ↓↓ 【安全模式】跳过或替换为占位符"...价格是 ¥999" 核心价值：保障程序永不崩溃及 UI 可读性核心价值：提供无感、流畅的体验通过「降级」与「流式修复」，为不确定的 AI 输出，提供了确定的用户体验

31. TGUI效果示例通过大模型输出⻚面大模型自主完成交互行为

32. UI 生产流程的变化与未来展望传统模式机器领域 ① ↓ ② ↓ ③ ↓ ④ ↓ ⑤ 产品规划终端设备 PM → PRD渲染 & 呈现视觉交互设计设计师 → 设计稿前后端开发工程师 → 代码 AI 驱动 ⇨ 人类领域 — 定义边界与指挥转型研发/设计产品/运营用户原子化组件Prompt 指挥实时指令终端呈现用户 → 反馈监控与迭代 AI 领域 — 理解与创造大语言模型数据 → 迭代理解意图 → 编排 UI 研发模式产运协同角色转变提效方式全新定义 UI 实现者 → AI 赋能者Prompt 指挥 AI 生成 UI超越千人千面，意愿驱动的界面工作核心敏捷迭代交互方式开发高质量、AI 可调用的原子化组件实现小时级 A/B 测试支持语音定制页面内容未来展望用户体验

33. 当前面临的挑战 AI 对⻬之困组件生态之贫团队心智之变 Prompt 工程：持续迭代，精确约束AI-Friendly 组件体系：沉淀最佳实践重塑研发流程：定义新的协作模式模型微调：注入领域知识与规范完善工具链：降低接入与开发成本建立设计新范式：面向 AI 的组件设计校验修复层：构建最后的防线开放与共建：鼓励生态繁荣布道与赋能：推动组织认知变化

34. THANKS