VibeCoding实战案例

理论讲再多不如看实战。本篇展示 5 个完整的 Vibe Coding 项目案例，从需求描述到最终成品，每一步包含提示词、AI 输出、踩坑、收获。可以直接复制这些工作流套用到你自己的项目。

1. 案例一：30 分钟做一个习惯追踪 PWA

背景

我想记录每天是否完成了"早起、运动、读书、冥想"这 4 件事。市面上的 App 都太重了，自己做一个。

Step 1：写需求（5 分钟）

做一个习惯追踪 PWA。

【栈】Vite + React + TS + Tailwind + Dexie.js
【数据】纯本地，IndexedDB

【功能】
- 4 个固定习惯：早起、运动、读书、冥想（可在设置里改）
- 主页显示今日 4 个圆形勾选框
- 完成时打勾 + 微动画
- 显示最近 30 天的"打卡热力图"（类似 GitHub）
- 显示当前连续打卡天数

【设计】
- 极简，主色白 + 黑 + 一抹绿（打卡色 #22c55e）
- 字体大、可读
- 圆角 12px
- iOS 风格的开关动画

【部署】PWA + Vercel

Step 2：让 AI 起项目（2 分钟）

请按上面需求创建完整项目。

先列文件结构和关键依赖，确认后再写代码。

AI 列出：

src/
├── App.tsx
├── main.tsx
├── components/
│   ├── HabitCard.tsx
│   ├── Heatmap.tsx
│   └── StreakBadge.tsx
├── lib/
│   ├── db.ts          # Dexie 配置
│   └── habits.ts      # 业务逻辑
├── pages/
│   ├── Home.tsx
│   └── Settings.tsx
└── styles/
    └── globals.css

依赖：
- react, react-dom
- dexie, dexie-react-hooks
- date-fns
- lucide-react
- vite-plugin-pwa

我说 OK，让它开写。

Step 3：跑通 + 调样式（10 分钟）

跑起来后第一版长这样：能用，但不好看。

样式不太对。我想要：

1. 主页顶部是日期（大、加粗）
2. 4 个习惯卡片是横向并排，圆形勾选 + 文字 + 当前连续天数
3. 勾选时整张卡片有微妙的弹性动画
4. 下面是热力图，5 行 7 列（最近 5 周），每个格子很小
5. 整体留白多，不要塞满

AI 调整后接近预期。再迭代两轮微调字号和间距。

Step 4：加细节（10 分钟）

加几个小细节：

1. 凌晨 0 点会不会自动重置？验证一下逻辑
2. 加一个"补打卡"功能：点击热力图的某个格子，可以补/取消打卡
3. 设置页面：可以增删习惯，最多 6 个
4. 全部完成时，主页底部出一个小庆祝动画（confetti）

AI 一次性加上。

Step 5：自审 + 修 bug（3 分钟）

请审一下你刚才的代码：
- useEffect 依赖数组
- IndexedDB 异步操作的错误处理
- 跨天逻辑（特别是时区）

发现 1 个时区 bug：用 new Date().toISOString() 存 key，会按 UTC 而不是本地。

修复：用本地日期作为 key，格式 YYYY-MM-DD

修复完成。

Step 6：PWA + 部署（5 分钟）

1. 加 vite-plugin-pwa
2. 生成 192/512 logo（绿色背景 + 白色对勾）
3. 部署到 Vercel

3 分钟后 habits.example.com 上线。

收获

真实耗时：35 分钟
AI 主导，我只负责"看效果 + 反馈"
跨天时区的 bug 是非常常见的，要主动让 AI 检查
PWA 部署比想象中简单

2. 案例二：一个下午做一个 SaaS MVP

背景

朋友想做一个"会议纪要总结"的小工具：上传录音 → 自动总结。一个下午能不能做出付费版？

Step 1：架构设计

做一个会议纪要总结 SaaS。

【流程】
- 用户上传 mp3/wav
- 后端转文字（用 Whisper API）
- 用 GPT 总结
- 展示纪要 + 待办
- 收费：每月 5 次免费，付费 $9/月

【栈】
- 前端：Next.js 14 + Tailwind + shadcn/ui
- 后端：Next.js API Routes
- DB：Supabase
- 文件：Supabase Storage
- 鉴权：Supabase Auth
- 支付：Stripe
- 部署：Vercel

请先列：
1. 文件结构
2. 数据库 schema
3. API endpoints
4. 关键页面

不要写代码。

AI 给出完整方案。我审了 schema，调整了几个字段（加了 summary_version 用于支持后续重新生成）。

Step 2：起脚手架

按方案创建项目。
- 用 create-next-app
- 配 Tailwind + shadcn/ui
- 接 Supabase（本地用 Supabase CLI）
- 写好基础布局（Navbar + 路由）

不要立即接 Stripe，先做核心流程。

