Google Research 团队证明,现代大语言模型在配备适当工具与指令后,已能从单纯的内容生成者进化为全栈开发团队,实时将用户需求转化为包含富交互、动态数据与视觉设计的完整应用程序,彻底打破了长久以来统治人机对话的 Markdown 文字墙模式。

生成式 AI 正在经历一场静悄悄的形态革命。
Google Research 团队发布了生成式 UI(Generative UI)的研究,展示了一种全新的交互可能性。
这不仅仅是格式的优化,而是交互逻辑的根本性重构。
以往我们向 AI 索取信息,它返回文本;现在我们向 AI 提出需求,它直接返回一个为该需求量身定做的软件。
精密架构与先进模型能力涌现
我们习以为常的 AI 交互界面主要由 Markdown 语言构建。这种格式虽然比纯文本进步,支持了标题、列表和简单的代码块,但它本质上是静态的。
它像是一份打印出来的文档,用户只能阅读,无法互动。
Google 的研究团队试图回答一个问题:如果 AI 不再只是把答案写在纸上,而是直接把答案做成一个可以点击、滑动、实时反馈的 App,体验会有什么不同?
答案是颠覆性的。
生成式 UI 系统旨在打破预定义界面的桎梏。
在传统软件开发中,产品经理、设计师和工程师需要花费数周甚至数月来为一个通用的用户旅程设计界面。
而在生成式 UI 的框架下,针对用户随意提出的任何一个 Prompt,系统都能在约一分钟内,即时组建一支虚拟的 AI 研发团队,现场构建出一个包含富媒体格式、地图服务、音频组件乃至模拟器和游戏的定制化网页。

这种即时生成的界面并不是简单的模板填充,而是基于对用户意图的深度理解进行的全新构建。
系统通过三个核心组件紧密协作来实现这一壮举:服务器端工具集、精心编排的系统指令以及严谨的后处理模块。

架构中我们可以清晰地看到,这套系统并没有把所有压力都堆在 LLM 的推理能力上,而是聪明地为它配备了手和眼。
服务器端暴露了一系列 API 端点,赋予模型访问外部世界的能力。
其中最关键的是图像生成工具和搜索工具。
搜索工具不仅仅是为了找答案,更是为了确立 UI 的真实性。
当用户询问关于现实世界实体的信息时,系统强制要求模型通过 Google Search 验证数据,确保展示在精美界面上的每一个数字、每一段历史描述都是准确无误的。
图像生成工具则负责解决视觉素材的问题,模型可以根据上下文生成符合主题的图片,或者通过搜索调用现实存在的图片。
为了极致的效率,这些生成的资产既可以回传给模型以优化后续生成,也可以直接发送到用户浏览器进行渲染。
但这套系统的真正灵魂,在于那份长达 3000 词的系统指令。
这并非简单的 Prompt,而是一份写给 AI 的详尽员工手册。
这份手册确立了生成式 UI 的核心哲学:构建交互式应用优先。
系统明确禁止模型偷懒返回文字墙。如果用户问特拉维夫现在几点了,模型不能只回答下午 3 点,而必须生成一个动态转动的时钟应用;如果用户问如何做仰卧起坐,模型不能只给步骤文本,而必须生成包含倒计时和图解的健身辅助工具。
系统指令中包含了极其严格的思维链(Chain of Thought)要求。
在写下一行 HTML 代码之前,模型必须在内心经历七个步骤的思维推演。
它需要先解读查询意图,判断是否需要强制搜索;接着规划应用概念,构思交互逻辑;然后规划内容,设计故事线或数据结构;紧接着识别数据和图像需求,规划搜索关键词;随后在内部执行搜索,获取事实;再进行头脑风暴,列出可能的 UI 组件;最后过滤并整合所有特性。
这一过程确保了最终生成的不仅仅是好看的皮囊,更是有逻辑、有数据的实用软件。
这种思维链机制有效地抑制了 AI 的幻觉。
系统指令中有一条铁律:零占位符政策。
绝对禁止使用 Lorem Ipsum 这样的填充文本,也禁止设计无法点击的假按钮。
如果后端缺乏数据支持,模型必须移除相关元素,而不是展示虚假功能。
这要求模型在规划阶段就必须确认数据的可获取性,倒逼其进行更精准的搜索和规划。
技术层面的规范同样严苛。
系统强制要求输出纯净的 HTML 代码,利用 Tailwind CSS(Tailwind CSS)进行样式设计,逻辑实现则完全依赖原生 JavaScript。
为了保证视觉风格的一致性,研究人员发现,通过微调系统指令中的风格描述,模型可以自适应地生成不同视觉风格的界面。
无论是现代简约的经典风格,还是充满奇幻色彩的巫师绿风格,模型都能自动调整生成的图像、图标配色以及布局结构,使其浑然一体。

