生成式 UI：AI 时代体验技术生产新范式
在智能化产品的冲击下，用户总是希望获取更准确、丰富的信息，渴望更定制化的交互体验。我们提出了 AI 时代下新的体验技术解决方案——生成式 UI。它能自动生成符合设计规范的 UI 界面，将信息自动组装呈现给不同的用户，让前端开发不再受制于繁琐的设计研发流程、让展示内容不再千篇一律、让用户体验随需而变。
支付宝体验技术部黄兆嵩（山糕）在第 19 届 D2 终端技术大会发表了主题为《AI 时代体验技术新范式：生成式 UI》的演讲。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
引子
近几年，AI 技术的迅猛发展已经深刻影响了我们的生活和工作方式。研发领域中：“前端是否会消失？”这个话题的讨论大概始于 2022 年 GPT-3.5 的发布，从最初的质疑 AI，到逐渐认识到 AI 能够帮助我们完成各种任务，再到如今被 Claude 3.7 等先进 AI 模型所生成的内容所震撼，我们正经历着一场前所未有的技术变革。
可以说，目前 AI 已经彻底“颠覆了传统的设计和工程逻辑。”
曾经的问句，正在逐渐转变为“前端程序员消失ing，应该如何适应 AI 时代？”
我们团队的产品经理就是一个深度的 AI 使用者，来看看他平常工作的一个缩影：
刷新 
Deepseek 评价这一过程为：“那一抹灵动跃入绚丽星河，编织出 UI 美学之舞。实在是优雅。”
困境犹在：自动化生产
虽然 AI 能够生成令人惊艳的效果，但
目前 AI 生成的产物，到实际上线发布的过程中，仍然充斥着大量的人工干预。 此外，当前的生产链路本质上还是由生产者针对特定场景而定制的界面，并未真正实现数据驱动的“千人千面”的自动化生产。
我们团队的目标
真正解放生产者的双手，让 AI 成为生产的执行者，而人则作为监督者，专注于把控产品质量。从而实现 UI 的自动化生产和自动化投放。
为了实现这样一个目标，我们主要针对三个关键问题展开工作：
- 自动化生产链路：设计并实现自动化的 UI 生产链路；
- 生成定制化 UI：允许自动化生产的界面中包含产品独特的设计风格和业务逻辑；
- 运行时 UI 生成方案：解决线上 UI 生成带来的用户等待时间过长，耗费显卡资源过多等问题。
一、自动化生产链路
效果
Prompt 设计
实现自动化生产链路的核心是通过 Prompt：
- 规范 UI 生产的工作流程和遵循的规则，
- 明确 AI 的输出格式
图中的 Prompt 以 DSL（领域特定语言）输出格式为例，展示了 Prompt 设计的基础架构。
值得注意的是，DSL 并非唯一选择，您可以根据需求灵活替换为 Markdown、XML 或其他结构化格式，以满足不同场景的输出需求。
复杂任务的拆解：面对生成 UI 这一复杂任务，我们可以采用多 Agent 协作的解决方案。通过将任务拆解为数据拆分、界面布局和代码生成等多个子任务，分别由不同的 Agent 完成。
灵活适配的模型选择：得益于多 Agent 架构，我们可以根据任务的复杂度和模型的特点，灵活选择最适合的模型。例如，对于数据拆分这类相对简单的任务，7B 小模型即可快速输出结果，确保高效执行；而对于更复杂的任务，则可以选择更强大的模型来保证输出质量。
数据参考
在 UI 生成过程中，告诉 AIUI 需要展示什么数据是至关重要的核心。
UI 的首要目标之一就是将数据以最直观的方式呈现给用户。
然而，在数据拼接的过程中，过长或不规则的数据往往会引发各种问题。
事实上，生成 UI 时，并不需要了解所有数据的细节——我们只需要抓住数据的本质特征。
例如，对于一个包含数字数组数据，设计师可以通过以下规则进行可视化设计：
如果数组长度小于 10，用条形图展示；
如果数组长度大于 10，用折线图展示；
如果数据名称与股票相关，则使用红绿金融图展示。
在我们的链路中，对于需要展示的数据，我们会首先计算出一个描述数据特征的 JSON 字符串。
数据特征包括数据的结构、字段名称、类型以及统计信息（如数组长度、字符串长度、数字方差等）。
通过数据参考，AI 就可以决策在 UI 界面中，组件属性需要绑定的数据字段。
设计参考
UI 生产时，设计师或产品经理通常会希望能够提供设计/风格参考。
如果生成所用的 LLM 支持多模态输入，那么可以直接将参考图片放入提示词中。
如果所用的 LLM 不支持多模态输入，或者希望有精度更高的UI信息作为参考。
我们通过 8000 张人工标注的 UI 数据集，训练并实现了一套视觉 AI 模块，并提供了对应的 UI 理解增强方案。通过这套方案，能够精准、快速地识别 UI 图片中每一个组件的嵌套关系、位置、大小、类型、内容以及样式：
识别的结果，以 JSON 格式的形式拼入整个 UI 生成链路中，确保设计参考的每个细节都能被准确还原和应用：
小结
至此，我们实现了最简版本的生成试炼路，实现数据驱动的 UI 自动生产。
二、生成定制化 UI
满足多样化业务需求
在实际落地场景中，每个产品都有其独特的设计风格、样式规范和业务逻辑。需要提供定制化能力，让生成的 UI 更贴合业务场景。
定制样式与风格
UI 的风格和样式是品牌形象的重要组成部分。我们支持：
布局结构定制：
用户可以在 Prompt 中通过自然语言或 JSON 格式的布局参考来定义生成卡片的布局。我们也内置了多套设计布局模板，满足不同业务快速上线的需求。
设计 Token 支持：
我们定义了一套 UI 设计 Token，为样式风格的定制提供支持。生成 UI 时，大模型挑选并决策用哪种类型的字号对文字进行渲染。从而确保 UI 的一致性，同时赋予业务方足够的灵活性。
例如，通过规定了四种类型的字号（大、中、小和 mini），来规范界面中字体大小的统一，而具体的字号数值由业务方定制：大：22px、中：16px、小：14px、mini：12px。
定制复杂设计与业务逻辑
每个业务往往都有其独特的设计理念和业务流程。AI 很难生成这部分内容，因此我们允许用户在生成链路中接入自己生产的自定义组件。
组件接入
类似 function call 的方式，我们希望AI模型能够准确理解组件的属性定义及使用方法，并基于这些信息组装界面。因此，业务方需要发布并描述自定义组件。说明组件怎么用，属性含义和更多详细信息。
自定义组件可以封装特定的业务交互逻辑、视觉效果和动画设计，模型无需感知。
组件使用
此外我们需要开发多套渲染器，确保生成的内容能够在不同投放场景（如端、Web、小程序等平台）消费。
针对相同的数据，使用不同的设计风格和自定义组件，可以生成不同风格的 UI：
组件生成
AI 能不能够帮助我们生成组件？
我们允许用户将生成界面中的区块保存成可用的组件，定义该组件的可变属性和用法，并应用到生成 UI 的链路中允许模型复用这个区块。
流式渲染效果
传统的生成式 UI 通常采用同步渲染模式，需要等待所有上游数据就绪后才开始界面生成。这种方式在智能体应用场景下可能导致较长的等待时间，影响用户体验。
我们提出了一种渐进式 UI 渲染方案：
自动识别并生成数据图表 格式化展示列表内容
规则化渲染特定标签（数字、金额、时间等） 关键信息高亮处理
效果如下：
| |
小结
通过设计风格的定制和自定义组件接入实现了：
AI 生成的通用性：保持基础生成能力的普适性 业务表达的精确性：准确展现产品特性和业务逻辑
在渲染层面，我们提供了以下核心能力：
组件动态加载：按需加载所需组件 区块组件化：支持将指定 UI 区块保存为可复用组件 标准化输出：规范 UI 产物的格式规范，便于跨平台使用
这样的架构设计既保证了系统的扩展性，又提供了良好的开发体验。
三、运行时 UI 生成方案
想象一下，如果每次用户请求都实时生成 UI，不仅会导致较长的等待时间，还会造成大量计算资源的浪费。为此，我们设计了一套高效的运行时 UI 生成方案，核心思路是：为数据特征相似的用户群体复用相同的界面模板。
具体实现包括以下几个关键部分：
一级缓存：完全匹配，当用户数据与仓库中某 UI 模板数据完全一致时直接返回该 UI 模板； 二级缓存：相似匹配，基于数据特征相似度选择最适合的 UI 模板； 三级缓存：兜底方案，当无合适模板时返回默认界面。
这套方案实现了 UI 生产与消费的分离。用户请求直接从 UI 仓库获取界面，确保响应速度。UI 生成过程与线上服务解耦，避免资源竞争。同时支持人工监管，对模板投放进行质量控制。
既保证了用户体验，又实现了计算资源的高效利用，同时保持了足够的灵活性和可控性。
四、总结
生成式 UI 的发展脉络
生成式 UI 的发展经历了三个关键阶段：
- 初始阶段-指令理解：基于 AI 的自然语言理解能力，实现低代码/无代码搭建平台中 UI 元素的属性调整；
- 进阶阶段-千人千面：随着 AI 能力的提升， 我们希望用户数据不同时，能够看到不同的 UI 界面。 实现基于用户数据的动态UI渲染，使界面展示更具个性化和适应性；
- 范式转变-生产模式的变革：当前阶段，由于生产成本的显著降低和输出质量的大幅提升，生成式UI正在重塑前端开发的生产模式，形成新的技术范式。
生成内容的讨论
目前，我们的 UI 开发链路中，组件主要包含三种：
- 原生组件
- 自定义组件：传统的人工开发组件
- 生成组件：AI 辅助生成的区块
虽然当前 AI 在复杂业务逻辑和专业设计方面还存在局限，但我们预见生成式组件将在未来 UI 开发中占据越来越重要的地位。
未来展望
我们的未来工作将主要聚焦于两个方向：
我们期望能够进一步提升生成式 UI 的应用效率和产出质量，为更多业务场景提供价值。欢迎交流！