10 分钟后跑起来。

Step 3：核心流程（一段段做）

3.1 上传文件

做"上传文件"功能：
- 拖拽 + 点击都能上传
- 限制 mp3/wav，最大 100MB
- 上传时显示进度
- 上传完跳转到"处理中"页面

3.2 转文字 + 总结

做"处理"逻辑：
- API: POST /api/transcribe
- 调 OpenAI Whisper 转文字
- 调 GPT-4o 总结
- 写入 DB
- 状态：pending → transcribing → summarizing → done

提示词用我下面的（用过 prompt 工程的会议纪要模板）：
{...}

3.3 展示纪要

纪要页面：
- 路径：/notes/[id]
- 显示概要、议题、待办
- 待办可以勾选（保存到 DB）
- 可以导出 Markdown / PDF

3.4 鉴权

接 Supabase Auth：
- Email + Magic Link
- 未登录跳到 /login
- 用户 dashboard 显示自己的纪要列表

3.5 计费

接 Stripe：
- 计算用户当月已用次数
- 超过 5 次跳到 /pricing
- 订阅后解锁
- 用 Stripe Checkout（不要自己做信用卡表单）

注意：webhook 处理订阅状态，加签名校验。

每段都让 AI 先列计划再写代码。

Step 4：人审关键代码

请把这些文件给我列出来，我要人工审：
- /api/stripe/webhook.ts
- /api/transcribe.ts
- middleware.ts
- lib/auth.ts

我审了：发现 webhook 没校验签名（AI 写忘了）、transcribe 没限制并发（用户能恶意烧钱）。

补： - 加 Stripe 签名校验 - 用 Upstash Ratelimit 限流

Step 5：上线

部署到 Vercel：
- Supabase 切到生产
- 配 Stripe live key
- 配 OpenAI key
- 配域名

给我一个上线 checklist。

AI 列出 12 项。我逐项 check，2 个忘了配（监控、错误日志）。

收获

真实耗时：6 小时
关键流程：架构 → 脚手架 → 核心流程（分段）→ 人审 → 上线
安全相关代码（webhook、限流）必须人审
一个人 + AI = 以前 2-3 人团队 1 周的产出

3. 案例三：复刻 Linear 一个页面

背景

我看 Linear 的 issue 列表很喜欢。想用 Vibe 复刻这个页面，作为以后项目的 UI 模板。

Step 1：截图驱动

打开 Linear，截全屏。扔给 Cursor。

请复刻这张图的 UI。

【范围】
- 只做静态页面，不要交互
- 用 React + Tailwind
- 数据用 mock，写在文件里

【关注点】
- 字体、字号、行距完全照搬
- 配色、间距、圆角
- 图标用 lucide-react，找最接近的
- 每个细节都尽量还原

Step 2：第一版 + diff 调整

AI 给了第一版。我对比原图，列差异：

对比原图，差异：

1. 左侧 sidebar 太宽（应该 240px）
2. issue 行高太大（应该 36px 左右）
3. 优先级图标颜色不对（应该是淡灰，不是黑）
4. 状态徽章圆角太大（应该是 4px）
5. 整体字号偏大（应该是 13px 左右）

修复以上 5 点。其他部分不要改。

迭代 4-5 轮，像素级接近原图。

Step 3：抽成组件

把这些组件抽成可复用的：
- IssueRow
- StatusBadge
- PriorityIcon
- AssigneeAvatar

每个组件文件单独一份，加 props 类型。

AI 抽好。

Step 4：上传到自己的设计库

把这套组件打包，让我可以在新项目用：
- 创建一个 packages/ui 文件夹
- export 所有组件
- 写一个简单的 README，列出每个组件的用法

我下次起新项目就可以拷贝这个文件夹用。

收获

真实耗时：1 小时
截图驱动是 UI 复刻的最快方式
像素级还原需要多轮 diff 调整，每次只改少数几点
复刻完抽成组件库，长期受益

4. 案例四：用 Claude Code 做依赖升级

背景

我有一个 Next.js 13 的旧项目，想升级到 Next.js 15。手动改太累。

Step 1：让 Claude Code 出方案

请把这个项目从 Next.js 13 升级到 15。

先做：
1. 看 Next.js 15 官方迁移指南
2. 列出本项目会受影响的文件
3. 列出可能 break 的点
4. 列出步骤

不要立即改代码。

Claude Code 用 web search 查了官方指南，列出：

受影响：13 个文件
breaking change：Image 组件 prop、async params、middleware 改动
步骤：8 步，每步可独立验证

Step 2：分步执行 + 跑测试

按你列的步骤一步步做。

每步完成后：
1. 跑 npm run build 验证
2. 跑 npm test 验证
3. 报告通过/失败

如果失败，分析原因再继续。
不要跳过步骤。

