v0 入门教程：用 AI 快速生成 React UI 组件

这是什么

v0 是 Vercel 推出的一款生成式 AI 工具，专门用于根据自然语言描述，直接生成 React 组件、页面甚至完整的 web 应用界面。它的定位是“AI 驱动的 UI 生成器”，帮助开发者（尤其是前端开发者）快速将想法转化为可运行的代码，减少手动编写样板代码的时间。

v0 的出现解决了几个常见问题：写页面时反复调试 CSS 布局、设计稿与代码实现之间的鸿沟、需要快速原型验证但又不愿花大量时间写 UI 组件。你只需要说“给我一个带有搜索框和过滤器的用户列表页面”，v0 就能生成对应的 React 代码（基于 Tailwind CSS 和 Shadcn UI 等流行库），并提供一个在线预览窗口让你实时调整。

第一次使用

v0 是一个 Web 工具，不需要下载安装。直接访问 v0.dev 即可。初次使用需要进行一些基本操作：

1. 登录账号：点击右上角“Sign in”，可以使用 GitHub 或 Google 账号快速登录。没有账号的话，注册也很简单。
2. 进入对话界面：登录后你会看到一个类似聊天的界面，中央有一个输入框，提示“Describe the UI you want...”。这就是 v0 的主入口。
3. 发送第一条指令：例如输入“Create a pricing card with three tiers: Basic, Pro, Enterprise, each with a feature list and a button.”，然后按回车或点击发送图标。等待几秒，右侧就会生成代码和可视化预览。
4. 查看和复制代码：生成的结果分为“Preview”标签页（可视化展示）和“Code”标签页（完整的 React 代码）。你可以直接复制代码插入到自己的项目中，或者点击“Use in Project”将组件保存到 Vercel 的关联项目里。

如果你是第一次接触，建议先试试简单的组件（如按钮、卡片、导航栏），熟悉后再挑战复杂页面。

核心功能

1. 根据自然语言描述生成 UI

这是 v0 的最基本功能。你可以用中文或英文输入，描述你的界面需求。例如：“帮我生成一个博客文章列表，每篇文章包含标题、摘要、发布日期和一个‘阅读更多’链接”。v0 会理解语义，输出对应的 JSX 代码和样式。

2. 迭代对话修改

生成的结果不满意？不需要重新输入整个需求，可以直接在对话中追加修改要求。例如：“把卡片改成圆角，背景色换成灰色，并且为每张卡片添加悬停阴影效果”。v0 会保留上下文，只对指定部分进行调整。这种迭代方式比手动改代码更直观。

3. 多版本对比与选择

当你对同一个需求输入不同的提示词时，v0 会生成多个候选版本。你可以并排预览这些版本，选择最接近你预期的那个继续修改，或者混合不同版本的优点。

4. 导出与集成

生成的代码可以直接复制使用，也可以通过 Vercel 的集成一键部署。v0 原生与 Next.js、Tailwind CSS、Shadcn UI 兼容，生成的组件风格默认使用这些技术栈，方便直接嵌入到现有项目中。如果你使用其他框架（如纯 React 或 Gatsby），也可以手动调整依赖。

5. 使用图片作为输入（Beta）

部分用户可以使用“Image to Code”功能，上传一张 UI 设计图或截图，v0 尝试分析布局并生成对应的代码。这个功能目前仍处于测试阶段，对于简单页面效果不错，复杂设计需要人工修正。

进阶技巧

结合系统提示词控制输出风格

v0 支持在对话中设置系统级别的偏好。例如你可以在输入框开头加上：You are a senior frontend developer. Use dark theme and minimal design. 这样后续所有生成都会遵循这个风格。你也可以在 Vercel 的 Dashboard 中为你的账号设置全局偏好，比如默认字体、颜色方案、组件库版本等。

利用 markdown 文档驱动生成

如果你有一个完整的 UI 设计规范文档（如 Notion 或 Figma 中的描述），可以一次性把多个组件的需求粘贴到 v0 的输入框中，用 “##” 分隔不同的组件。v0 会按顺序生成一组组件，并保持设计一致性。这对于快速搭建页面框架非常省力。

国内使用提示

由于 v0 的服务部署在海外，国内访问可能需要稳定的网络工具（如 VPN）才能正常加载页面和调用生成 API。此外，免费版有每日使用次数限制（约 10-20 次），如果要大量使用，可以考虑付费订阅（Pro 版每月约 $20，包含更多生成次数和优先队列）。注意：免费版生成的代码可随意商用，但需要遵守 Vercel 的服务条款。

国产替代

目前国内类似 v0 的产品并不多，但有一些初步尝试。例如阿里的“通义灵码”支持生成代码片段（但不限于 UI），以及百度“文心一言”的代码生成能力也可以辅助 UI 部分。如果你需要完全离线或本地部署的 UI 生成方案，开源社区有“GPT Engineer”等项目，但成熟度和易用性不如 v0。可以持续关注各大云厂商的 AI 助手更新。

内容来源

• 视频地址：https://www.youtube.com/watch?v=bfmHh5sWtpg
• 视频标题：Google Antigravity: From Beginner to Expert in 10 Minutes
• 频道：Builders Central

（说明：视频中演示的“Google Antigravity”工具与 v0 功能高度相似，本教程基于该视频的介绍，