界面不再固定：vibe 项目的生成式 UI 设计实战

你的 AI 应用有个尴尬：用户说"帮我对比一下这两个方案"，AI 噼里啪啦输出了 800 字纯文本。用户真正想要的是一张对比表——左边方案 A、右边方案 B，关键差异高亮，底部一个"选这个"按钮。但你的界面是三个月前手写死的，只有聊天框，没有对比表。于是你加了个需求："做个对比表组件"，排期两周。两周后用户又说："能不能把对比结果导出成图片？"——固定界面的死穴在于：用户的意图是无限的，你的手写界面是有限的。

生成式 UI（Generative UI）就是对这个死穴的回答：不再为每种意图手写一个界面，而是让 AI 在运行时按需生成界面——需要对比表就生成对比表，需要时间线就生成时间线，需要表单就生成表单。界面从"事先画好的图纸"变成"按需打印的零件"。

这篇指南的核心判断先摆出来：生成式 UI 的核心不是让 AI 自由发挥，而是给生成加上护栏。没有护栏的生成式 UI，上线第一天就会给你"惊喜"：配色跑偏、按钮点不动、布局在手机上炸掉。生成的是界面，不是惊喜——可预测、可纠正、可降级，是这篇指南要讲的全部事情。

先划清边界：本文只管AI 在运行时动态生成界面的产品与工程设计——生成什么、怎么约束、怎么保证可用。不管流式输出的展示技巧（那是 ai-streaming-output-ux-guide 的地盘：打字机效果、增量渲染；本篇管"生成界面的内容与结构"，那篇管"文本流怎么展示"，互补）、不管消息原生应用范式（message-native-apps-design-guide 管"对话即界面"，本篇管"AI 生成图形界面"，是另一条路）、也不管设计稿转代码（vibe-project-figma-to-code-guide 是静态设计到代码，本篇是运行时动态生成）。

一、为什么界面需要"生成"

固定界面有三宗罪，一人团队感受最深：

第一，新意图 = 新页面。每多一种用户意图，就要设计、开发、测试一个新界面。AI 应用的意图空间是开放的——用户今天想对比方案，明天想看时间线，后天想填个复杂的申请表。手写界面的产能，永远追不上意图的膨胀速度。结果就是大量长尾意图被迫"降级"成纯文本对话，体验打折。

第二，个性化做不动。同一个"数据看板"，新手想要引导式解读，老手想要密集数字。固定界面只能二选一，或者做两套——两套的维护成本，一人团队付不起。生成式 UI 可以按用户画像动态调整信息密度：同一份数据，给新手生成带解读的卡片，给老手生成密集表格。

第三，迭代慢。想试一个新布局？改设计稿、改代码、发版、等反馈，最快一周。生成式 UI 把"改布局"变成"改 prompt 或改约束"：今天试试三栏布局，明天换回两栏，A/B 测试的成本从"天"降到"分钟"。

但反过来，生成式 UI 也有它的原罪：不可预测。同样的意图，今天生成的界面和昨天长得不一样，用户会困惑；生成的界面偶尔有 bug（按钮没绑定事件、文字溢出），用户会骂娘。所以这篇指南的每一节，都是在回答同一个问题：怎么在拿到灵活性的同时，不丢掉可控性。

二、光谱：先选对你的位置，再谈实现

生成式 UI 不是非黑即白，而是一条光谱。动手前先选好你的位置——位置选错，后面全是返工。

第一档：固定 UI。全部手写。适合核心高频路径（登录、支付、设置页）——这些地方要的是 100% 可控，一点"惊喜"都不能有。生成式 UI 再时髦，也别碰这些页面。

第二档：参数化模板。界面结构固定，内容用变量填充。大多数列表页、详情页都在这一档。这是性价比之王，但本文不展开——它不算"生成"，算"填充"。

第三档：AI 填充内容。布局固定，AI 写文案、配图、示例数据。比如空状态页的插画文案、推荐位的标题。风险低、见效快，是生成式 UI 最温和的入口。

第四档：AI 拼装组件。AI 从预定义的组件白名单里挑选、排版，人可审核。这是一人团队的推荐起步区：灵活性够用（能应对长尾意图），可控性可保（组件是人写的，AI 只负责挑和摆）。本指南后面讲的护栏、校验、降级，主要都是为这一档设计的。

