# 第九章：实战案例展示

> **本章你将学到：** 三个真实的 vibe coding 项目从想法到成品的完整过程，包括真实的问题和解决方案。

## 看看完整的过程

前面的章节教了你方法和技巧，但你可能会想："在真正的项目中，这些东西是怎么串起来的？"

这一章我用三个案例来完整展示 vibe coding 的真实过程。三个案例难度递增：

- **案例 1**：个人作品集页面（简单，约 15 分钟）
- **案例 2**：习惯打卡小工具（中等，约 30-45 分钟）
- **案例 3**：带数据存储的记事本应用（进阶，约 1-2 小时）

**重要提醒：** 关注过程和方法，不要只看结果。每个案例中遇到的问题和解决方式，都是你将来会用到的。

---

## 案例 1：个人作品集页面（简单）

### 背景

小明想做一个展示自己摄影作品的单页面网站，给朋友看看自己的作品。

**使用工具：** Lovable

### 第 1 轮：初始描述

小明用 WAFS 框架整理了需求，输入了第一条 prompt：

> 帮我做一个摄影作品集的单页面网站。
> - 顶部有一个大标题"小明的摄影世界"和一句简短的介绍
> - 下面是照片网格，3 列布局，每张照片是正方形缩略图
> - 点击照片可以弹出放大查看
> - 先用 6 张占位图片代替
> - 底部有联系邮箱
> - 整体黑白灰色调，简洁现代

AI 很快生成了第一版。整体方向是对的——黑白灰色调、网格布局都有了。但有几个问题。

<!-- screenshot: 案例1 第1轮生成效果 -->

### 第 2 轮：修改布局

小明觉得照片之间的间距太大了，整体看起来有点松散。

> 照片之间的间距缩小一半。网格从 3 列改成 4 列。标题和照片网格之间的距离也缩小一些。

效果立刻紧凑了很多，看起来更像一个专业的作品集了。

<!-- screenshot: 案例1 第2轮修改后效果 -->

### 第 3 轮：调整配色

黑白灰是对的，但小明觉得有点太"冷"了。

> 背景色改成深灰色（#1a1a1a），不要纯黑。标题用白色，介绍文字用浅灰色。照片 hover 的时候加一个轻微的放大效果和阴影。

这一轮改完之后，氛围感好了很多——有一种画廊的感觉。

<!-- screenshot: 案例1 第3轮调整后效果 -->

### 第 4 轮：添加响应式

小明用手机打开试了一下，发现 4 列的布局在手机上太挤了。

> 在手机上查看的时候，照片网格自动变成 2 列。标题字号也适当缩小。点击放大照片的弹窗也要适配手机屏幕。

这就是我们在第七章说过的"当 AI 做的东西在手机上不对时"的实际应用。

<!-- screenshot: 案例1 手机端效果 -->

### 第 5 轮：最终微调

> 页面底部加一行小字"© 2026 小明"。照片弹窗打开的时候加一个淡入动画。

完成！

<!-- screenshot: 案例1 最终成品效果 -->

### 技巧回顾

- **用了 WAFS 框架**写第一条 prompt（第五章）
- **每次只改一件事**，5 轮就做完了（第六章黄金法则）
- 遇到手机适配问题时，**具体描述问题**而不只是说"手机上不对"（第七章）
- 总用时：约 **15 分钟**

---

## 案例 2：习惯打卡小工具（中等）

### 背景

小红想做一个每天记录习惯完成情况的小工具——每天有几个固定习惯（喝水、运动、阅读），做完了就打个勾。

**使用工具：** Cursor

### 第 1 轮：描述核心需求

> 帮我做一个习惯打卡工具。功能如下：
> - 页面显示今天的日期
> - 下面列出 5 个习惯：早起、喝 8 杯水、运动 30 分钟、阅读 30 分钟、早睡
> - 每个习惯旁边有一个勾选框，点击表示完成
> - 底部显示今天完成了几个（比如"3/5 已完成"）
> - 整体风格清新可爱，用浅绿色作为主色调

AI 生成了一个基础版本，看起来还不错。

