本文整理自 QCon 北京 2026 邓小红分享《生成式UI工程实践》，通过AI音视频总结工具 Ai好记（aihaoji.com） 进行转录整理，以下为视频转文字整理后的会议笔记内容。
AI搜索跟传统搜索最大的区别是：用户用自然语言提需求，大模型调度生产内容，最后呈现一个动态的交互界面。
这个「动态界面」怎么来？它不是前端写死的，而是由模型在推理过程中实时生成的。
背景：UI正在成为模型生成的一部分
传统的搜索界面是固定的：一个搜索框加一个结果列表。
AI搜索的界面是动态的——用户问一句话，模型不仅要回答内容，还要决定用什么形式呈现。是列表？是表格？是卡片？是图文混排？甚至要不要加按钮让用户进一步操作？
这带来了两个核心问题：
- 怎么用协议描述动态UI——模型生成的内容需要有「格式说明书」
- 怎么规模化生成动态UI——不是写一个组件处理一个场景，而是建立一套体系
方案一：Markdown扩展协议（Marklang）
从标准Markdown起步，经历了从「简单加颜色加按钮」到「需要系统和结构化的组件抽象」的演进过程。
技术选型
选型考虑了规范稳定性和搜索场景兼容性，最终确定为GFM（GitHub Flavored Markdown）规范加remark生态。核心原因：GFM对常用语法原生的支持最好，remark生态成熟可扩展。
协议抽象的3个核心思路
1. 选定基础规范：基于GFM，加入表格、列表等扩展特征。
2. 确定扩展形态——Directive扩展：由name（是什么）+ content（有什么）+ atts（什么特征）组成。具体到Markdown里分为三类：
- 内联指令：以单个冒号起始，
:ML key=value - 块级指令：以双冒号起始
- 容器指令：以三个冒号起始和结束，内部包含固定数据容器
3. 语义分层：内容层（GFM原生Markdown语法）→ 扩展层（Directive）→ 渲染层（组件映射），各层职责清晰。
从协议到渲染的实现链路
Markdown DSL → Unified语法树处理 → remark扩展转换为mdast → RemarkRehype转hast → HTML处理 → 序列化 → 组件映射 → SSR/CSR两种渲染方式 → 流式渲染上屏。
核心设计原则：「Markdown DSL是中间层，组件是最终的渲染目标，Markdown扩展协议最终可以映射到具体组件实现」。
组件系统的两层设计
底层用Ikit原子组件设计语言做规范统一。布局、定位、边距、边框、排版等原子设计语言，再到导航、内容形态、输入、反馈等原子集组件。目标是跨端一致性。
上层由Ikit承载业务逻辑，进行结构拆解和组件化抽象，不断积累形成多领域业务组件和主题库，最后规范统一提供多种渲染方式。
方案二：JSON结构化协议（IJSON）
Markdown扩展协议适合内容为主的场景，遇到需要聚合不同行业信息、数据结构差异大的场景就需要另一种方案。
协议构成
IJSON由两部分组成：UISchema负责描述UI的结构（节点类型、节点描述、层级关系、逻辑控制、事件交互行为），DataModel层负责描述渲染所需的静态值和上下文变量。DataModel的值支持分段传输，适合流式渲染。
能力分层
| 层级 | 功能 |
|---|---|
| 基础静态UI | 无动态值的协议，固定的卡片/列表 |
| 动态数据UI | 有动态值的协议，数据由模型推理注入 |
| 扩展数据UI | 含内部扩展数据的协议，支持scope |
| 逻辑交互UI | 节点之间可以交互联动，事件驱动 |
双协议对比：什么时候用哪个
| 维度 | Markdown扩展协议 | JSON结构化协议 |
|---|---|---|
| 协议定位 | 内容优先，文本增强Directive | 结构优先，Schema+Data |
| 结构模型 | 弱结构，内容局部指令 | 树结构，组件嵌套作用域 |
| 表达能力 | 中：文本为主扩展组件 | 高：任意组件树+逻辑控制+交互行为 |
| 流式友好 | 天生适合流式输出 | 分段传输DataModel |
| 学习成本 | 低，会Markdown就能用 | 高，需要理解Schema |
| SEO友好 | 高，原文即内容 | 低，需要额外处理 |
实际使用时两者并不是互斥的，可以根据内容类型混合使用。文本为主的内容走Markdown扩展协议，结构化数据为主的内容走JSON协议。
性能治理
扩展协议带来丰富能力的同时，也叠加了多层运行开销。百度团队识别出四个性能瓶颈：
- 插件体积过大
- 加载时机过早造成浪费
- 流式渲染开销
- AST操作频繁
对应的解决方案：按需加载缓存复用、增量更新渲染隔离、提供SSR hydrate方案保整体性能。
这套方案适合什么场景
- 正在做AI搜索或对话式UI的产品，需要动态生成页面内容
- 大模型应用开发团队，模型输出需要以丰富的UI形式呈现
- 前端架构师，关注组件抽象和跨端一致性的方案设计
常见问题
Q：Markdown扩展协议会污染原始内容吗？ A：不会。Directive是以注释形式嵌入的，不影响Markdown本身的可读性和SEO。
Q：JSON协议和Markdown协议怎么共存？ A：在渲染层做协议识别，内容优先动态解析，结构数据优先走JSON通道。两者可以混合在同一个页面中。
Q：这种方案只适合搜索场景吗？ A：核心思路通用。任何需要大模型实时生成UI的场景都可以参考。
Q：渲染性能怎么保证？ A：关键是按需加载和增量更新。不要在初始化阶段把所有插件都加载上，根据实际输出内容动态加载。
以上内容由 Ai好记 转录整理。
Ai好记 是一款音视频转图文笔记的AI音视频转录总结工具，支持解析B站、抖音、小红书、小宇宙等平台链接及本地/网盘音视频文件，转录后自动视频转文字生成精华速览、思维导图和结构化笔记等内容形式，帮助你把几小时的视频内容变成可搜索、可复习的图文笔记。
