v0 快速上手：用自然语言生成 React 组件

什么是 v0？

v0 是 Vercel 推出的 AI UI 生成器，可以将自然语言描述转换为可用的 React 组件代码。它使用 shadcn/ui 组件库和 Tailwind CSS，生成的代码可以直接用于 Next.js 项目。

为什么用 v0？

零代码门槛：用自然语言描述界面
生产级代码：生成的代码遵循最佳实践
快速原型：几秒钟生成一个组件
设计转代码：支持上传 Figma 设计稿

我用 v0 做了一个落地页

让我对 v0 "种草"的是一次帮朋友做项目的经历。

朋友在做一个知识付费课程，需要一个落地页。以前这种事我至少要花半天——打开 Figma 画设计稿，然后写 HTML/CSS，再调响应式。但这次我决定试试 v0。

我在 v0 的输入框里写了一段描述："创建一个知识付费课程的落地页。Hero 区域有大标题'30 天掌握 AI 工具'和 CTA 按钮。下面是课程大纲（6 个模块），讲师介绍，学员评价，定价卡片（基础版 99 元、进阶版 299 元），底部 FAQ。整体风格现代简洁，配色用深蓝+白。"

30 秒后，v0 生成了一个完整的页面。说实话，效果比我自己画的设计稿还好看——排版舒适，间距合理，响应式也做好了。我只花了 10 分钟微调了一些文案和颜色，然后用 npx v0 add 导入到 Next.js 项目里。

朋友看到之后问我："这是你花多少钱找设计师做的？" 我说："免费的，AI 生成的。" 他当场就让我教他用 v0。

开始使用

访问 v0

打开 v0.dev，使用 Vercel 账号登录。

免费额度

方案	价格	额度
Free	$0/月	$5 额度
Premium	$20/月	$20 额度
Team	$30/用户/月	$30 额度

基础用法

方式一：文字描述

在输入框中描述你想要的 UI：

一个现代风格的登录表单，包含邮箱和密码输入框，
有"记住我"复选框和"忘记密码"链接，
底部有登录按钮和社交登录选项（Google、GitHub）

v0 会生成完整的 React 组件代码。

方式二：上传设计稿

点击 Upload 按钮
上传 Figma 设计截图或 UI 草图
v0 自动生成对应代码

方式三：迭代优化

生成后可以继续对话优化：

把按钮改成圆角更大的样式
添加一个加载状态
配色改成深色主题

实用提示词模板

导航栏

创建一个响应式导航栏：
- 左侧 Logo
- 中间导航链接：首页、产品、定价、关于
- 右侧登录/注册按钮
- 移动端显示汉堡菜单
- 滚动时添加背景模糊效果

英雄区（Hero Section）

创建一个 SaaS 产品的 Hero 区域：
- 大标题："用 AI 提升你的工作效率"
- 副标题描述产品价值
- 两个 CTA 按钮：开始免费试用、观看演示
- 右侧放一个产品截图或 3D 插图
- 背景使用渐变色

定价卡片

创建三列定价卡片：
- 基础版：$9/月，列出 5 个功能
- 专业版（推荐）：$29/月，列出 8 个功能，有高亮边框
- 企业版：自定义价格，联系销售按钮
- 每个卡片有选择按钮
- 专业版显示"最受欢迎"徽章

数据表格

创建一个用户管理表格：
- 列：头像、姓名、邮箱、角色、状态、操作
- 支持排序和筛选
- 有分页组件
- 操作列有编辑和删除按钮
- 状态用不同颜色的徽章显示

仪表盘

创建一个数据分析仪表盘：
- 顶部 4 个统计卡片：总用户、活跃用户、收入、增长率
- 中间一个大的折线图显示趋势
- 右侧一个饼图显示用户分布
- 底部一个最近活动列表

导出代码

方式一：复制代码

点击 Code 按钮，直接复制生成的代码。

方式二：添加到项目

点击 Add to Codebase
运行生成的命令：

npx v0 add <component-id>

代码会自动添加到你的项目中。

方式三：在 Cursor 中使用

v0 支持 MCP 协议，可以在 Cursor 中直接调用：

@v0 创建一个博客文章卡片组件

最佳实践

1. 提供足够细节

❌ 创建一个按钮

✅ 创建一个主要操作按钮：
- 渐变背景（紫色到蓝色）
- 圆角 12px
- 悬停时有轻微上浮效果
- 包含图标和文字
- 有加载状态

2. 指定技术栈

使用 shadcn/ui 组件和 Tailwind CSS 创建...
使用 Framer Motion 添加动画效果...
使用 Recharts 创建图表...

3. 参考现有设计

参考 Linear 的设计风格，创建一个任务列表...
仿照 Notion 的侧边栏，创建一个文档导航...

4. 分步迭代

先生成基础结构，再逐步优化：

第一步：创建基础布局
第二步：添加响应式支持
第三步：添加动画效果
第四步：优化暗色模式

v0 的局限性

适合的场景

✅ 标准 UI 组件（导航、表单、卡片） ✅ 快速原型设计 ✅ 学习组件结构 ✅ 设计稿转代码

不适合的场景

❌ 复杂业务逻辑 ❌ 数据获取和状态管理 ❌ 后端 API 对接 ❌ 高度定制化的动画

v0 生成的是 UI 代码，业务逻辑、数据处理、API 对接仍需手动实现。

配合其他工具

v0 + Cursor 工作流

v0 生成 UI 组件
Cursor 添加业务逻辑
Cursor 连接后端 API
Cursor 编写测试用例

v0 + Claude Code 工作流

# 用 v0 生成组件
npx v0 add pricing-card

# 用 Claude Code 添加逻辑
claude
> @src/components/pricing-card.tsx 为这个组件添加 Stripe 支付集成

常见问题

Q: 生成的代码能直接用于生产吗？

可以，但建议：

检查无障碍性（a11y）
测试响应式表现
根据项目规范调整样式变量

Q: 支持 Vue/Angular 吗？

目前 v0 专注于 React + Tailwind。其他框架需要手动转换。

Q: 如何保持设计一致性？

在提示词中明确：

使用我项目中已有的设计变量：
- 主色：#6366f1
- 圆角：8px
- 字体：Inter

总结

v0 是目前最好的 AI UI 生成器，特别适合：

快速搭建原型
将设计稿转为代码
学习 React + Tailwind 组件结构

推荐工作流：

v0 生成基础 UI
Cursor/Claude Code 添加逻辑
手动优化细节