摘要:2025 年我们还在惊叹于 V0 和 Bolt 的代码生成能力,而 2026 年初,AionUi 的发布宣告了'运行时生成 (Runtime GenUI)'时代的到来。不再需要预先写好所有 Component,不再需要 Hardcode 每一个表单。AionUi 允许你的应用根据用户的意图,实时渲染出从未被编码过的 UI 界面。
前言:从'写死'到'生成'


传统前端开发的逻辑是:
产品经理提需求 -> 设计师出图 -> 程序员把 UI 写成代码 (React/Vue) -> 打包发布 -> 用户看到静态界面。
如果用户想要一个'分析上季度财报'的功能,而你没写这个页面,用户就没法用。
但近期登上 GitHub 热门榜单的 AionUi 打破了这个死循环。它的核心理念是:Don't code the UI, code the Intent (不要编码界面,要编码意图)。
项目地址:http://github.com/iOfficeAI/AionUi
什么是 AionUi?
AionUi 是一个专为 AI Agent 时代设计的动态 UI 渲染引擎。
它不像 Ant Design 或 ShadcnUI 那样提供一堆死板的组件,它提供的是一个'画布 (Canvas)' 。当你告诉它'给我展示一个特斯拉股票的走势分析'时,AionUi 会:
- 理解意图:调用底层 LLM(支持 DeepSeek, GPT-4o, Claude)。
- 结构化流式输出:大模型实时输出 UI 的 JSON 描述结构 (Aion Schema)。
- 即时渲染:前端引擎将 JSON 瞬间映射为高颜值的 React/Vue 组件并挂载到页面上。
简单说:它就是 App 里的 ChatGPT,但它回复的不是文字,而是可以直接交互的按钮、图表和仪表盘。
核心特性解析
1. 流式组件水合 (Streaming Component Hydration)
传统的 Server-Side Rendering (SSR) 是流式传输 HTML。AionUi 做到的是流式传输组件树。
用户还在输入'我要订一张去...'的时候,AionUi 就已经开始预加载'机票搜索框'的组件骨架了。这种极致的响应速度,让 AI 生成界面的体感延迟几乎为零。
2. 这种 UI 是'活'的 (Adaptive Context)
同一个 <AionWidget /> 组件:
- 在手机端,它可能生成一个简洁的 BottomSheet。
- 在桌面端,它会自动生成一个复杂的多列 Dashboard。
- 深色模式、用户习惯(比如左撇子模式),全部由 AI 在运行时自动调整,无需开发者写繁琐的 Media Query。
3. 安全沙箱 (UI Sandbox)
这是企业级开发最关心的。AionUi 并不允许 AI 随意生成 <script> 标签。它基于一套严格的 机制。AI 只能'拼装'你设计系统中已有的原子组件(Button, Card, Chart),确保生成的界面既安全又符合品牌规范。


