零基础，在项目制学习中掌握 Vibe Coding 与 AI 技能，构建第一个 AI 原生产品
2025年，被很多人视为AI编程的元年。越来越多的人开始用AI写代码，但往往做出来的还停留在玩具层面——不知道如何用Vibe Coding组织开发流程，不知道该选哪些工具，更不清楚从原型到上线中间还差哪些关键步骤。
我们采用循序渐进的三阶段实战路径：第一阶段掌握Vibe Coding工作方式并完成Web应用原型，第二阶段学习全栈开发与部署上线，第三阶段构建跨平台复杂应用。
每个阶段都配有完整项目实战，让你在真实挑战中从玩具走向产品，最终具备将任何想法落地为可用应用的能力。
我们相信，掌握Vibe Coding并配合系统化训练，你一个人就能成为集前后端开发、AI能力集成、产品设计于一身的全能开发者。
本项目主要面向三类学习者：
- 新手（普通人 / 产品与运营侧）：帮助非技术背景角色和入门学习者听懂关键概念，完成第一个 AI 小工具或产品原型。
- 初中级开发者（有一定基础的学生和开发者）：系统掌握 vibe coding 与原生 AI 应用开发。
- 高级开发者（公司与初创、开源与独立开发者）：支持团队和个人快速搭建、验证与迭代原生 AI 应用。
- 理解什么是 vibe coding 以及它的一般做法，掌握实现原生 AI 应用的基本路径
- 通过多个完整项目，熟悉游戏、工具类、产品原型等不同形态的 AI 应用开发
- 了解并实践 Git、API、RAG、AI IDE、Zeabur 等关键工具与基础设施
- 掌握产品思维，学会构建符合用户需求的产品
注: 本项目快速更新中，第二次更新在分支 verison2预计将于 1 月 20 日之前合并替换主分支，尽请期待
本教程将 Project 分为三个阶段，帮助你从零开始掌握 Vibe Coding：
| 章节 | 关键内容 | 难度 | 状态 |
|---|---|---|---|
| 第一阶段：本地基础开发 | |||
| 前言：课程学习地图 | 课程学习地图、学习目标、常见问题解答 | 初 | ✅ |
| Project 1: 如何构建贪吃蛇游戏 | 网页端 AI 编程入门、实现贪吃蛇、文字和生图 API 调用、制作小游戏 | 初 | ✅ |
| Project 2: 探索 AI 工具的能力边界 | 提示词工程练习、AI 编程入门进阶、图片视频生成 API 进阶、理解 AI 能力边界 | 初 | ✅ |
| Project 3: Dify 入门与知识库集成 | Dify 平台实战、RAG 检索增强生成、Workflow 编排、Dify API 调用 | 初 | ✅ |
| 第二阶段：数据库与全栈部署 | |||
| Project 4: 一起做霍格沃茨画像 | 前端原型设计、前端原型转代码、AI IDE 入门、Dify API 集成、网页部署 | 中 | ✅ |
| Project 5: 从数据库到 Supabase | 数据库与 JSON 入门、Supabase 后端服务、用户鉴权系统、边缘函数、鉴权、存储桶 | 中 | ✅ |
| Project 6: 别急着写代码，先想一个好点子 | 产品思维、学会抽象思路变具体、如何制作好应用、用户需求与增长 | 中 | ✅ |
| 第三阶段：现代全栈网页应用实战 | |||
| Project 7: 构建第一个现代应用程序-UI设计 | 现代前端组件库、前端编辑工具进阶、UI 设计规范 | 高 | 🚧 |
| Project 8: 构建第一个现代应用程序-功能设计 | 市场调研、产品 PRD 构建、原型设计深度解析、多页面架构设计 | 高 | 🚧 |
| Project 9: 构建第一个现代应用程序-全栈应用 | 全栈应用构建方案、独立后端鉴权、设计到上线开发闭环 | 高 | 🚧 |
| 章节 | 关键内容 | 难度 | 状态 |
|---|---|---|---|
| 扩展知识 1: 什么是 Git 和 GitHub | Git 版本控制、GitHub 协作流程、代码仓库管理、SSH 配置 | 初 | ✅ |
| 扩展知识 2: 什么是 API | API 原理与机制、接口请求/响应、第三方服务集成、HTTP 基础 | 初 | ✅ |
| 扩展知识 3: AI 词典 | AI 能力全景图、主流模型选型 (LLM/图像/语音/视频/时间序列)、AI 工程能力全景图 | 初 | ✅ |
| 扩展知识 4: 什么是 AI IDE 和 Trae | IDE 与 AI IDE 概念、Trae 工具实战入门 | 初 | ✅ |
| 扩展知识 5: 什么是 RAG 以及它如何工作 | RAG 技术原理、文档切片与索引、RAG 进阶方案、RAG 企业方案 | 中 | ✅ |
| 扩展知识 6: Zeabur 与 Web 应用部署 | Web 应用部署、Zeabur 平台使用方法 | 中 | ✅ |
| 扩展知识 7: CLI AI 编程工具 | 终端介绍、CLI AI 编程工具、Claude Code/Codex | 中 | ✅ |
| 扩展知识 8: MCP 与 ClaudeCode skills | MCP 协议、ClaudeCode Skills、工具扩展机制 | 中 | 🚧 |
| 扩展知识 9: 使用 Trae SOLO 模式深度开发 | PRD 生成、需求驱动开发、前后端集成 | 中 | 🚧 |
| 扩展知识 10: 尝试提高 vibe coding 的品味 | 测试驱动开发、设立中间检查点、约束条件 | 高 | 🚧 |
| 扩展知识 11: 如何让 Coding Tools 长时间工作 | 自动化开发配置、长时间任务管理、CLI 工具稳定性优化 | 高 | 🚧 |
| 章节 | 关键内容 | 难度 | 状态 |
|---|---|---|---|
| Example 0-1: 使用 Vibe Coding 工具完成贪吃蛇教程 | 基于 Vibe Coding 工具复现与扩展贪吃蛇游戏的补充文章与实践记录 | 中 | 🚧 |
| Example 0-2: 使用 Vibe Coding 工具与设计智能体搭建网站 | 结合 Vibe Coding 工具与设计智能体从 0 到 1 搭建网站的补充文章与实践记录 | 中 | 🚧 |
| Example 1: 如何构建微信小程序 | 了解微信小程序生态与开发链路，结合 Trae + HBuilderX + 微信开发者工具，全流程开发贪吃蛇小程序 | 中 | ✅ |
| Example 2: 如何构建微信小程序-包含后端 | 使用 vibe coding 从 0 到 1 构建具有后端数据库的微信小程序 | 中 | 🚧 |
| Example 3: 如何构建安卓程序 | 结合 Expo，使用 vibe coding 从 0 到 1 构建安卓应用并上架 | 高 | 🚧 |
- 1 月 11 日前实现大纲更新，更符合逻辑和学习习惯。
- 补全未完成的 project extra 文档
- 补充关于 IOS 平台 vibecoding 文档
- 补充关于更多开发基础知识的 vibe coding 理解方案
- 根据内测内容反馈补充润色 project 1 与 2 、extra 2 的内容，修复不自然的语言转换部分
- 修复 extra 失效部分内容
- 将未推送的教程补充推送，同时优化在线阅读体验
- 修复英文版仓库不自然的部分
- 建议具备基本编程经验（任意一门语言均可），并对 AI 与产品开发有兴趣
- 按照 Project 模块从 0 到 6 依次实践，完成从小游戏到完整应用原型的进阶
- 在 Extra 模块中补充 Git、API、RAG、部署等通识知识，完善你的 AI 开发知识图谱
- 遇到问题时优先尝试自己排查与检索，再对照教程与源码进行比对和反思
你可以根据个人时间与需求，选择性地阅读和实践相关章节，但推荐至少完成全部 Project，以形成一套完整的实践闭环。
在 AI IDE 对话框（vscode、cursor、trae 等）中，输入下列提示词启动本课件：
请你帮我运行这个项目的本地服务
- npm install
- npm run dev
- 打开浏览器访问
http://localhost:3000即可查看。
- 如果你发现了一些问题，或者觉得任何可以改进本项目的地方，可以提 Issue 进行反馈。如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照Datawhale 开源项目指南进行操作即可~
- 散步-项目负责人 (Datawhale成员)
- 方可-指导老师（Datawhale成员, 清华大学）
- Yerim Kang（实践项目部分-清华大学）
- 赵芷霖（实践项目部分-清华大学）
- 李亦萱（页面美术设计-清华大学）
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
- 感谢 @Sm1les 对本项目的帮助与支持
- 感谢所有为本项目做出贡献的开发者们 ❤️
如果有问题提建议吐槽，或者想要一起交流，请扫描下方二维码
扫描下方二维码关注公众号：Datawhale
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。