💡

Generative UI 生成式 UI 案例研究 - AI 界面生成实际应用

探索 Generative UI 生成式界面的真实案例:Google Gemini 动态视图、Vercel v0、Amazon Rufus 等。了解各大公司如何使用 AI 生成动态、个性化的用户界面。

12 项
💡案例

Google Stitch:实时 AI 原生 UI 设计

Google Labs 的 Stitch 是一个偏设计时的 GenUI 案例,而不只是聊天式代码生成 demo。在 2026 年 5 月 19 日的官方更新中,Google 将其描述为一个实时协作式设计系统:Agent 会把 UI 生成过程直接流到无限画布上,允许用户在完成前中途转向,并把结果导出到生产链路。

googlestitchdesign-tool
作者 Google Labs · 2026-05
访问网站
💡案例

Google Gemini 3 - 动态视图与可视化布局

Google 已在 Gemini 3 中实装 Generative UI 功能(内部称"动态视图"和"可视化布局"实验)。根据 Google 官方博客,Gemini 3 AI 模式可"生成沉浸式视觉布局和交互式工具与模拟",完全根据用户查询即时生成界面。动态视图可让 Gemini 3 为每个提示"设计并编码一个完全定制的交互式响应",可视化布局则生成"杂志风格"的沉浸式多媒体界面。

googlegeminidynamic-view
作者 Google · 2025-11
访问网站
💡案例

Google Search AI 模式

随着 Gemini 3 在 Search 中上线,AI Mode 新增了 Generative UI 体验。Google 搜索团队表示,Gemini 3 在搜索中可动态创建理想的视觉布局,并附带交互式工具与模拟,针对用户问题量身定制界面。例如,搜索复杂概念时,用户不仅获得文字答案,还可看到动态图表或模拟工具(如可以实时调节参数的计算器)。

googlesearchai-mode
作者 Google · 2025-11
访问网站
💡案例

OpenAI Apps SDK:ChatGPT 内的交互式应用

OpenAI 2025 年 10 月发布的 Apps SDK 是一个很主流的 Generative UI 案例:应用直接存在于 ChatGPT 对话中,既能响应自然语言,也能在聊天里渲染地图、播放列表、演示文稿、课程、购物和旅行等交互界面。Apps SDK 基于 MCP 扩展,让开发者同时定义应用逻辑和界面,是对话产品从“跳转外部应用”走向“原生交互 UI”的强证据。

openaichatgptapps-sdk
作者 OpenAI · 2025-10
访问网站
💡案例

Claude Artifacts:可分享的 AI 应用

Anthropic 2025 年 7 月的 Claude Artifacts 更新,把 artifact 面板推进成轻量应用表面。Claude 可以生成会通过 API 调用 Claude 的 artifact,进行托管并分享给其他人使用,使用者通过自己的 Claude 账号鉴权。这个案例有价值,因为生成出的 UI 不再只是聊天旁边的一次性预览,而是持久、可编辑、可分享的软件对象。

anthropicclaudeartifacts
作者 Anthropic · 2025-07
访问网站
💡案例

Figma Make:Prompt-to-App 原型生成

Figma Make 在 2025 年 7 月面向所有用户开放,是设计工具里最清晰的 Generative UI 案例之一。Figma 将其定义为 prompt-to-app 工具,用来创建交互式高保真原型和 Web 应用,并加入了导入设计库、连接 Supabase 等能力。它值得收录,因为它展示了 GenUI 如何进入产品探索、团队对齐和设计工程协作的上游环节。

figmafigma-makeprompt-to-app
作者 Figma · 2025-07
访问网站
💡案例

Canva Code:用 Prompt 生成交互式设计元素

Canva Code 是创作者平台里的强 Generative UI 案例。在 Canva Create 2025 上,Canva 发布了一个工作流:用户描述价格计算器、测验或小游戏等交互元素,AI 就能直接在 Canva 里生成。生成结果还可复用到设计、网站、演示文稿、文档等 Canva 场景中,把 GenUI 带给了日常创意工作的非开发者。

canvacanva-codeinteractive-design
作者 Canva · 2025-04
访问网站
💡案例

Amazon Rufus - 对话式购物助手

亚马逊推出了对话式购物助手"Rufus",通过对话直接按意图生成界面(如商品推荐卡片、过滤选项等),突破传统关键词搜索模式。

amazonrufuse-commerce
作者 Amazon · 2024-02
访问网站
💡案例

Vercel v0

Vercel 的 v0.dev(2023 年内测)能将简短文本提示转换为可交互的前端原型。可从文本描述或图像生成 React/Tailwind UI 组件,展示了文本生成 UI 的前景。

vercelcode-generationreact
作者 Vercel · 2023-10
访问网站
💡案例

GitHub Spark:自然语言生成全栈应用

GitHub Spark 是 GitHub 生态内的 prompt-to-app 公测案例。它可以把想法转成全栈智能应用,让用户用自然语言、可点击控件或代码继续迭代,在构建时查看实时预览,并一键发布到 GitHub 支撑的托管环境。对 Generative UI 来说,Spark 值得关注,因为它把 AI 生成 UI 放进了带鉴权、仓库衔接和生产工作流的可部署小应用中。

githubsparkfull-stack
作者 GitHub
访问网站
💡案例

Vercel AI SDK - 生成式 UI

Vercel 的 AI SDK 支持从大语言模型流式传输 React 组件,让 AI 实时生成交互式 UI 组件。

vercelreactstreaming
作者 Vercel
访问网站
💡案例

bracesproul/gen-ui - LangChain.js 生成式 UI 演示

一个基于 LangChain.js 和 Next.js 构建的开源示例项目,用于演示如何快速搭建 Generative UI 应用。项目说明写道:"此应用旨在为使用 LangChain.js 构建 Generative UI 应用提供模板"。

langchainnextjsopen-source
作者 bracesproul
访问网站

生成式 UI 精选资源合集。

用 ❤️ 由社区制作