Claude Code 进入 Auto 模式： - 升级 package.json - 跑 npm install - 改 next.config.js - 修 Image 组件用法 - 跑 build → 失败 → 分析 → 修 - 跑 test → 通过 - 改 middleware 签名 - 跑 build → 通过 - ……

整个过程我没动手，只看着报告。

Step 3：人审 diff

列出所有改动的文件 + 简要说明每个改动的原因

我审了 diff，发现： - 1 个文件 AI 把我自定义的逻辑误删了（重新加回） - 其他都对

Step 4：补测试

Next.js 15 的 dynamic params 改成了 async。
请补测试覆盖这部分，确保没有 race condition。

补了 5 个测试用例。

收获

真实耗时：45 分钟（手动需要半天）
Auto 模式 + 测试验证 = 最适合升级类任务
必须人审最终 diff，AI 偶尔会"顺手"删东西
升级类任务有标准答案（官方指南），AI 表现最好

5. 案例五：写一个内部工具

背景

公司有 10 个 markdown 文档需要批量加 frontmatter。手写太累，用 Vibe 写个脚本。

Step 1：一句话描述

写一个 Node.js 脚本：

- 遍历 docs/ 下所有 .md 文件
- 如果没有 frontmatter，加上：
  ---
  title: <文件名（不含扩展名）>
  date: <git 第一次提交日期，找不到用今天>
  ---
- 已有 frontmatter 的，补全缺失字段，已有字段不动

dry-run 模式：默认只打印改动，加 --apply 才实际写入。

Step 2：AI 一次写完

不到 1 分钟，脚本写好。

Step 3：跑 dry-run 验证

node scripts/add-frontmatter.js

输出：

[would update] docs/intro.md
  + title: intro
  + date: 2024-03-15

[skip, has frontmatter] docs/guide.md

[would update] docs/api.md
  + title: api
  + date: 2024-04-02

看起来对。

Step 4：执行

node scripts/add-frontmatter.js --apply

10 个文件全部处理。

收获

真实耗时：3 分钟
一次性脚本是 Vibe Coding 最爽的场景
dry-run 模式是脚本的好习惯，让 AI 写时主动要求
这种"5 分钟省 1 小时"的场景每天都有，养成"凡事先想'AI 能不能干'"的习惯

6. 五个案例的共性

不论项目大小，Vibe Coding 都遵循类似流程：

1. 想清楚要什么（5-10% 时间）
2. 让 AI 列计划（5% 时间）
3. AI 实现（30-50% 时间）
4. 你验收 + 反馈（30% 时间）
5. 关键模块人审（10% 时间）
6. 部署 / 交付（5% 时间）

时间花在"想清楚"和"验收"上，写代码反而最少。这就是 Vibe 的本质转变。

7. 共性的踩坑

5 个案例都遇到过的坑：

坑	出现频率
时区 / 日期处理	80%
状态管理边界（loading/error/empty）	70%
表单校验不充分	60%
异步竞争	50%
安全（鉴权、注入）	40%
性能（无意义重渲染）	40%

主动让 AI 检查这些点，可以省大量返工。

8. 进阶：从案例到方法论

把每次成功项目沉淀成模板：

个人模板库结构

my-prompts/
├── starter/
│   ├── pwa.md            # PWA 起步模板
│   ├── saas.md           # SaaS 起步模板
│   └── tool.md           # 内部工具模板
├── ui/
│   ├── linear-style.md   # Linear 风格
│   └── notion-style.md   # Notion 风格
├── workflows/
│   ├── upgrade.md        # 升级类任务
│   ├── refactor.md       # 重构类任务
│   └── debug.md          # 调试类任务
└── safety/
    ├── auth.md
    └── stripe.md

每次写得好的提示词放进去，下次直接用。

9. 最后一个 tip

每个项目结束做一次复盘：

今天我用 Vibe 做了 X。

回答：
1. 哪些步骤特别顺利？为什么？
2. 哪些地方踩坑了？怎么避免？
3. 哪些提示词模板值得收藏？
4. 哪些是 AI 不擅长的？下次要自己做？

写下来，复用，迭代。这是 Vibe Coding 高手和新手的本质区别。

总结

5 个案例覆盖：PWA、SaaS、UI 复刻、依赖升级、内部工具
PWA 类：30 分钟一个项目，重点是描述清需求和视觉
SaaS 类：分段做，关键模块人审，安全代码必过
UI 复刻：截图驱动 + 多轮 diff 调整，像素级还原
升级类：Auto 模式 + 测试验证 = 完美场景
内部工具：一次性脚本最爽，dry-run 是好习惯
共性流程：想清楚 → 列计划 → 实现 → 验收 → 人审 → 部署
共性踩坑：时区、状态边界、表单校验、异步、安全
把每个成功项目沉淀成提示词模板，是 Vibe Coding 的复利
每个项目结束做一次复盘，是新手到高手的唯一路径