生成式用户界面设计：2026 年实用手册

您在 2026 年推出的界面可能要等到用户提出需求后才会出现。这就是生成式 UI 背后的理念，它改变了设计的本质。

本文是生成式 UI 的实用手册。它定义了该术语，列出了目前已投入生产的四种架构，提供了一套模式词汇表，逐一指出了各种故障模式，并为希望保持竞争力的设计师们制定了新的工作职责。本文的观点并非空穴来风。

炒作周期已经催生了太多厂商的宣传页面。设计师们现在真正需要的是能够经受住下一次模型更新考验的原则。

生成式 UI 的本质

生成式 UI 是一种能够在运行时根据用户意图自动组装的界面。该系统包含一个基本元素词汇表、一个知道如何组合这些元素的模型，以及一个规定哪些组合是允许的契约。用户可以通过输入、语音或点击等方式进行操作。界面由此生成。

生成式 UI 的反面是我们过去二十年来一直沿用的设计模式：每个屏幕都是预先绘制好的静态组件，并以固定流程的形式交付。生成式 UI 并非取代静态屏幕，而是吸收了长尾元素。大多数产品中用户只想获得一个特定答案，并围绕该答案进行少量交互的乏味部分，将不再是站点地图中的路径，而是生成式界面。

一个有用的测试：如果两个用户提出的同一个问题可以合理地对应两种不同的布局，那么该界面就适合使用生成式 UI。如果答案始终是按日期排序的订单列表，则不适合。

为什么这件事要等到 2026 年而不是 2022 年才发生

三件事必须同时实现。模型必须足够强大，能够生成结构化的输出，从而调用工具并输出有效的组件树，而不是段落。框架必须提供一种方法，将这些组件树流式传输到正在运行的应用程序中。组件库必须发展成熟，形成模型能够理解的词汇表。

到 2026 年初，这三者都将成为现实。v0 版本会将组件集成到您的代码库中，这些组件已经与 shadcn 和您的 token 相匹配。Vercel AI SDK 允许您从服务器路由流式传输 React 组件，这些组件是在模型生成它们时产生的。Claude Artifacts 可以在聊天回合中渲染一个独立的交互式程序。

ChatGPT Canvas 将文档及其周围的 UI 视为一个可编辑的表面。Bolt 和 Same.new 可以根据提示生成正在运行的应用程序。Anthropic 的工具和 Cursor 的 Composer 允许代理访问结构化系统并生成与之交互的界面。

这些都不是同一个产品。它们证明了底层架构的最终存在，并且设计讨论可以从生成式 UI 是否有效转移到如何构建良好的生成式 UI 上来。

四种已投入生产环境的架构

大多数已投入生产环境的生成式 UI 都属于以下四种类型之一。慎重选择，因为选择会限制您的设计系统、评估方法和延迟预算。

1. **LLM渲染组件。**模型从代码库中固定的组件词汇表中选取组件，并生成一个类型化的树状结构。这是Vercel AI SDK模式。可预测、品牌一致、易于评估，但受限于库的丰富程度。

2. **结构化工具调用。**模型调用一个返回结构化数据的工具，并使用静态布局进行渲染。大多数聊天产品功能都采用这种方式，具有固定的界面和动态的内容。成本低、安全，但灵活性有限。

3. **按需生成代码。**模型编写代码来生成界面，其模式包括Claude Artifacts、v0、Bolt、Same.new 和ChatGPT Canvas（代码模式）。覆盖范围最广，风险最大，也最难保持品牌一致性和易用性。

4. 混合架构。 这是最有趣的类别，也是大多数严肃产品最终的归宿。它包含一个可靠的静态 UI 外壳、一套用于动态中间部分的 LLM 渲染组件词汇表，以及一个用于应对罕见自定义情况的代码生成器。

如果您不知道自己使用的是哪种架构，那么您就选错了。

如何选择

三个问题决定架构。

| 问题 | LLM 渲染 | 工具调用 | 代码生成 | 混合架构 |