<!-- screenshot: 案例2 第1轮基础版 -->

### 第 2 轮：添加打卡交互

小红试着勾选了几个习惯，发现视觉反馈不够明显——勾选后只是多了一个勾，不太有成就感。

> 勾选一个习惯后，整行的背景变成浅绿色，文字变成灰色并加一条删除线。全部完成后，页面顶部显示一个"今天全部完成！🎉"的提示。底部的进度改成进度条样式。

这一轮修改之后，打卡的"仪式感"强了很多。

<!-- screenshot: 案例2 第2轮效果 -->

### 第 3 轮：遇到 Bug——刷新后数据丢失！

小红打了几个卡，感觉不错。然后她不小心刷新了页面——**所有打卡记录都没了！**

这是一个很典型的 bug。默认情况下，网页上的数据是"临时的"，刷新就会消失。小红用了第七章学到的句式：

> 当我刷新页面的时候，之前的打卡记录应该还在，但实际上全部消失了。请帮我加上数据保存功能，刷新后打卡状态不丢失。

AI 理解了问题，加了"本地存储"（浏览器自带的数据保存功能）来解决。

<!-- screenshot: 案例2 第3轮 bug 修复 -->

### 第 4 轮：添加本地存储后验证

小红又测试了一遍：打卡 → 刷新 → 数据还在。问题解决了！

然后她继续加功能：

> 帮我加上历史记录功能。在页面底部加一个"查看历史"按钮，点击后显示过去 7 天的打卡记录（用简单的日历或列表形式）。

<!-- screenshot: 案例2 第4轮历史记录功能 -->

### 第 5 轮：添加统计功能

> 在历史记录上方加一行统计：本周打卡率（完成数/总数）。如果打卡率超过 80%，显示一句鼓励的话。

<!-- screenshot: 案例2 最终版 -->

### 技巧回顾

- 第 1 轮用 **WAFS** 描述了清晰的需求
- 第 2 轮注重 **用户体验**（视觉反馈和仪式感）
- 第 3 轮遇到了真实的 bug，用 **"做了X，应该Y，实际Z"** 的句式反馈（第七章）
- 第 4 轮 **先验证 bug 修好了**，再加新功能（第六章黄金法则 3）
- 功能从简单到复杂逐步叠加
- 总用时：约 **30-45 分钟**

---

## 案例 3：带数据存储的记事本应用（进阶）

### 背景

老王想做一个可以多设备同步的记事本——在电脑上写的笔记，手机上也能看到。这比前两个案例复杂得多，因为涉及到"后端"（数据存在服务器上，而不只是在浏览器里）。

**使用工具：** Cursor + Supabase（一个免费的后端服务）

### 什么是"后端"？

前面两个案例做的东西，数据都存在你的浏览器里（本地）。这意味着换一台电脑或者换一个浏览器，数据就没了。

如果你想要多设备同步——比如电脑和手机都能看到同一份笔记——就需要把数据存到一个"中转站"上。这个中转站就是"后端服务"。

**Supabase** 是一个免费的后端服务，你可以把它想象成一个"云端数据库"。你不需要理解它的技术细节，只需要知道：它帮你在云端存数据，免费的。

### 第 1 轮：做基础的记事本界面

老王先不管后端，从界面开始：

> 帮我做一个简洁的记事本应用。左侧是笔记列表，右侧是编辑区域。
> - 左侧列表显示笔记标题和最后修改时间
> - 可以新建笔记、删除笔记
> - 右侧是一个文本编辑区域，可以修改标题和正文
> - 先用假数据，准备 3 条示例笔记
> - 风格参考 Apple 备忘录的简洁感

<!-- screenshot: 案例3 第1轮基础界面 -->

老王按照第八章说的"先骨架，再功能"的原则，第一步只做界面，不考虑数据存储。

### 第 2 轮：让 AI 帮忙接入 Supabase

界面满意后，老王开始加后端：

> 我想把笔记数据存到 Supabase 上，这样不同设备都能访问。请帮我：
> 1. 告诉我需要在 Supabase 上做什么准备工作（建表之类的）
> 2. 把代码改成从 Supabase 读取和保存数据