第五档：全生成界面。AI 定布局、定组件、定样式。灵活性拉满，可控性见底。只适合实验性场景或内部工具——面向真实用户的产品，2026 年还不建议把这一档当主力。

选档的铁律：从第四档起步，核心路径永远留在第一档。一个产品的界面，应该是光谱的混合：登录页固定、结果页生成、空状态 AI 填充。非此即彼的思维，是生成式 UI 落地失败的最大原因。

三、管线五步：生成式 UI 是怎么"长"出来的

选定第四档之后，生成式 UI 的运行时管线有五个步骤。每一步都有明确的输入输出，跳过任何一步，都会在某个深夜变成线上事故。

第一步：用户意图。输入是自然语言、点击行为、上下文。输出是一个结构化的意图表示：用户想干什么（对比？筛选？填写？）、涉及什么数据、有什么约束。关键设计：意图分类先行——先把意图分到有限的类别里（展示类、操作类、输入类），再决定生成策略。意图都不分类就直接生成，等于让 AI 在黑暗中射箭。

第二步：UI 规划。根据意图类别，从组件白名单里选组件、定布局。这一步输出的不是代码，而是一个UI 计划（JSON）：用哪些组件、怎么排、数据怎么绑定。把"规划"和"生成"分开，是整个管线最重要的架构决策——规划错了可以重试，生成错了用户已经看到了。规划用便宜的小模型跑，生成再上主力模型，成本也能省一截。

第三步：受约束生成。根据 UI 计划，生成可渲染的界面描述（React 组件树、或 DSL）。约束在这里：AI 只能从白名单组件里挑，只能用设计系统的 token（颜色、字号、间距），布局必须符合预定义的栅格。"只能挑，不能发明"——这是护栏的核心，下一节展开。

第四步：安全校验。把 AI 的输出当成不可信输入来校验：XSS 检查（AI 生成的 HTML 里有没有 script）、布局溢出检查（文字会不会撑破容器）、可访问性检查（对比度、焦点顺序）。这一步必须是确定性的代码，不能再用 AI 来校验 AI——用魔法打败魔法的链条，迟早断在你最不希望它断的地方。

第五步：渲染交互。hydrate、绑定事件、上报埋点。还有一个关键设计：生成结果要缓存——相似意图的生成结果可以复用（第八节讲成本时会展开），既省 token 又省 latency，还能提高可预测性。

管线之外的回流：用户的点击、纠正、放弃，都记录下来，成为下一轮生成的约束（"用户上次把生成的表格切换成了卡片，下次直接生成卡片"）。这条回流线，是生成式 UI 越用越顺手的秘密。

四、护栏设计：AI 只能挑，不能发明

护栏是生成式 UI 的灵魂。没有护栏，你得到的不是"动态界面"，是"薛定谔的界面"。护栏有四层，从硬到软：

第一层：组件白名单。这是最硬的护栏：AI 可用的组件，就是你手写好的那 20-30 个（按钮、卡片、表格、表单项、图表…）。prompt 里明确列出每个组件的 props 和使用场景，生成时只允许引用白名单内的组件。白名单之外的东西，出现即拒绝——校验器看到未知组件名，直接打回重生成。这一层的哲学是：创意交给 AI，质量由人写的组件兜底。

第二层：设计 token 约束。颜色只能用设计系统的色板，字号只能用预设阶梯，间距只能用 4px 基准的倍数。AI 非常擅长"微创新"出一些你从没见过的屎黄色——token 约束就是把它锁死在你的设计语言里。实现方式：prompt 里给 token 表，校验器做二次检查，双保险。

第三层：布局约束。定义几种合法的布局模式（单列、双列、卡片网格、左右分栏），AI 只能选，不能自创。移动端和桌面端各一套。布局是最容易"看起来还行、实际不能用"的环节：AI 生成的三栏布局在 375px 宽的手机上，就是一场灾难。约束布局模式 + 响应式规则，能挡住 90% 的布局事故。

第四层：内容护栏。AI 填充的文案、示例数据，要符合产品调性，不能出现占位符（"Lorem ipsum" 是生成式 UI 的耻辱柱）、不能编造数据（"示例数据必须标注为示例"）。这一层和 prompt 工程关系最大，也是最需要持续调优的一层。