|---|---|---|---|---|

| 品牌一致性是否至关重要？| 强 | 最强 | 弱 | 强 |

| 界面是否需要新颖的布局？| 有些 | 几乎不需要 | 是 | 是 |

| 能否容忍几秒钟的生成延迟？| 否 | 否 | 通常可以 | 混合架构 |

| 如果出错，哪个部分会首先崩溃？| 组合错误 |内容错误 | 代码错误 | 边界错误 |

对于大多数团队来说，LLM 渲染的组件是合适的默认选择。当界面真正是一次性的，例如自定义分析或临时搭建的原型，并且用户明白他们看到的是草稿时，代码生成就显得尤为重要。工具调用则用于处理布局已确定、只有数据动态变化的情况。混合方案则是在经过十二个月的生产流量后最终呈现的。

模式语言：设计师实际设计的内容

生成式 UI 并不会消除设计工作，而是转移设计工作。你交付的成果是一套词汇表，而不是一个屏幕。

一套有效的词汇表包含五个层次。

1. 基本组件：模型可以使用的基本组件。例如卡片、表格、图表、表单、列表、图像、标注、代码块。每个组件都需要模型能够满足的类型化属性。

2. 意图槽位。模型会根据用户意图填充已命名的区域，例如“摘要”、“证据”、“行动”和“后续行动”。槽位可以约束组合，但不会将其冻结。

3. 回退状态。每个基本元素都需要优雅的空状态、加载状态、部分状态和拒绝状态。模型会持续生成所有这四种状态。请将它们设计为一等公民。

4. 可恢复性功能。就地编辑、重新生成、“显示不同版本”和撤销。生成式界面就像对话，而对话需要一个返回按钮。

5. 引用和来源 UI。**数据来源、获取时间和系统置信度。如果没有这些信息，生成式 UI 看起来就像一个自信的骗子。有了这些信息，同样的输出看起来就诚实可靠。

如果设计师无法解释产品中词汇表每一层的具体内容，那么这套词汇表就还不存在，模型也只是在公开场合胡乱猜测。

意图槽位实践

意图槽位是大多数团队都会忽略，然后后悔莫及的部分。应该把它们看作是新的线框图。

槽位是一个已命名、已定义的区域，并规定了哪些内容可以放置于其中。“主要答案”可以接受标注、表格或图表，但绝不能是表单。“建议的下一步”可以接受一个按钮或一张包含一个行动号召 (CTA) 的卡片，但绝不能是长篇段落。

模型会在系统提示中了解槽位，就像你给初级设计师讲解一样。前端会将槽位渲染在一个稳定的布局网格中，这样即使内容每次都不同，界面看起来也像是一个统一的产品。

最终呈现的效果是一个精心设计的界面，只是内容会有所变化，而不是一个生成的混乱界面。这种区别才是制胜的关键。

你会遇到的故障模式以及如何应对

生成式 UI 的故障模式具有特定的、可重复的特点。现在就找出这些故障模式，否则你可能会在生产环境中再次遇到它们。

• 幻觉式 UI。 模型会生成一个没有任何功能的按钮、一个空标签页，或者一个它自己编造的数字图表。应对方法是：使用严格的组件契约，对每个生成的树进行服务器端验证，以及对任何未连接处理程序的控件设置禁用状态。

• 延迟恐惧。 用户盯着加载指示器，而模型却还在思考。可以先显示部分结果，在内容之前预留布局空间，并在数据加载完成之前展示模型的意图（例如“正在生成对比表”）。

• 无限画布陷阱。 代码生成的界面看起来似乎没有限制，最终却无法使用。限制画布的大小。提前向用户展示可能的输出类型。一个包含初始提示的网格总比一个空白的文本区域要好。

• 单一模型锁定。 为适应单一供应商的特性而定制的词汇表，一旦更换模型就会失效。编写任何合理的模型都能满足的组件契约，并在发布前至少针对两个供应商进行评估。

