AVW-5：AI 生成 UI 与 Agent 渲染——v0、bolt.new、CopilotKit、A2UI 协议

2026年6月7日 00:40 CST A2UIv0bolt.newCopilotKitAI生成UIAgentAG-UIOnlookOpen-Lovable前端

AI 动态视觉 Web 专题 全景地图 | 动画引擎 | 数据可视化 | 交互叙事 | AVW-5 AI 生成 UI ← 本文 | 视频与动效 | 程序化三剑客 | 中国生态 | 视觉指南

# AI 生成 UI 与 Agent 渲染 ## AI 建站 - v0 (Vercel) - bolt.new (StackBlitz) - DeepSite (HuggingFace) - LlamaCoder (Together AI) ## Agent UI 框架 - CopilotKit (AG-UI协议) - AGenUI (三端Native) - GenUI (高德) ## AI 设计工具 - Onlook (Cursor for Designers) - Open-Lovable (网站克隆) ## Agent-UI 协议 - A2UI (Google) - AG-UI (CopilotKit)

AI 生成 UI 正在经历三阶段演变：

时间	范式	代表	用户体验
2023	AI 写 HTML/CSS → 复制粘贴	早期 ChatGPT	断层的
2024	AI 生成完整项目 → 部署	v0、bolt.new	半自动
2025-2026	Agent 直接控制渲染器 → 没有代码中间层	A2UI、AG-UI	透明的

第一条线：AI 建站 — Prompt → 可部署网站

v0（Vercel）

官网: v0.app
出品: Vercel
定位: AI 辅助的设计+编码平台
技术栈: React + Tailwind + shadcn/ui + Next.js
代表场景: 文字描述 → React 组件代码 → 可部署的 Next.js 项目

用户输入: "一个 SaaS 仪表盘，左侧导航栏，中间是图表区域"
    ↓
v0 生成: React 组件 + Tailwind 样式 + 交互逻辑
    ↓
对话迭代: "把这个卡片改成蓝色" "图表加动画"
    ↓
输出: 可部署的 Next.js 项目

评分: 生成 UI 质量在同类中最高，因为底层 shadcn/ui 组件库本身质量高。创新设计仍需设计师介入。目前能处理中等复杂度的全栈应用原型。

bolt.new（StackBlitz）

官网: bolt.new
出品: StackBlitz
技术栈: WebContainer（浏览器内 Node.js）+ React/Express/SQLite
核心差异化: 浏览器内运行完整 Node.js 环境——生成代码后立即在浏览器里跑起来

用户输入: "一个 Todo 应用，带登录和数据库"
    ↓
自动生成 + install + build + run → 立即可用的预览
    ↓
一键部署

DeepSite（Hugging Face）

官网: deepsitev2.com
底层模型: DeepSeek-R1
平台: Hugging Face
特色: 社区驱动，模型开放

LlamaCoder（Together AI）

官网: llamacoder.together.ai
出品: Together AI
模型: Llama 3.1 405B
特色: 用开源模型做代码生成的先锋

第二条线：Agent UI 框架 — AI 作为界面的"驾驶员"

CopilotKit — Agent 的"前端操作系统"

官网: copilotkit.ai
GitHub: CopilotKit/CopilotKit · 15k+ stars
定位: 给 AI Agent 提供 UI 的框架
协议: AG-UI 协议的制定者

useCopilotAction({
  name: 'updateChart',
  parameters: [{ name: 'timeRange', type: 'string' }],
  handler: ({ timeRange }) => setChartTimeRange(timeRange)
})

用户说"显示过去 7 天的数据" → Agent 调用 updateChart('7d') → 图表自动更新。不需要用户去找筛选框和按钮。

AGenUI — Native 端的 A2UI 渲染引擎

GitHub: AGenUI/AGenUI
定位: 首个三端 Native A2UI 渲染引擎
平台: iOS / Android / HarmonyOS
协议: 基于 Google A2UI v0.9
22 个内置组件覆盖常见 UI 需求

传统路径: AI 生成代码 → 编译 → 安装 App → 用户使用
AGenUI 路径: AI 生成 A2UI JSON 流 → Native 渲染器实时渲染 → 用户即时交互

绕过了"写代码→编译→发布"的整个流程。

GenUI（高德）

官网: genui.amap.com
出品: 高德（阿里巴巴）
领域: 地图类应用的 AI 界面生成
现状: 企业级应用，公开信息有限

第三条线：AI 设计工具

Onlook — 设计师的 Cursor

官网: onlook.dev
GitHub: onlook-dev/onlook
定位: 开源 AI-first 设计工具
体验: 打开 React 项目 → 浏览器里拖拽修改组件 → AI 生成对应代码改动 → 提交 PR

Open-Lovable — 网站克隆器

GitHub: firecrawl/open-lovable
出品: Firecrawl 团队
功能: 输入参考网站 URL → 输出结构相似的 React 代码

第四条线：Agent-UI 协议（底层基础设施）

A2UI — Agent to UI 流式协议

官网: a2ui.org
提出方: Google
版本: v0.9
核心思想: Agent 不生成代码，而是输出声明式 UI JSON 流

Agent (任何 LLM)
    ↓ 输出 A2UI JSON 流
A2UI Renderer (Android/iOS/Web)
    ↓ 渲染
用户看到的界面

同一个 A2UI JSON 流在 iOS 渲染为 SwiftUI，在 Android 渲染为 Jetpack Compose，在 Web 渲染为 React。

AG-UI — Agent-User Interaction 协议

GitHub: ag-ui-protocol/ag-ui
提出方: CopilotKit
定位: A2UI 回答"界面长什么样"，AG-UI 回答"Agent 和用户怎么对话"

5. 场景决策矩阵

场景	首选
快速原型验证	bolt.new
Next.js 项目 UI 生成	v0
给现有 App 加 AI 助手	CopilotKit
跨平台 Agent UI	AGenUI + A2UI
设计→代码协作	Onlook
学习参考网站的结构	Open-Lovable
平台级 Agent-UI 协议	A2UI + AG-UI

下一篇：AVW-6 代码生成视频——Remotion、Motion Canvas、Revideo、Editly、Theatre.js、Rive、Jitter、Motionity、LottieFiles