AI 给出了详细的步骤：先去 Supabase 网站注册、创建项目、建一个 notes 表。然后 AI 修改了代码来连接 Supabase。

这里老王遇到了一些 AI 的技术回复看不太懂的地方——比如"API Key""数据库表结构"。他按照第七章的建议，直接问 AI：

> 你说的 API Key 是什么？我在哪里能找到它？能用大白话解释一下吗？

AI 用截图描述和步骤说明帮他找到了需要的信息。

<!-- screenshot: 案例3 Supabase 配置过程 -->

### 第 3 轮：实现登录功能

数据存到云端了，但有一个问题——任何人都能看到这些笔记。老王需要加登录功能：

> 帮我加一个简单的登录功能。用邮箱+密码登录。没登录的时候显示登录页面，登录后才能看到笔记。用 Supabase 自带的认证功能。

<!-- screenshot: 案例3 登录页面 -->

这一步有点复杂，AI 生成的代码第一次有一个小 bug（登录后没有自动跳转到笔记页面）。老王按照第七章的方法，把错误描述发给 AI，很快就修好了。

### 第 4 轮：实现数据同步

> 现在让每个用户只能看到自己的笔记。不同用户登录后看到的笔记列表是各自独立的。

这一步 AI 处理得很顺利，因为 Supabase 本身就支持这个功能。

### 第 5 轮：部署上线

最后，老王用第八章学到的方法部署了这个应用：

> 帮我配置好这个项目，让它可以部署到 Vercel 上。

AI 帮他调整了配置文件。老王按照第八章的步骤，用 GitHub Desktop 推送代码，然后在 Vercel 上一键部署。几分钟后，他得到了一个可以分享的网址——在电脑上写的笔记，手机打开同一个网址就能看到。

<!-- screenshot: 案例3 最终成品——在电脑和手机上同时显示 -->

### 技巧回顾

- 用了 **"先骨架再功能"** 的方法（第八章），第 1 步只做界面
- **遇到不懂的技术术语直接问 AI**（第七章错误 4）
- 遇到 bug 时用标准句式反馈
- 用 **Vercel 部署上线**（第八章）
- 整个过程分了 5 轮，每轮目标明确
- 总用时：约 **1-2 小时**

---

## 三个案例的共性总结

回顾这三个案例，你会发现它们有很多共同点：

1. **都从一个清晰的描述开始。** 没有人第一句话就说"帮我做一个复杂的应用"。都是先想清楚要什么，用 WAFS 框架组织好，然后开始。

2. **都经历了多轮迭代。** 没有一个案例是 AI 第一版就完美的。都是做出来、看看、改、再看看、再改。这是完全正常的流程。

3. **都遇到了需要修改的地方。** 布局不对、配色不满意、Bug、功能缺失——这些问题在每个项目中都会出现。关键是用前面学到的方法去解决。

4. **都是从简单开始逐步变复杂。** 案例 1 只是一个静态页面，案例 2 加了交互和本地存储，案例 3 加了后端和登录。就像打游戏，先过简单关，再挑战难的。

5. **最终都做出了可用的东西。** 不是停留在"想法"阶段，而是实实在在地做出来了。这就是 vibe coding 的魅力——降低了"从想法到成品"的门槛。

**如果你一路跟着做到了这里，你已经不是一个"零基础的人"了——你是一个有实战经验的 vibe coder。**

## 本章小结

- **案例 1（简单）：** 个人作品集，5 轮对话，15 分钟
- **案例 2（中等）：** 习惯打卡工具，5 轮对话，30-45 分钟，包含 bug 修复
- **案例 3（进阶）：** 云端记事本，5 轮对话，1-2 小时，涉及后端和部署
- **共性：** 清晰描述 → 多轮迭代 → 遇到问题就解决 → 逐步增加复杂度
- 所有前面学到的技巧在实战中都用上了

## 下一步预告

最后一章了。你已经掌握了 vibe coding 的核心技能，也有了实战经验。下一章我们来聊聊：接下来你可以往哪些方向继续走。