• 对话失忆。 界面会忘记它刚刚生成的内容。将生成的元素持久化为用户可以命名、保存、分享和返回的一等对象。ChatGPT Canvas 在这方面做得很好。大多数纯聊天产品都做错了。

能够交付可持续的生成式 UI 的团队，从一开始就将这些问题视为架构问题，而不是 QA 阶段需要修复的 bug。

如何评估生成式 UI 界面

你不能像评估静态页面那样评估生成式 UI 功能。输出不是单个元素，而是一个集合。

有效的评估包含三个层面。第一层是确定性评分标准，它会对每个生成的树状结构执行代码检查：模型是否只使用了允许的组件？是否满足了意图槽？是否在模式需要时包含了引用？是否存在任何控件在没有连接处理程序的情况下加载？

这些检查只有通过或失败两种结果。它们会在提示、组件或模型发生任何更改时运行。如果检查失败，界面将拒绝渲染并回退到安全状态。对待这些检查的方式应与后端团队对待集成测试的方式相同，在部署时具有相同的阻止权限。

第二层是抽样人工审核。一个小型评审小组（理想情况下包括品牌设计师和领域专家）每周根据五分制评分标准，对十到二十个生成的输出进行评分，评分标准包括语气、品牌契合度和实用性。

跟踪评分随时间的变化。如果评分下降，则说明存在回归问题。如果评分上升，则说明您所做的更改奏效了，您需要知道具体是什么更改。

第三层是产品内反馈。每个生成的界面都会附带一个“赞”、“踩”和一个自由文本评论。将反馈信号直接发送给拥有该词汇表的团队，而不是发送到一个无人问津的通用反馈收件箱。那些能够持续改进的生成式用户界面产品，其所有者会在前三个月认真阅读每一条评论。

如何规划生成式用户界面项目

大多数生成式用户界面项目失败的原因在于规划阶段，而非执行阶段。团队往往选择了一个过于重要、监管过于严格或过于复杂的界面，六周后，回滚方案却成了人工智能尚未准备就绪的借口。

理想的初始界面应具备三个特征：用户能够明显受益于个性化答案；如果生成失败，静态回退方案是可以接受的；错误的答案是可以恢复的，而不是灾难性的。

内部仪表盘、帮助中心答案和个性化分析摘要都符合这三个特征。而账户创建、支付授权和医疗建议则不符合其中任何一项。

将工作范围界定为词汇表发布，而不是功能发布。最终交付成果并非“生成的仪表盘将在第三季度发布”，而是“v1 词汇表、v1 评估套件以及 v1 生成的界面将在第三季度一同发布，之后任何产品中生成的 v2 界面都将使用相同的词汇表”。将词汇表视为平台投资。只有这样才能证明这项工作所需的系统设计投入是合理的。

设计师的新工作：词汇表、评估和意图

自响应式设计以来，生成式 UI 对设计师工作职责的改变最为显著。

工作单元从屏幕转向系统。设计师不再绘制每个状态，而是开始精心挑选构成模型的基本元素、槽位和回退方案。Figma 文件成为词汇表的参考，而非工作的最终目标。

规范变成了评估。生成式界面无法仅针对单个原型进行验收测试，因为相同的提示会产生多个有效的输出。

设计师们不再仅仅编写文档，而是编写评价标准：“结果必须包含引用，必须使用品牌图表调色板，必须提供后续行动建议，并且绝不能推荐竞争对手的产品。”这些评价标准会在每个模型版本发布时作为自动评估运行。设计质量变得可衡量。

文档变成了提示。描述模型应如何构建词汇表的系统提示现在成为了一种设计成果。它被版本化、审核，并且在许多产品中，它是团队编写的最重要的“设计文案”。

优秀产品在实际应用中的表现

以下是一些示例，旨在阐明这些原则，而非对其进行背书。

Vercel AI SDK 的生成式 UI 原语将组件视为类型化的词汇表，模型会将其流式传输到服务器渲染的路由中。其优势在于品牌一致性和可预测性。成本则由您编写的库控制。