后处理模块则是系统的质检员。
尽管先进的模型已经非常强大,但偶尔仍会犯错。
后处理组件负责注入真实的 API 密钥(如 Google Maps 的 Key),检测客户端的运行时错误,修复因模型解析问题导致的语法漏洞,并确保所有 HTML 属性都被正确转义以防止安全风险。
这最后的一公里,保证了交付到用户手中的是一个可运行、无报错的成品。
生成式 UI 跨领域的通用构建能力
为了验证这套系统的实际能力,Google Research 团队展示了多个生成的案例。
这些案例并非精心挑选的完美样本,而是代表了系统处理复杂、抽象乃至教育类需求时的真实水平。
让我们看一个关于数学可视化的例子。

当用户输入“详细解释分形,我想深入了解所有细节”时,系统并没有甩出一篇长篇大论的数学论文。相反,它生成了一个名为分形探索者(Fractal Explorer)的沉浸式网页。这个网页不仅仅是在展示图片,它是一个活生生的数学实验室。
在这个页面中,系统内置了一个维度计算器,直观地演示了豪斯多夫维数公式。
它设计了一个双画布浏览器,当用户在曼德博集合(Mandelbrot set)上移动鼠标时,另一侧的画布会实时渲染出对应的朱利亚集合(Julia sets)。
这需要模型不仅理解分形的定义,还要能编写复杂的 JavaScript 算法来实时计算这些几何图形。
此外,页面还包含了动态滑块,允许用户一步步迭代生成科赫雪花和谢尔宾斯基三角形,甚至包含了一个混沌游戏模拟器,通过随机过程有机地生长出巴恩斯利蕨。
这种将抽象数学概念转化为可交互、可实验的代码逻辑的能力,远远超出了传统图文生成的范畴。
另一个令人印象深刻的案例是计时设备历史。

用户仅仅输入了“计时器的历史”这样简短的查询。系统生成了一个名为Chronos的暗色主题网页。
它没有简单地罗列年份,而是采用了一个垂直滚动动画的时间轴设计。
从埃及的方尖碑、水钟,到惠更斯的摆钟革命,再到现代原子钟的精密,每一个时间节点都配有生成的符合历史氛围的主题图像。
系统甚至智能地提取了关键洞察和工程突破,以信息框的形式重点展示。
网页采用了响应式的网格布局,文本与图像交替出现,配合滚动的淡入淡出效果,营造出了一种在博物馆参观的叙事感。
这表明模型不仅拥有知识,还拥有了策展人的审美和叙事构建能力。
教育场景也是生成式 UI 大显身手的领域。

针对用打篮球的可爱生物教我 5 岁儿子加减乘除和二进制这样具体且充满童趣的请求,系统构建了一个名为小球手数学学院(Little Ballers Math Academy)的应用。
这个应用完全是一个可玩的游戏。
它包含四个模式:加法是传球练习,减法是投篮,乘法是团队演练,而二进制则是独特的外星记分牌。
在二进制教学中,系统设计了交互式的切换开关来代表 0 和 1,并通过实时计分和五彩纸屑效果给予孩子正向反馈。
所有的视觉元素——篮球、怪物、机器人——都是根据 Prompt 实时生成的。
这种针对特定用户画像(5 岁儿童)、特定兴趣点(篮球)即时生成的教育软件,展现了生成式 UI 在个性化教育领域的巨大潜力。
人机协同评估 AI 目前的真实水平
为了客观评价生成式 UI 的质量,不能只靠主观感觉,需要硬数据的支撑。
研究团队面临的一个挑战是:没有现成的数据集可以用来对比。
于是,他们构建了 PAGEN 数据集。这是一个由人类专家制作的高质量网页集合。
团队在 Upwork 平台上聘请了经验丰富的 Web 开发者,针对随机抽样的查询制作网页。
这些专家被给予了充分的自主权和合理的时间(平均 3-5 小时),要求他们制作出高质量、交互性强的单页应用。
PAGEN 数据集的建立为评估提供了清晰的基准。
研究采用了成对偏好测试,让评分员在忽略生成速度的前提下,对比生成式 UI 与人类专家网站、Google 搜索首条结果、纯文本以及 Markdown 输出。
数据结果令人深思。

