引言
从“人适应机器”到“界面理解人”,AI 正在将 UI 从静态的代码包转变为动态生成的流。随着大模型能力的边界不断扩展,我们正在经历从 GUI(图形用户界面)到 LUI(语言用户界面),再到 GenUI(生成式用户界面) 的范式转移。
1. 什么是 GenUI?
GenUI (Generative User Interface),或者有时被称为 G2UI (Generative-to-UI),是指界面不再是由开发者预先硬编码(Hard-coded)好的,而是由 AI 根据用户的当前意图(Intent)和上下文(Context),实时动态生成的交互界面。
在传统开发中,我们为 100% 的用户设计一套 100% 相同的 UI;而在 GenUI 时代,我们是为 1% 的特定时刻生成 100% 适配的交互节点。
2. 实现路径:JSON 派 vs RSC 派
目前在工程实践中,主要有两种主流的实现思路:
A. JSON 协议派(数据驱动渲染)
这是目前最稳健、也是最符合传统前后端分离架构的做法。
- 逻辑:AI 充当“调度员”,输出结构化的 JSON 数据(包含组件名和 Props)。前端通过一个组件映射表(Registry)来匹配并渲染。
- 优点:安全性高(代码逻辑预设)、样式受控、易于调试。
- 缺点:灵活性受限,无法处理超出预设组件库之外的交互需求。
B. RSC 派(流式组件传输)
这是以 Vercel AI SDK 为代表的新兴妙妙科技,利用 React Server Components (RSC) 的特性。
前一段时间这东西不是出过状况么 草
- 逻辑:服务器端在执行 AI 逻辑时,直接运行 React 组件,并将组件的序列化数据(非 JSON,而是 UI 的 DNA)流式传输给前端。
- 优点:零 Bundle 占用。前端无需提前下载沉重的库(如复杂的图表库),只有在 AI 决定展示时才会传输。
- 缺点:高度依赖框架(如 Next.js),对原生 App 的跨平台支持较弱。
3. 看法
前一段时间千问的免费喝奶茶活动很火爆,以这个为例,用户输入想让千问帮忙点一杯奶茶的意图,然后AI理解发现用户想让自己点奶茶,之后向用户展示的UI包括附近的奶茶店,可以点什么…,这些东西以我来看应该是使用的json而非RSC,因为我观察到的所有人看到的UI界面都是比较单一的,并且RSC使用环境受限,千问使用的应该不是webview,而是原生。
最近刚好在打信安作品赛,在做AI辅助蜜罐攻击分析的选题,前端需要模拟一个真实场景,例如一个购物网站,有个朋友的想法是根据攻击者的攻击,使用AI全量生成攻击者下一步看到的界面,这个想法就触及了GenUI的核心逻辑。
随着模型能力的增强,大胆猜测一下之后肯定有人会做一个全部都是由AI生成的网站哈哈。