Vibe Coding 学习导读

Vibe Coding 的重点，是把自然语言里的想法逐步变成可运行的产品。你负责说清楚目标、判断结果和做取舍，AI 编程工具负责协助生成与修改代码。

这条路线和 AI Agent 学习路线 相邻，但关注点不同：Agent 路线研究“智能体系统怎样工作”，Vibe Coding 路线练习“怎样借助 AI 把一个产品做出来”。

从想法到可交付产品

想法 → 用户与问题 → 最小需求 → 页面和功能 → 测试与修复 → 部署上线

每一步都要由你检查结果。不要一次性要求 AI“做完整个产品”；先明确一个小目标，运行它，发现问题，再给出具体反馈。

建议的学习顺序

1. 先明确你要解决的问题

写下谁会使用、他遇到什么麻烦、完成后怎样算成功。把想法缩成一个可以在短时间内验证的最小版本，并列出明确不做的功能。

2. 用 AI 做出第一版

先描述页面结构、主要操作和预期结果，再让 AI 一次完成一个小改动。每轮都预览页面、实际操作，并指出具体哪里不符合预期。

3. 加入数据和真实逻辑

把页面交互、数据保存、用户身份和外部接口分开处理。涉及密钥、个人信息或付费操作时，先明确安全边界，不把秘密直接放进前端代码。

4. 测试、修复并部署

覆盖正常流程、空数据、错误输入和网络失败；检查手机屏幕；修复问题后再发布。上线后记录用户反馈和需要改进的地方。

用什么方式和 AI 协作

每次任务尽量给出四项信息：

信息	示例
目标	用户可以创建并完成一条待办
现状	页面已有输入框和列表，刷新后数据会丢失
限制	暂时只用浏览器本地存储，不增加登录
验收	新建、完成、删除后刷新页面，状态仍正确

让 AI 先说明准备改哪些地方；每次只推进一个可以运行和检查的目标。遇到错误时提供完整报错、触发步骤和预期结果，要求它先定位原因，再提出修复。

做完一个小项目后检查

• 用户能否完成最核心的一件事？
• 页面上的每个按钮是否都能工作？
• 错误输入和空状态是否有清楚反馈？
• 手机端能否正常使用？
• 密钥和个人数据是否被妥善处理？
• 是否亲自运行过测试并检查部署结果？

延伸阅读

Datawhale 的 Vibe Vibe 开源项目 提供系统化的 Vibe Coding 教程，覆盖入门、从零到上线的开发流程、实践项目和延伸阅读。仓库 README 中注明的在线课程为 vibevibe.cn。

本页是 sxh 的学习导读与实践检查表。上游项目当前未声明仓库许可证，因此这里只做项目介绍和来源指引，不转载其课程正文、图片或代码；请到上游页面阅读原课程。