四层护栏的共同原则：护栏是代码，不是 prompt。prompt 里写"请只用白名单组件"是愿望，校验器里写"未知组件名直接拒绝"是法律。愿望会落空，法律不会。

五、安全：把 AI 的输出当不可信输入

这是最容易被 vibe 开发者忽略的一节，也是最危险的一节。AI 生成的 HTML/组件树，和用户提交的表单一样，是不可信输入——区别只在于，它是你花钱请来的不可信输入。

XSS 是头号风险。AI 生成的界面里可能包含用户数据（比如把用户名渲染进标题），如果转义没做好，就是存储型 XSS。正确做法：渲染层默认转义一切，AI 生成的"富文本"走白名单标签过滤。不要相信"AI 不会生成恶意代码"——AI 不会，但诱导 AI 的用户会（提示注入诱导 AI 生成恶意界面的攻击，2026 年已经真实发生过）。

布局破坏是二号风险。超长字符串撑破容器、超大图片挤掉按钮、表格列数过多导致横向溢出。校验器里加三条硬规则：文本最大长度截断、媒体资源尺寸上限、容器 overflow 保护。这些规则和 AI 无关，是前端的基本功——但生成式 UI 让"意外输入"的概率从"偶尔"变成"经常"，基本功就必须变成自动化检查。

可访问性是三号风险。AI 生成的界面，经常没有 label、对比度不够、键盘焦点顺序混乱。一人团队至少要做到：校验器检查图片 alt、表单 label、颜色对比度（WCAG AA 是底线）。这不只是道德要求——在很多市场，可访问性是法律要求（vibe-project-accessibility-a11y-guide 那篇讲过具体的合规线）。

安全校验的工程位置：放在"生成"和"渲染"之间，作为同步的、确定性的、不可跳过的关卡。校验失败 → 打回重生成（最多重试 2 次）→ 仍失败 → 降级到固定 UI（第七节）。这条链路的每一环都要有日志：哪次生成被校验器打回、原因是什么——这是调优 prompt 和护栏的原材料。

六、可预测性：同一意图，长得要像

生成式 UI 最大的 UX 风险不是"丑"，是"变"。用户昨天点"对比方案"看到的是左右分栏表，今天点同样的按钮看到的是上下堆叠卡片——他会觉得产品"不稳定"，即使两次的界面单独看都没问题。在界面设计里，"惊喜"是 bug，不是 feature。

可预测性有三招：

第一，意图到布局的映射要稳定。同一类意图，默认用同一套布局。"对比类意图 → 左右分栏表"，写成规则，不要每次都让 AI 重新"创意"。AI 的职责是在既定布局里填好内容、选好组件，不是重新发明布局。布局的变更应该是产品决策（发版说明里写），不是 AI 的即兴发挥。

第二，控制生成的随机性。生成 UI 的模型调用，用低温度（0.1-0.3）、固定种子。需要多样性的是"内容"，不是"结构"。结构要稳如磐石，内容可以活泼。这和文本生成的调参直觉是反的——文本生成要的是文采，界面生成要的是纪律。

第三，缓存即一致性。相似意图直接复用上次的生成结果（第八节细讲）。缓存不仅省成本，更是可预测性的免费午餐：用户看到的就是上次验证过的界面，零意外。

还有一个心智模型的细节：让用户感知到"这是生成的"。在生成式界面的角落放一个 subtle 的标识（"AI 生成的视图"），用户对"AI 生成的东西偶尔不完美"有天然的宽容度——前提是你诚实地告诉他这是 AI 生成的。藏着掖着，一旦出 bug，用户会觉得"这产品连固定界面都做不好"。

七、纠正与降级：当生成翻车时

再好的护栏，生成也会翻车。翻车时的体验设计，决定用户是"再试一次"还是"直接卸载"。

纠正：给用户"不对"的按钮。每个生成式界面旁边，放一个轻量的纠正入口："布局不对""内容不对""换一种展示"。用户点一下，带着反馈重新生成一次。关键设计：纠正要具体——"不对"是个情绪，"想要表格不要卡片"才是信息。纠正选项做成选择题（布局/内容/数据三选一），而不是开放文本框。一人团队的经验：结构化纠正的二次生成成功率，比开放文本高一倍以上。