在 LMArena 数据集的测试中,生成式 UI 的 Elo 分数达到了 1710.7。
这个分数虽然略低于人类专家的 1756.0,但已经非常接近。更重要的是,它大幅领先于标准的 Markdown 输出(1459.6)和现有的搜索结果网页(1355.1)。
在直接的成对厮杀中,生成式 UI 面对 Markdown 取得了 82.8% 的胜率,面对纯文本更是达到了 97.0% 的绝对优势。这意味着在绝大多数情况下,用户通过体验后,都会毫不犹豫地抛弃传统的对话框,选择交互式的应用。
更有趣的是与人类专家的对比。
虽然整体上人类专家仍然略胜一筹,但在 44% 的案例中,生成式 UI 被认为优于或等同于人类专家的作品。
这不仅是一个数字,它意味着在接近一半的场景下,AI 在一分钟内生成的成果,已经可以媲美专业开发者数小时的工作。
特别是在信息寻求类(Info-Seeking)的任务中,生成式 UI 的表现更为强劲,胜率进一步提升。
研究还揭示了一个关键现象:生成式 UI 是一种涌现能力(Emergent Capability)。这种能力并不是所有模型都具备的,它与模型的智力水平高度相关。

数据对比显示,当使用 Gemini 2.0 Flash 模型时,生成结果的 Elo 分数仅为 1332.9,且伴随着 29% 的输出错误率(如 HTML 标签闭合错误、JS 语法错误等)。
而当切换到更先进的 Gemini 3 模型时,Elo 分数跃升至 1706.7,致命输出错误率直接降为 0%。
这说明,架构完整复杂的 UI、编写无错的代码逻辑、遵循繁杂的系统指令,是只有达到 SOTA(State-of-the-Art)级别的模型才能驾驭的任务。
模型的推理能力越强,它生成的 UI 就越稳定、越智能。
同时,提示工程(Prompt Engineering)的精细度也起到了决定性作用。
消融实验表明,虽然极简的 Prompt 也能让模型产出可用的 UI,但包含了核心哲学、详细思维链指导和丰富示例的完整 Prompt,能显著提升最终结果的用户满意度。
这再次印证了在 AI 交互中,怎么问和问谁同样重要。
尽管前景广阔,生成式 UI 仍面临着生成延迟与算力成本的现实挑战
当然,技术的发展从来不是一蹴而就的。
生成式 UI 虽然迷人,但并非没有软肋。
目前最显著的瓶颈在于速度。
生成一个包含完整逻辑、样式和资产的交互式网页,通常需要一到两分钟的时间。
在习惯了即时搜索和毫秒级响应的互联网时代,这一两分钟的等待是漫长的。
虽然流式传输(Streaming)技术允许用户在页面还在渲染时就开始部分交互,能在感知上将延迟减半,但这依然是一个需要攻克的难关。
推测性解码(Speculative Decoding)等前沿技术或许在未来能缓解这一问题,但在当下,它依然是阻碍大规模即时应用的主要因素。
其次是错误率的问题。
虽然 Gemini 3 实现了 0% 的致命结构错误,但在复杂的业务逻辑中,偶尔仍会出现 JavaScript 运行时错误,或者 CSS 样式在特定分辨率下的错乱。
目前的系统依赖后处理模块来修修补补,但要达到商业级软件的稳健性,模型本身对代码逻辑的理解和自我纠错能力还需要进一步提升。
最后是算力成本。
生成纯文本是一回事,生成几百行逻辑严密的代码并调用多次图像生成和搜索 API 是另一回事。
生成式 UI 消耗的推理算力远高于普通对话,这在商业化落地时会转化为高昂的成本。
然而,瑕不掩瑜。
Google 的这项研究向我们展示了一个即将到来的未来:软件不再是一个预先打包好的静态产品,而是一种按需生成的流体服务。
想象一下,当你需要规划一次复杂的家庭旅行时,你不再需要在地图、订票软件、攻略网站之间来回切换,而是直接告诉 AI 你的需求,它在 60 秒内为你生成了一个包含交互式地图、动态日程表、实时天气预警和预订按钮的专属旅行 APP。
当你想要学习量子力学时,不再是啃晦涩的教科书,而是获得一个可以亲自调整参数、观察波函数坍缩的模拟器。
生成式 UI 将大语言模型的角色从全知全能的图书管理员升级为了随叫随到的软件工程师。
它不仅回答你的问题,更解决你的问题。
在这个新范式下,用户不再是被动的内容消费者,而是拥有了一支随时待命的开发团队。
PAGEN 数据集的开源,也为全球的研究者提供了一个宝贵的赛场,去追赶甚至超越人类专家的基准。
我们正站在人机交互历史的一个转折点上,屏幕背后的那个智能体,终于学会了用界面与交互这最直观的方式与我们沟通。
参考资料:
https://research.google/blog/generative-ui-a-rich-custom-visual-interactive-user-experience-for-any-prompt/
https://generativeui.github.io/
https://generativeui.github.io/static/pdfs/paper.pdf
END

被折叠的 条评论
为什么被折叠?



