企业官网建设流程全解析

写在前面

假如我问你：“帮我推荐几双500元以下的跑鞋。”传统AI会回复一段文字：“推荐李宁超轻系列，价格XXX；安踏氢跑系列……”你读完，再去电商App搜索、筛选、下单。整个过程在“读—搜—筛”之间反复跳转。

但如果AI直接生成一个商品卡片列表呢？每一张卡片上都印着鞋子的图片、价格、评分，旁边还有“筛选”按钮和“加入购物车”——这就是GenUI正在做的事情。

GenUI（Generative UI，生成式UI），正在重塑大语言模型与人类之间的交互方式。它的目标很简单：让AI不再只输出文字，而是“画”出用户可以真正操作的界面。

一、何为GenUI：概念与范式转移

从“纯文本对话”到“可操作界面”

传统大模型对话主要依赖纯文本输入和输出，一旦涉及复杂交互、结构化展示或多轮协作，就暴露出明显的体验瓶颈——可读性差、表达形式局限，一张折线图能直观展示的趋势，用文字描述则冗长且不直观；交互闭环断裂，用户往往需要经历“阅读回复→理解内容→手动输入→发送”的四步流程。

生成式UI（Generative UI）是一种创新的人机交互范式：在对话过程中，AI能够动态生成并实时渲染UI界面，让模型不再局限于纯文字输出，而是能够“画”出表单、按钮、图表、卡片等丰富的交互组件。用户可以直接在生成的界面中操作，操作行为即时反馈回对话上下文，驱动模型进行下一轮响应，使交互与对话融为一体。

用一个例子就能说清楚区别：你问AI“展示RNA聚合酶的工作原理”。传统AI输出一大段文字解释。而Generative UI则会生成一个完整动态页面——DNA双螺旋动画、RNA聚合酶沿链移动的可视化、各转录阶段用颜色标注、滑块控制转录速度和回放、一键切换“原核vs真核”对比。你不是在“读”内容，而是在“进入”一个小应用，与AI共同探索。

GenUI vs Vibe Coding：谁在“发起设计”？

这里有必要厘清一个容易被混淆的概念。很多人把GenUI和“Vibe Coding”混为一谈，但Nielsen Norman Group给出了一个关键的区分标准：谁做出“要生成界面”的决定。

• Vibe Coding：用户主动要求AI构建某个界面或应用（“帮我做一个伦敦旅行计划App”）。用户发起了设计请求。

• GenUI：用户只是提出了一个目标或问题（“帮我规划伦敦旅行”），系统自主判断这个场景更适合用交互式界面而非纯文本回复，于是主动生成日历选择器、住宿卡片、景点筛选器等交互组件。判断力是GenUI的核心定义动作。

通俗地说：Vibe Coding是你让AI“画”，GenUI是AI自己觉得“用画的方式回答你更好”。

为什么GenUI是“必然”而非“可能”

学术界的实证数据已经给出了答案。斯坦福大学的研究团队将GenUI与传统纯文本对话UI（ConvUI）进行了系统对比，结果表明：生成式界面在人类偏好上比纯文本对话高出最多72%，并且在多轮对话、信息密集型场景和探索性任务中表现尤为突出。Google Research在2025年11月发布的Generative UI技术进一步印证了这一方向——这不仅是让模型“变得更聪明”，而是让AI具备即时生成完整交互界面的能力，从而改变AI的“呈现方式”与“交互方式”。

二、核心亮点：GenUI带来的三大突破

1. 以界面重构文字，释放信息价值

传统AI输出长文本，用户需要在“文字矿”中自己挖掘有价值的信息。GenUI用表格、卡片、列表、图表等可视化组件让数据和流程一目了然，大大降低了认知负担。

实测数据支撑：在Gemini 3 GenUI的测试中，一个“交互式贷款计算器”代替了600字的文字解释，用户用滑块即可实时调整本金、利率和期限，决策效率提升了约38%。这是文字无法实现的操作密度。

2. 打破“两步交互”，实现一站式流转

传统模式下，用户读完AI回复→理解内容→手动输入下一步指令→发送。GenUI打破了这个断裂的闭环：用户在生成的表单中填写、在按钮上点击，这些操作即时反馈到对话上下文，驱动模型的下一轮回复。交互与对话真正融为一体。

3. 让工具调用从“指令翻译”变为“表单填写”

当LLM需要调用外部工具但缺少参数时，传统做法是文字提示用户补充参数信息——用户需要理解每个参数的含义、类型和格式，自行组织输入，这种体验生硬且容易出错。

