生成式 UI 护栏：在不破坏设计系统的情况下进行设计
当人工智能动态构建界面时，用户体验如何变化，以及如何构建组件、令牌和检查，以便生成的 UI 保持可访问性和品牌形象。
核心要点
生成式 UI 意味着人工智能模型为每个请求组装部分界面。为了保持其可用性，让模型从批准的组件目录中进行选择，而不是编写原始样式，向其传递您的设计标记，在渲染之前验证其输出（对比度、类型比例、焦点顺序、减少运动），并在生成的区域周围保留固定的导航框架和控件。
从固定布局到意图设计
在固定的布局中，设计师提前决定了每个屏幕。通过生成式 UI，AI 模型可以决定针对特定请求显示哪个界面。谷歌将生成式 UI 描述为一种不仅生成内容而且生成完整体验的模型，现在它在 Gemini 应用程序和 Google 搜索中的 AI 模式中进行了基于此的实验。在开发者工具中，Vercel AI SDK 描述了一个更简单的版本：模型调用工具，该工具调用的结果呈现为 React 组件。
用户体验发生了什么变化
设计师不再绘制每个屏幕，而是开始设计规则：存在哪些组件、每个组件何时合适以及什么永远不能改变。生成的内容周围的框架，例如导航、输入、撤消和设置，应该保持固定，这样人们就不会迷失自己的位置。生成的区域应该清晰标记，人们应该能够切换到简单的、可预测的视图。
Guardrail 1：经批准的组件目录
最安全的模式是让模型选择并填充组件，而不是发明它们。 A2UI 是 Google 创建的开放协议，其工作方式如下：代理发送声明性组件描述，客户端使用自己的本机小部件呈现它们，而无需从代理运行任意代码。您的目录可以很小：表格、卡片、图表、表格、列表，每个都由您的团队构建和测试。
Guardrail 2：用代币代替原始值
给出模型语义标记，例如 color.text.primary 或 space.4，并拒绝使用原始十六进制值或任意字体大小的输出。这可以保持系统内部的对比度、排版和间距，并且深色模式或高对比度等主题可以自动运行。
Guardrail 3：渲染前验证
在显示生成的输出之前运行自动检查：存在必填字段、颜色对比度、标题顺序、输入标签、焦点顺序、触摸目标大小和简化运动支持。如果检查失败，则返回到简单的、已知良好的布局，而不是显示损坏的 UI。
- 模式验证：仅已知组件和属性
- 辅助功能：对比、标签、角色、焦点顺序
- 内容限制：最大项目数、文本长度、图像大小
- 后备：验证失败时的简单列表或文本答案
要记住的关键 Principle
- 生成式 UI = 模型为每个请求组装界面
- 在生成的区域周围保留固定框架（导航、输入、撤消）
- 让模型从批准的目录中进行选择，而不是编写原始 UI
- 传递语义标记并拒绝原始值
- 在渲染之前验证可访问性并保留后备
常见问题解答
来源
- Generative UI: A rich, custom, visual interactive user experience for any prompt — 谷歌研究
- A2UI: A Protocol for Agent-Driven Interfaces — a2ui.org
- Generative User Interfaces — Vercel AI SDK 文档
- Design tokens overview — Material Design 3