
本步目标:规划学习路径,明确短期和中期目标
完成了待办清单,你可能在想:接下来做什么?这里给你三个方向的选择。
如果你想继续打磨这个项目,以下是一些扩展功能的 Prompt 示例:
【背景】
我的待办清单已经可以添加、删除、完成任务,并且数据会保存在 localStorage 中。
【当前任务】
请给任务添加分类功能:
1. 预设三个分类:工作、生活、学习
2. 添加任务时可以选择分类
3. 每个分类用不同颜色标识
4. 可以按分类筛选显示任务
【技术要求】
- 保持使用 localStorage 存储
- 代码风格与现有代码一致
【背景】
我的待办清单目前功能完整,需要添加优先级功能。
【当前任务】
请给任务添加优先级功能:
1. 三个优先级:高、中、低
2. 高优先级用红色标识,中用黄色,低用灰色
3. 任务列表自动按优先级排序
4. 添加任务时可以选择优先级,默认为"中"
【技术要求】
- 优先级信息也要保存到 localStorage
- 保持现有的完成、删除功能正常工作
【背景】
我的待办清单任务越来越多,需要搜索功能。
【当前任务】
请添加任务搜索功能:
1. 在输入框上方添加一个搜索框
2. 输入关键词时,实时过滤显示匹配的任务
3. 搜索框为空时,显示所有任务
4. 搜索不区分大小写
【技术要求】
- 搜索是前端过滤,不影响 localStorage 中的数据
这些功能你可以一个一个添加,每添加一个就测试一次,感受渐进式开发的节奏。
第五章会解决你现在可能遇到的三个问题:
场景:你尝试加了一个新功能,结果把原来能用的功能也搞坏了,而且你已经保存了文件,撤销不回去了。
第五章解决方案:5.1 版本管理
你会学到:
场景:你想把待办清单分享给朋友,但现在它只是你电脑上的一个文件,别人打不开。
第五章解决方案:5.2 部署上线
你会学到:
场景:你想让 AI 帮你做一个有登录功能的应用,但不知道怎么处理密码和敏感信息。
第五章解决方案:5.3 安全意识
你会学到:
| 第五章小节 | 解决的问题 | 预计时间 |
|---|---|---|
| 5.1 版本管理 | 改崩了回不去 | 30 分钟 |
| 5.2 部署上线 | 只能自己用 | 20 分钟 |
| 5.3 安全意识 | 不知道什么不能做 | 15 分钟 |
| 5.4 局限性 | Vibe Coding 的边界 | 10 分钟 |
用你学到的工作流,尝试做一个新项目。以下是一些适合练手的想法:
| 项目 | 核心功能 | 复杂度 |
|---|---|---|
| 记事本 | 写文字、保存、编辑 | ⭐ |
| 书签管理器 | 保存网址、分类、搜索 | ⭐⭐ |
| 倒计时器 | 设置时间、开始、暂停、提醒 | ⭐⭐ |
| 日记本 | 按日期写日记、查看历史 | ⭐⭐ |
| 项目 | 核心功能 | 复杂度 |
|---|---|---|
| 习惯打卡器 | 添加习惯、每日打卡、查看连续天数 | ⭐⭐ |
| 阅读记录 | 记录书名、进度、笔记 | ⭐⭐ |
| 喝水提醒 | 记录喝水次数、今日目标 | ⭐ |
| 项目 | 核心功能 | 复杂度 |
|---|---|---|
| 家庭相册 | 展示照片、添加描述 | ⭐⭐ |
| 家庭食谱 | 收集菜谱、分类查看 | ⭐⭐ |
| 纪念日提醒 | 记录重要日期、距离天数 | ⭐ |
选择项目的建议:
在进入第五章或开始新项目之前,用这个清单确认你已经掌握了基础版的核心内容:
理解 Vibe Coding 是什么,与传统编程的区别
能用灵魂三问梳理项目方向
理解 MVP 思维,知道如何定义第一版范围
知道"先想失败"的逆向思维为什么重要
能用 S.C.A.F.F. 框架组织 Prompt
知道上下文(背景、任务、约束)对 AI 输出的影响
会用迭代对话逐步逼近目标
遇到问题时,知道如何向 AI 提供有效的信息
能让 AI 生成静态页面
能让 AI 实现交互功能
能让 AI 添加 localStorage 存储
遇到报错时,能用 AI 诊断和修复
完成过至少一个功能完整的项目
相信自己能用 AI 做出东西
对报错不再恐惧
理解"先跑通再优化"的原则
有动力继续学习和尝试
如果以上大部分都能打勾,恭喜你——你已经完成了 Vibe Coding 基础版的学习。
完成基础版后,如果你想做更复杂的项目,进阶版会教你:
| 主题 | 你将学到 | 能做什么 |
|---|---|---|
| 云端数据库 | Supabase、Prisma | 数据多设备同步 |
| 用户认证 | NextAuth、登录注册 | 多用户系统 |
| 专业框架 | Next.js、React | 复杂应用开发 |
| AI 功能集成 | Vercel AI SDK | 在应用中使用 AI |
| 部署运维 | Docker、1Panel | 服务器部署 |
进阶版的内容需要更多的时间投入,但如果你对技术感兴趣,这是一条清晰的成长路径。
恭喜你完成了 Vibe Coding 的第一个完整项目!
从第二章的产品思维,到第三章的表达技法,再到第四章的动手实践——你走过了一条完整的路径。这个待办清单也许功能简单,但它证明了一件事:
你可以把想法变成现实。
这种能力,在 AI 时代会越来越重要。不是因为你需要成为程序员,而是因为"能做东西"意味着你可以快速验证想法、解决自己的问题、创造属于自己的工具。
记住这种感觉,带着它继续前进。