GenUI的解决方案是：模型自动生成交互式表单收集所需信息。用户只需在表单中填写并提交，参数即被正确传递给工具，无需理解参数格式、无需翻译需求。

4. GenUI vs 传统对话：对比一图看懂

三、案例体验：当GenUI走进真实场景

案例1：旅行规划助手

用户输入“帮我规划下周去东京的行程”。传统AI输出一份包含景点、住宿、交通的文字清单。而LangChain的Agent Chat UI中，旅行规划Agent会调用GenUI组件，直接渲染出住宿选择界面和餐厅推荐卡片——用户可以在对话中直接筛选酒店、浏览餐厅详情，无需跳转外部App。

背后的技术逻辑是：Agent首先从用户输入中提取location、startDate、endDate、numberOfGuests等字段，然后通过工具调用生成UI组件来收集用户偏好。位置是必填项，其余为可选项，AI会根据对话上下文智能补全默认值。

案例2：购物助手

传统AI购物助手的对话模式是“文字问答”：用户问“推荐500元以下的跑鞋”，AI列出几款鞋的文字描述。VGV基于Flutter GenUI SDK构建的购物助手完全不同：AI直接组装出交互式商品卡片、价格筛选器和品牌选项——每一个组件都是真实的Flutter Widget，用户看到的不是一个聊天记录，而是一个完整的商品浏览界面。

这里最关键的设计是Catalog（组件目录）：开发者预先注册好产品卡片、筛选按钮、轮播图等自定义组件，AI只能在Catalog中组合这些组件，从而确保生成的UI始终符合品牌设计规范。这种模式让GenUI既灵活又可控。

案例3：股票交易看板

在LangGraph GenUI示例中，用户输入“查看我的投资组合”，Stockbroker Agent会渲染出一个带有股价走势图、持有数量、盈亏状态的交互式仪表板。用户甚至可以在这个UI中直接完成买入操作——所有交互状态实时回传AI，驱动后续响应。

案例4：交互式数据探索

Gemini 3 GenUI在处理比较类问题时尤为出色。用户问“帮我比较这几款手机的续航表现”，AI直接生成并排卡片布局，每张卡片内嵌滑块可调整测试条件（亮度、网络状态），数据实时联动刷新。这就是GenUI区别于“静态界面生成”的关键——它不只是画一个界面，而是让界面“活”起来，与用户进行双向互动。

四、上手指南：从0开始使用GenUI SDK

目前市面上主流的GenUI SDK主要有两条技术路线：Flutter生态（Google官方推动的A2UI协议）和React/Vue生态（OpenTiny GenUI SDK、Thesys等）。本节以Flutter GenUI SDK为例，从零搭建一个完整的GenUI工程。

4.1 GenUI SDK的核心架构

在动手之前，先理解GenUI SDK的设计哲学。

GenUI SDK本质上是一个编排层（orchestration layer），它协调用户、Flutter Widget和AI Agent之间的信息流，将基于文本的对话转化为丰富的交互式体验。它的核心工作流程如下：

Step 1：用户发送Prompt
用户输入自然语言请求，App调用AI Agent，同时携带Catalog信息——告诉AI它可以使用哪些Widget来组装UI。

Step 2：AI生成内容+UI描述
AI Agent生成回复，但它不只输出文字，而是通过GenUI SDK提供的工具来描述最适合内容的UI结构（以JSON格式返回）。

Step 3：动态渲染UI
GenUI SDK接收回复，反序列化JSON，并在运行时构建对应的Widget。有些是信息展示型组件，有些是布局组件，有些是可交互组件（如滑块、按钮、日期选择器）。

Step 4：交互反馈闭环
用户点击按钮、拖动滑块等操作会触发后续请求发送给Agent，Agent据此更新UI，形成持续迭代的交互循环。

这一架构的巧妙之处在于：AI不生成Dart代码，只生成结构化数据。运行时反序列化确保了安全性，同时也让开发者可以完全控制哪些Widget可以被AI使用。

4.2 环境准备与依赖配置

前置要求：

• Flutter SDK已安装（建议stable channel），Dart版本需3.9+-

• 获得Gemini API Key（Google AI Studio免费申请）

• 基本Flutter知识（理解Widget组成和基础状态管理）

创建新项目并添加依赖：

flutter create my_genui_app cd my_genui_app flutter pub add genui google_generative_ai

4.3 定义Widget Catalog（组件目录）

Catalog是GenUI中最核心的设计约束——它定义了AI可以“使用”哪些UI组件。没有注册到Catalog中的Widget，AI无法生成。这确保了AI生成的界面始终符合品牌规范。

