第九章：实战案例展示
本章你将学到： 三个真实的 vibe coding 项目从想法到成品的完整过程，包括真实的问题和解决方案。
看看完整的过程
前面的章节教了你方法和技巧，但你可能会想："在真正的项目中，这些东西是怎么串起来的？"
这一章我用三个案例来完整展示 vibe coding 的真实过程。三个案例难度递增：
- 案例 1：个人作品集页面（简单，约 15 分钟）
- 案例 2：习惯打卡小工具（中等，约 30-45 分钟）
- 案例 3：带数据存储的记事本应用（进阶，约 1-2 小时）
重要提醒： 关注过程和方法，不要只看结果。每个案例中遇到的问题和解决方式，都是你将来会用到的。
案例 1：个人作品集页面（简单）
背景
小明想做一个展示自己摄影作品的单页面网站，给朋友看看自己的作品。
使用工具： Lovable
第 1 轮：初始描述
小明用 WAFS 框架整理了需求，输入了第一条 prompt：
帮我做一个摄影作品集的单页面网站。
- 顶部有一个大标题"小明的摄影世界"和一句简短的介绍
- 下面是照片网格，3 列布局，每张照片是正方形缩略图
- 点击照片可以弹出放大查看
- 先用 6 张占位图片代替
- 底部有联系邮箱
- 整体黑白灰色调，简洁现代
AI 很快生成了第一版。整体方向是对的——黑白灰色调、网格布局都有了。但有几个问题。
第 2 轮：修改布局
小明觉得照片之间的间距太大了，整体看起来有点松散。
照片之间的间距缩小一半。网格从 3 列改成 4 列。标题和照片网格之间的距离也缩小一些。
效果立刻紧凑了很多，看起来更像一个专业的作品集了。
第 3 轮：调整配色
黑白灰是对的，但小明觉得有点太"冷"了。
背景色改成深灰色（#1a1a1a），不要纯黑。标题用白色，介绍文字用浅灰色。照片 hover 的时候加一个轻微的放大效果和阴影。
这一轮改完之后，氛围感好了很多——有一种画廊的感觉。
第 4 轮：添加响应式
小明用手机打开试了一下，发现 4 列的布局在手机上太挤了。
在手机上查看的时候，照片网格自动变成 2 列。标题字号也适当缩小。点击放大照片的弹窗也要适配手机屏幕。
这就是我们在第七章说过的"当 AI 做的东西在手机上不对时"的实际应用。
第 5 轮：最终微调
页面底部加一行小字"© 2026 小明"。照片弹窗打开的时候加一个淡入动画。
完成！
技巧回顾
- 用了 WAFS 框架写第一条 prompt（第五章）
- 每次只改一件事，5 轮就做完了（第六章黄金法则）
- 遇到手机适配问题时，具体描述问题而不只是说"手机上不对"（第七章）
- 总用时：约 15 分钟
案例 2：习惯打卡小工具（中等）
背景
小红想做一个每天记录习惯完成情况的小工具——每天有几个固定习惯（喝水、运动、阅读），做完了就打个勾。
使用工具： Cursor
第 1 轮：描述核心需求
帮我做一个习惯打卡工具。功能如下：
- 页面显示今天的日期
- 下面列出 5 个习惯：早起、喝 8 杯水、运动 30 分钟、阅读 30 分钟、早睡
- 每个习惯旁边有一个勾选框，点击表示完成
- 底部显示今天完成了几个（比如"3/5 已完成"）
- 整体风格清新可爱，用浅绿色作为主色调
AI 生成了一个基础版本，看起来还不错。
第 2 轮：添加打卡交互
小红试着勾选了几个习惯，发现视觉反馈不够明显——勾选后只是多了一个勾，不太有成就感。
勾选一个习惯后，整行的背景变成浅绿色，文字变成灰色并加一条删除线。全部完成后，页面顶部显示一个"今天全部完成！🎉"的提示。底部的进度改成进度条样式。
这一轮修改之后，打卡的"仪式感"强了很多。
第 3 轮：遇到 Bug——刷新后数据丢失！
小红打了几个卡，感觉不错。然后她不小心刷新了页面——所有打卡记录都没了！
这是一个很典型的 bug。默认情况下，网页上的数据是"临时的"，刷新就会消失。小红用了第七章学到的句式：
当我刷新页面的时候，之前的打卡记录应该还在，但实际上全部消失了。请帮我加上数据保存功能，刷新后打卡状态不丢失。
AI 理解了问题，加了"本地存储"（浏览器自带的数据保存功能）来解决。
第 4 轮：添加本地存储后验证
小红又测试了一遍：打卡 → 刷新 → 数据还在。问题解决了！
然后她继续加功能：
帮我加上历史记录功能。在页面底部加一个"查看历史"按钮，点击后显示过去 7 天的打卡记录（用简单的日历或列表形式）。
第 5 轮：添加统计功能
在历史记录上方加一行统计：本周打卡率（完成数/总数）。如果打卡率超过 80%，显示一句鼓励的话。
技巧回顾
- 第 1 轮用 WAFS 描述了清晰的需求
- 第 2 轮注重 用户体验（视觉反馈和仪式感）
- 第 3 轮遇到了真实的 bug，用 "做了X，应该Y，实际Z" 的句式反馈（第七章）
- 第 4 轮 先验证 bug 修好了，再加新功能（第六章黄金法则 3）
- 功能从简单到复杂逐步叠加
- 总用时：约 30-45 分钟
案例 3：带数据存储的记事本应用（进阶）
背景
老王想做一个可以多设备同步的记事本——在电脑上写的笔记，手机上也能看到。这比前两个案例复杂得多，因为涉及到"后端"（数据存在服务器上，而不只是在浏览器里）。
使用工具： Cursor + Supabase（一个免费的后端服务）
什么是"后端"？
前面两个案例做的东西，数据都存在你的浏览器里（本地）。这意味着换一台电脑或者换一个浏览器，数据就没了。
如果你想要多设备同步——比如电脑和手机都能看到同一份笔记——就需要把数据存到一个"中转站"上。这个中转站就是"后端服务"。
Supabase 是一个免费的后端服务，你可以把它想象成一个"云端数据库"。你不需要理解它的技术细节，只需要知道：它帮你在云端存数据，免费的。
第 1 轮：做基础的记事本界面
老王先不管后端，从界面开始：
帮我做一个简洁的记事本应用。左侧是笔记列表，右侧是编辑区域。
- 左侧列表显示笔记标题和最后修改时间
- 可以新建笔记、删除笔记
- 右侧是一个文本编辑区域，可以修改标题和正文
- 先用假数据，准备 3 条示例笔记
- 风格参考 Apple 备忘录的简洁感
老王按照第八章说的"先骨架，再功能"的原则，第一步只做界面，不考虑数据存储。
第 2 轮：让 AI 帮忙接入 Supabase
界面满意后，老王开始加后端：
我想把笔记数据存到 Supabase 上，这样不同设备都能访问。请帮我：
- 告诉我需要在 Supabase 上做什么准备工作（建表之类的）
- 把代码改成从 Supabase 读取和保存数据
AI 给出了详细的步骤：先去 Supabase 网站注册、创建项目、建一个 notes 表。然后 AI 修改了代码来连接 Supabase。
这里老王遇到了一些 AI 的技术回复看不太懂的地方——比如"API Key""数据库表结构"。他按照第七章的建议，直接问 AI：
你说的 API Key 是什么？我在哪里能找到它？能用大白话解释一下吗？
AI 用截图描述和步骤说明帮他找到了需要的信息。
第 3 轮：实现登录功能
数据存到云端了，但有一个问题——任何人都能看到这些笔记。老王需要加登录功能：
帮我加一个简单的登录功能。用邮箱+密码登录。没登录的时候显示登录页面，登录后才能看到笔记。用 Supabase 自带的认证功能。
这一步有点复杂，AI 生成的代码第一次有一个小 bug（登录后没有自动跳转到笔记页面）。老王按照第七章的方法，把错误描述发给 AI，很快就修好了。
第 4 轮：实现数据同步
现在让每个用户只能看到自己的笔记。不同用户登录后看到的笔记列表是各自独立的。
这一步 AI 处理得很顺利，因为 Supabase 本身就支持这个功能。
第 5 轮：部署上线
最后，老王用第八章学到的方法部署了这个应用：
帮我配置好这个项目，让它可以部署到 Vercel 上。
AI 帮他调整了配置文件。老王按照第八章的步骤，用 GitHub Desktop 推送代码，然后在 Vercel 上一键部署。几分钟后，他得到了一个可以分享的网址——在电脑上写的笔记，手机打开同一个网址就能看到。
技巧回顾
- 用了 "先骨架再功能" 的方法（第八章），第 1 步只做界面
- 遇到不懂的技术术语直接问 AI（第七章错误 4）
- 遇到 bug 时用标准句式反馈
- 用 Vercel 部署上线（第八章）
- 整个过程分了 5 轮，每轮目标明确
- 总用时：约 1-2 小时
三个案例的共性总结
回顾这三个案例，你会发现它们有很多共同点：
都从一个清晰的描述开始。 没有人第一句话就说"帮我做一个复杂的应用"。都是先想清楚要什么，用 WAFS 框架组织好，然后开始。
都经历了多轮迭代。 没有一个案例是 AI 第一版就完美的。都是做出来、看看、改、再看看、再改。这是完全正常的流程。
都遇到了需要修改的地方。 布局不对、配色不满意、Bug、功能缺失——这些问题在每个项目中都会出现。关键是用前面学到的方法去解决。
都是从简单开始逐步变复杂。 案例 1 只是一个静态页面，案例 2 加了交互和本地存储，案例 3 加了后端和登录。就像打游戏，先过简单关，再挑战难的。
最终都做出了可用的东西。 不是停留在"想法"阶段，而是实实在在地做出来了。这就是 vibe coding 的魅力——降低了"从想法到成品"的门槛。
如果你一路跟着做到了这里，你已经不是一个"零基础的人"了——你是一个有实战经验的 vibe coder。
本章小结
- 案例 1（简单）： 个人作品集，5 轮对话，15 分钟
- 案例 2（中等）： 习惯打卡工具，5 轮对话，30-45 分钟，包含 bug 修复
- 案例 3（进阶）： 云端记事本，5 轮对话，1-2 小时，涉及后端和部署
- 共性： 清晰描述 → 多轮迭代 → 遇到问题就解决 → 逐步增加复杂度
- 所有前面学到的技巧在实战中都用上了
下一步预告
最后一章了。你已经掌握了 vibe coding 的核心技能，也有了实战经验。下一章我们来聊聊：接下来你可以往哪些方向继续走。