降级：生成失败时的固定 UI。校验不通过、生成超时、模型挂了——都要有一条退路：显示预先手写好的固定界面（哪怕简陋）。降级的触发必须是自动的，不能等用户投诉。降级不是失败，是设计：在降级 UI 上诚实地说"智能视图暂时不可用，已为你切换到标准视图"，用户不仅不会生气，反而会觉得这产品靠谱。

Loading：生成需要时间，等待需要设计。生成式 UI 的 latency 是秒级的（模型推理 + 校验），不能让用户干等。正确做法：先显示骨架屏（skeleton），骨架的布局和最终界面的布局一致——这样生成完成后是"内容浮现"，而不是"界面跳变"。骨架屏的布局从 UI 计划里来（第二步的产物），不需要等生成完成。这是管线设计（规划与生成分离）带来的免费 UX 红利。

八、成本与性能：生成不是免费的

生成式 UI 的账本有三栏：

Latency：一次生成的端到端时间 = 意图分类（小模型，100-300ms）+ UI 规划（小模型，300-500ms）+ 生成（主力模型，1-3s）+ 校验（代码，50ms）。总量 2-4 秒。对 C 端产品，这个数字偏高——所以骨架屏（第七节）和缓存是必选项，不是可选项。

Token 成本：生成界面的 prompt 比纯文本长（要带组件白名单、设计 token、布局规则），一次生成烧掉的 token 是同等文本生成的 3-5 倍。省钱的手段：规划用小模型、生成结果缓存复用、白名单和 token 表做 prompt caching（vibe-project-llm-inference-cost-guide 那篇讲过缓存的具体打法）。

缓存策略：按"意图类别 + 数据指纹"做缓存键。同一类意图、相似数据，直接返回上次的生成结果。缓存命中率做到 60% 以上，成本和 latency 都降一半，可预测性还白赚。缓存失效的触发条件：组件白名单变了、设计 token 变了——这时全量清缓存重生成。

成本红线：一人团队的经验值，生成式 UI 的单次生成成本，不应超过该用户当月 ARPU 的 1%。超过这个线，要么加强缓存，要么把该场景降级回固定 UI。技术理想主义在账单面前不值钱。

九、三阶段落地与反模式清单

落地路线分三阶段，每阶段都有明确的毕业标准：

阶段一：AI 填充内容（1 周）。不动布局，只让 AI 写空状态文案、推荐位标题、示例数据。毕业标准：零安全事故、用户无感知（好的填充应该让人看不出是 AI 写的）。这个阶段验证的是"prompt 工程 + 内容护栏"的基本功。

阶段二：AI 拼装组件（2-4 周）。上组件白名单、UI 规划、校验器、降级链路。先选一个低风险的长尾场景试点（比如"搜索结果的多形态展示"）。毕业标准：校验拦截率低于 5%（太高说明 prompt 或护栏有问题）、用户纠正率低于 10%、有完整的生成日志。

阶段三：扩大生成面（持续）。把验证过的管线复制到更多场景，加上缓存和成本监控。毕业标准：生成式界面的用户满意度不低于固定界面——达不到就回滚，别硬撑。

反模式清单：1. 全生成起步——一上来就让 AI 定布局定样式，三个月后得到一堆不可维护的"艺术品"。2. 护栏只写在 prompt 里——"请只用白名单组件"是愿望，校验器里的拒绝逻辑才是法律。3. 用 AI 校验 AI——校验必须是确定性代码，魔法打魔法迟早翻车。4. 没有降级——生成失败就白屏，用户要的不是"智能"，是"能用"。5. 核心路径也生成——登录、支付、设置，这些页面永远手写，别让 AI 碰。

收尾回到开篇的判断：固定界面的产能永远追不上意图的膨胀，这是生成式 UI 存在的理由；但生成的是界面，不是惊喜——可预测、可纠正、可降级。做到了这三句，生成式 UI 就是一人团队对抗大团队的杠杆：他们用 10 个人手写 100 个页面，你用一套管线覆盖无限长的尾巴。

从"AI 填充内容"开始，今晚就能动手：找一个空状态页，把写死的文案换成 AI 生成的，加上内容护栏和人工抽查。一周后，你会第一次感受到：界面开始"活"了——而你，依然是那个掌控它的人。