import 'package:genui/genui.dart'; import 'package:flutter/material.dart'; // 定义一个简单的产品卡片组件 class ProductCard extends StatelessWidget implements UiComponent<Map<String, dynamic>> { final String name; final double price; final String imageUrl; const ProductCard({ required this.name, required this.price, required this.imageUrl, }); @override Widget build(BuildContext context) { return Card( child: Column( children: [ Image.network(imageUrl, height: 100), Text(name), Text('\$$price'), ], ), ); } // 实现fromJson方法，让AI能够通过JSON描述来实例化此组件 static ProductCard fromJson(Map<String, dynamic> json) { return ProductCard( name: json['name'] as String, price: (json['price'] as num).toDouble(), imageUrl: json['imageUrl'] as String, ); } } // 构建Catalog final catalog = Catalog( components: [ CatalogComponent( type: 'ProductCard', builder: (props) => ProductCard.fromJson(props), ), // 可以注册更多组件：按钮、筛选器、滑块等 ], );

4.4 配置AI Agent并建立Conversation

GenUI SDK支持多种AI提供商接入：Google Gemini AI（快速原型）、Firebase AI Logic（生产环境）、A2UI协议（客户端-服务器架构），以及自定义适配器。

import 'package:genui/genui.dart'; import 'package:google_generative_ai/google_generative_ai.dart'; void setupGenUI() async { // 1. 创建SurfaceController——管理UI的“表面”区域 final surfaceController = SurfaceController(catalogs: [catalog]); // 2. 配置传输适配器（处理AI与UI之间的消息流） final transportAdapter = A2uiTransportAdapter(); transportAdapter.messageStream.listen(surfaceController.handleMessage); // 3. 构建PromptBuilder——定义AI的角色和行为边界 final promptBuilder = PromptBuilder.chat( catalog: catalog, instructions: ''' 你是一个智能购物助手。当用户询问商品推荐时，请使用ProductCard组件展示结果。 每张卡片应包含商品名称、价格和图片。 ''', ); // 4. 初始化Gemini模型 final model = GenerativeModel( model: 'gemini-2.5-flash', apiKey: 'YOUR_GEMINI_API_KEY', systemInstruction: Content.system(promptBuilder.systemPrompt), ); // 5. 创建Conversation——这是GenUI的“大脑” final conversation = Conversation( surfaceController: surfaceController, transportAdapter: transportAdapter, ); // 6. 发送用户消息，触发UI生成 await conversation.sendMessage( Content.text('推荐几款500元以下的跑步鞋'), ); }

4.5 在UI中渲染GenUI Surface

最后一步，在Flutter Widget树中预留一个“Surface”——这是AI生成的UI将要出现的位置：

class GenUIPage extends StatelessWidget { final SurfaceController surfaceController; const GenUIPage({required this.surfaceController}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('GenUI Demo')), body: GenUiSurface( controller: surfaceController, loadingWidget: const Center(child: CircularProgressIndicator()), errorWidget: (error) => Center(child: Text('渲染失败: $error')), ), ); } }

4.6 生产环境配置建议

GenUI SDK目前仍处于Alpha阶段，API稳定性有待社区反馈迭代。在生产环境中部署时，以下几点需要特别关注：

• API Key安全管理：开发阶段可直接使用google_generative_ai包传入API Key；生产环境建议使用Firebase AI Logic，让Firebase安全地管理API Key。

• 错误处理：由于UI由LLM生成，存在“幻觉”风险——AI可能尝试使用Catalog中不存在的组件或属性。必须实现健壮的错误处理和降级UI。

• 定义清晰的边界：GenUI应被视为一个协作系统而非自治系统。开发者仍然需要：①定义AI可用的Catalog ②审查组件的组合逻辑 ③在真实场景中测试生成的界面。

五、展望：GenUI生态的未来格局

GenUI领域正在快速演进，目前呈现出三股主要力量：

• OpenAI Apps SDK：专有生态，聚焦ChatGPT内部的应用分发和组件渲染。

• MCP UI（Model Context Protocol）：开源标准，追求厂商中立性，让工具和组件能在Claude、VS Code等多个AI客户端中通用。

• Google A2UI：高性能跨平台方案，基于声明式蓝图在移动端和桌面端原生渲染。

无论哪一标准最终成为主流，GenUI的崛起已是不可逆转的趋势。用户不想再面对密密麻麻的文字墙——他们想要的是可以直接点击、滑动、填写的可操作界面。Text-only的对话体验，或许很快就会被新一代交互范式所取代。

而作为开发者，我们现在要做的，就是打开Editor，写下第一行Catalog定义，让AI开始在界面上“画”起来。