注册

v0 注册不要钱，不要信用卡。打开 v0.app，用以下任一方式登录：

• GitHub 账号（推荐，后面 Git 集成方便）
• Google 账号
• 邮箱
• 已有的 Vercel 账号

登录后自动获得每月 $5 免费额度，够跑完这个教程。

界面长什么样

v0 的界面是典型的 AI 对话 + 实时预览布局：

| 区域 | 功能 | |------|------| | 左侧聊天区 | 输入描述、迭代需求 | | 右侧 Preview 标签 | 实时预览生成的应用 | | 右侧 Code 标签 | VS Code 风格编辑器，逐文件查看代码 | | 顶部栏 | 项目名称、Deploy 按钮、Git 面板 | | 侧边栏 | 环境变量（Vars）、模板、MCP 集成 |

创建第一个项目

点击聊天区的 "+" 或直接输入描述。试试这个：

创建一个个人作品集网站，包含：
顶部导航栏（首页、项目、关于我、联系方式）
Hero 区域带我的名字和一句话介绍
项目卡片网格，每个卡片有标题、描述、截图、链接
底部联系表单
暗色主题
响应式布局，手机端自动适配

v0 会花 10-30 秒生成完整的 Next.js 应用。右侧 Preview 直接能看效果，Code 标签能看到生成的文件结构：

app/
  layout.tsx        # 全局布局
  page.tsx          # 首页
components/
  ui/               # shadcn/ui 组件
  navbar.tsx        # 导航栏
  hero.tsx          # Hero 区域
  project-card.tsx  # 项目卡片
  contact-form.tsx  # 联系表单
lib/
  utils.ts          # 工具函数

迭代修改

不满意？直接在聊天里说：

• "把 Hero 区域的背景换成渐变色"
• "项目卡片加上悬浮放大效果"
• "导航栏改成固定在顶部"

每次修改 v0 都会生成新版本，所有历史版本都保存着，随时回滚。

还有个省钱技巧：切换到 Design Mode，直接点击页面上的元素修改颜色、字体、间距、文字——这些操作不消耗额度。只有 AI 生成才扣 credits。

部署上线

满意了？点右上角 Deploy 按钮：

1. v0 自动创建 Vercel 项目（名称前缀 v0-） 2. 几秒钟后给你一个 xxx.vercel.app 的线上地址 3. 自带 SSL 证书、全球 CDN、Serverless Functions 4. 后续修改再点 Deploy 就更新同一个项目

如果需要自定义域名，部署后在 v0 界面直接配置就行。

到这一步，你已经从零到上线了一个网站，全程没写一行代码。