什么是生成式界面?

生成式界面 (GenUI) 将数字设计从静态的预渲染模板转变为实时构建的动态界面。开发者无需对每种可能的状态进行硬编码,而是由大语言模型 (LLM) 来编排界面,根据具体的用户意图和会话上下文调整布局、组件和数据可视化。

实际上,界面充当灵活的编排层。它可以即时重新配置信息中心,或生成一个功能性迷你应用来处理静态界面无法预料的特定请求。

观看 Google Cloud Next '26 大会 - 适用于任何智能体、任何位置的生成式界面:A2UI、AG-UI、MCP 应用等

要点总结

  • 定义:生成式界面是一种前端架构,其中界面由 AI 实时创建,而不是由开发者硬编码。
  • 运作方式:生成式界面使用 LLM 等高级 AI 模型,通过考虑用户行为、情境和意图,实时构建、更改和改进界面布局。
  • 重要意义:有助于改善和个性化用户体验。还可以让 AI 自动创建和调整界面的一部分,从而大幅缩短开发周期。

生成式界面为何重要?

早期将 LLM 集成到应用中时,经常会遇到“文本墙问题”。虽然模型可以推理、规划和执行复杂的任务,但它们通常会将输出内容折叠成长段落或标准 Markdown。生成式用户界面通过允许功能强大的 LLM 的自然界面成为完整、功能齐全且互动式的用户体验来解决此问题。

  • 改善用户体验:实证评估表明,与被动文本输出、传统搜索结果或标准 Markdown 相比,人类用户更喜欢生成的互动式体验。
  • 高度个性化:界面可以从一开始就根据用户的个人行为和偏好进行专门定制,这对于传统的固定代码方法来说是非常不切实际的。
  • 缩短开发周期:通过实时自动创建和调整界面组件,GenUI 可以显著加快开发速度,从而缩短上市期并降低前端维护开销。
  • 架构可伸缩性:传统方法要求针对每个新的用户场景手动更新前端。GenUI 可让界面适应极端情况,无需不断手动调整 CSS/组件。

生成式界面谱系:控制与灵活性

生成式界面不是单一的技术,而是一系列实现策略。具体选择哪种方式取决于您对品牌安全保障的要求。

方法

运作方式

注意事项

静态生成式界面

智能体从一个固定的手工构建组件库中进行选择。

更高的控制权:保证品牌一致性和安全性;视觉灵活性受限。

声明式 GenUI

智能体返回一个结构化架构(如 JSON),用于表示界面元素(卡片、列表、微件)。

平衡:可很好地进行扩缩并保持一致性,同时为智能体提供表达能力。

开放式生成式界面

智能体生成在前端呈现的原始代码 (HTML/CSS)。

灵活性最高:创意不受限制,但会带来严重的安全 (XSS) 和样式风险。

方法

运作方式

注意事项

静态生成式界面

智能体从一个固定的手工构建组件库中进行选择。

更高的控制权:保证品牌一致性和安全性;视觉灵活性受限。

声明式 GenUI

智能体返回一个结构化架构(如 JSON),用于表示界面元素(卡片、列表、微件)。

平衡:可很好地进行扩缩并保持一致性,同时为智能体提供表达能力。

开放式生成式界面

智能体生成在前端呈现的原始代码 (HTML/CSS)。

灵活性最高:创意不受限制,但会带来严重的安全 (XSS) 和样式风险。

领先的框架和协议

用于构建智能体赋能的界面的生态系统正在快速发展,出现了几个不同的框架来处理界面的传输和渲染。

A2UI 是 Google 设计的开源界面工具包,旨在促进跨信任边界的 LLM 生成的界面。它使用高度安全的声明性 JSON 行 (JSONL) 流,将界面结构和数据模型从任何智能体发送到任何客户端应用。由于 A2UI 传输的是声明性数据而非可执行代码,因此它本质上是安全的,并且与框架无关,允许在 Web、Flutter、Android 和 iOS 上以原生方式呈现相同的智能体输出。智能体可以为任何现有设计系统“转译”用户界面。

AG-UI 是一种通用的双向连接协议,位于智能体前端和智能体后端之间。它由 CopilotKit 开发,可处理复杂的状态同步,并无缝支持各种生成式界面规范,充当桥梁,将智能体输出转换为丰富的互动式前端组件。

MCP 应用是一种 Model Context Protocol 界面扩展程序,可将界面视为智能体工具可以返回的互动式“资源”。MCP 服务器可以构建并返回界面组件,作为在沙盒 iframe 中呈现的 HTML,允许第三方服务在任何符合要求的智能体中保持其独特的视觉标识。

迁移到生产环境的操作注意事项

要将 GenUI 从原型转变为生产环境,需要考虑以下四个重要考虑因素:

1. 建立信任边界(安全性)

为防止界面注入(即提示注入迫使模型呈现恶意代码),请考虑采用最小权限界面模型。A2UI 等协议传输的是数据,而不是代码,并且客户端应仅渲染经过预先批准和审核的组件。

2. 测试意图而非表象

对于生成式界面的非确定性界面,传统的视觉回归测试更容易失败。测试应转向概率性断言,以验证意图和功能组件(例如特定按钮)是否存在且可互动,而无需考虑其确切位置。

3. 管理延迟时间开销(性能)

增加推理步骤会影响 Time to Interactive (TTI)。为了保持响应速度,请考虑实现流式界面更新,例如使用 JSONL 立即开始渲染,以及使用基于矢量的缓存为类似查询提供之前生成的界面结构(语义缓存)。

4. 自动无障碍功能 (A11y)

动态界面必须符合 WCAG 标准。通过将无障碍要求构建到基础 JSON 架构中,使用架构驱动型无障碍功能。然后,渲染引擎可以根据所请求的组件类型自动注入所需的 ARIA 标签和角色。

实施决策框架

因素

传统界面

生成式界面

开发速度

手动 sprint 周期

按需生成

用户体验一致性

较高(僵化的设计系统)

变量(情境适应)

安全风险

较低(静态代码审核)

较高(需要严格的沙盒)

主要应用场景

核心工作流和设置

数据发现和复杂查询

因素

传统界面

生成式界面

开发速度

手动 sprint 周期

按需生成

用户体验一致性

较高(僵化的设计系统)

变量(情境适应)

安全风险

较低(静态代码审核)

较高(需要严格的沙盒)

主要应用场景

核心工作流和设置

数据发现和复杂查询

迈出下一步

获享 $300 赠金以及 20 多种提供“始终免费”用量的产品,开始在 Google Cloud 上构建项目。