Claude Artifacts 展示了在聊天过程中按需生成代码的功能，并支持持久化和就地编辑。它强调可恢复性，并采用了“工件即对象”的模式。它坦诚地表明自己只是一个草稿，而非最终产品。

ChatGPT Canvas 是一种混合模式。对话提供意图，画布提供稳定且可编辑的工件，模型可以在其中生成文本或代码。其意义在于，将生成的内容固定到持久画布上可以显著降低使用模型的认知成本。

v0 和 Bolt 针对生产环境交付进行了代码生成优化。它们证明，当输出交给开发人员进行审查时，故障模式是可控的；而当输出直接展示给最终用户时，则无法解决。

Same.new 展示了将整个应用程序视为生成的工件时会发生什么。它适用于原型设计，但对于任何承载负载的应用来说都是危险的。 Anthropic 的工具和 Cursor 的编辑器预示着下一阶段的发展方向：代理程序将生成的 UI 连接到结构化的后端。

所有这些工具都遵循相同的模式。核心界面越是生成式，周围的辅助功能就越需要发挥作用，围绕模型的设计系统就越要承载品牌、可访问性和信任度的重任。生成式 UI 绝不仅仅是模型本身，它还包括团队为其构建的框架。

本季度如何启动

以下是任何产品团队现在都可以立即着手的具体步骤。

1. 选择一个界面。 一个用户目前看到的是静态页面，但实际上应该动态化的功能。报告、仪表盘、推荐、摘要都是不错的选择。跳过结账、跳过身份验证、跳过任何受监管的环节。

2. **清点词汇表。**列出设计系统中所有具有类型化属性且经过测试的空/加载/错误状态的基本组件。如果列表少于十项，请在生成任何内容之前进行修正。

3. **定义三个意图槽。**最简单的可行布局是“答案、证据、下一步”。除非有其他原因，否则请使用此布局。

4. **编写系统提示，明确词汇表。**不是凭感觉，而是要明确组件名称、属性类型、槽规则以及模型禁止生成的明确约束。

5. **在构建功能之前进行评估。**准备五到十个测试提示，并为每个提示制定评估标准。每次对提示、组件或模型进行更改时，都要运行这些测试。

6. **设置测试门槛，仅向 10% 的流量开放，并在每个生成的界面上提供反馈。**在第一个月每天早上阅读反馈。

7. 确定你的第二个模型。 在依赖主模型之前，选择一个备用模型提供商，并对其进行相同的评估。如果某个模型的发布破坏了你的现有框架，你需要的只是一行配置替换，而不是重新架构。

这并非纸上谈兵。一个三人团队可以在六周内完成这个循环，并比一年的阅读更深入地了解生成式用户界面。

这对未来三年意味着什么

如果设计师将此视为工具周期，那就大错特错了。如果设计师将其视为类别变更，那就走在了时代前沿。

静态屏幕不会消亡。Web 应用的登录表单、设置页面、结账流程等等，这些页面之所以会保留，就像高速公路需要铺设路面一样。真正改变的是每个产品中间的长尾部分，也就是用户希望获得特定答案并得到清晰呈现的部分。这些长尾部分是生成式的，而且它们占据了大部分的界面面积。

能够生存下来的设计系统，将是那些同时面向两种读者——人类和模型——而设计的系统。带有明确名称的令牌、带有类型化属性的组件、兼具提示功能的文档、以及像单元测试检查逻辑一样测试组合性的评估。已经采用这种工作的团队每个季度都在取得更大的进步。而那些仍然交付像素级完美、用于模型可组合表面的 Figma 文件的团队，即将体会到被时代淘汰的滋味。

更深层次的策略其实更简单。界面不再是设计的最终目标，而是设计的输出。设计师的技艺提升到了一个新的层次，融入到生成界面的系统、规则和词汇表中。工作难度增加，影响也更大，现在学习这些的设计师将在 2029 年引领行业潮流。

这就是任务。本周选择一个表面，发布一套词汇表，编写评估，然后开始行动。

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900