sanbuphy
229f8a6e92
- Update image paths in documentation files to use relative paths - Enhance README content with more detailed descriptions of chapters - Fix sidebar link for CLI AI coding tools
Easy-Vibe
📚 AI Vibe Coding 101 教程
零基础，在项目中掌握 Vibe Coding 与 AI 技能，构建第一个 AI 原生产品
项目介绍
这是一个面向所有想要学习 vibe coding 并构建原生 AI 应用的人的综合课程。本教程是 THU SIGS AIID 实践课程的一部分。受开源启发，所有资料向任何对 vibe coding 和原生 AI 应用感兴趣的人开放。我们希望这一资源能帮助每一个决心创造自己原生 AI 应用的人，并共同改变传统的编程习惯。我们相信未来的编程工作 95% 将由 AI 完成。
本项目聚焦「原生 AI 应用开发」这一新范式，通过循序渐进的项目实战，帮助你在真实工程环境中掌握 vibe coding 的方法论与最佳实践。
项目受众
本项目主要面向希望系统学习 vibe coding 与原生 AI 应用开发的学习者，包括但不限于：
- 计算机科学、人工智能及相关或跨学科专业的学生，希望通过实践经验系统地介绍 vibe coding 和原生 AI 开发
- 具有基本编程技能的初中级开发人员，希望学习 vibe coding 并构建原生 AI 应用程序
- 开源爱好者和独立开发者，希望降低 AI 原生开发的门槛，并利用免费资源创建衍生作品
- 旨在快速制作原生 AI 应用程序原型的企业技术团队和 AI 初创公司
- 非开发人员角色（如产品经理），希望掌握基本开发任务并为 AI 计划提供技术支持
你将收获什么？
- 理解什么是 vibe coding 以及它与传统编程方式的差异
- 掌握从零到一设计和实现原生 AI 应用的基本路径
- 通过多个完整项目，熟悉游戏、工具类、产品原型等不同形态的 AI 应用开发
- 了解并实践 Git、API、RAG、AI IDE、Zeabur 等关键工具与基础设施
- 在实践中形成一套可复用的 AI 原生产品开发工作流
内容导航
本教程将内容分为三个难度等级，供不同阶段的学习者参考：
- 初级：适合 AI 编程新手，侧重于工具的基础使用与简单应用体验。
- 中级：适合具备一定基础的开发者，涉及前后端交互、数据库集成及多模态能力。
- 高级：适合进阶学习者，涵盖全栈开发、系统架构设计及复杂的工程化配置。
Project 部分
| 难度 | 章节 | 关键内容 | 状态 |
|---|---|---|---|
| 初 | Project 1: 如何构建贪吃蛇游戏 | Vibe Coding 基础、z.ai 工具链、提示词编程、贪吃蛇游戏实战 | ✅ |
| 初 | Project 2: 探索 AI 工具的能力边界 | 提示词工程、上下文工程、Coze 平台、超级井字棋复刻、LLM 训练原理 | ✅ |
| 初 | Project 3: Dify 入门与知识库集成 | RAG 检索增强生成、Dify 平台实战、知识库集成、Agent Workflow 编排 | ✅ |
| 中 | Project 4: 一起做霍格沃茨画像 | 前端原型设计、角色扮演 Agent、情绪反馈机制、Dify API 集成、网页部署 | ✅ |
| 中 | Project 5: 从数据库到 Supabase | Supabase 后端服务、数据库与 JSON、用户鉴权系统、前后端分离架构 | ✅ |
| 中 | Project 6: 别急着写代码，先想一个好点子 | 产品思维 (Product Sense)、用户需求挖掘、PMF 验证、AI 应用构思 | ✅ |
| 高 | Project 7: 构建第一个现代应用程序-UI设计 | 前端组件库应用、前端编辑工具进阶、UI 设计规范 | 🚧 |
| 高 | Project 8: 构建第一个现代应用程序-功能设计 | 市场调研、产品 PRD 构建、原型设计深度解析、多页面架构设计 | 🚧 |
| 高 | Project 9: 构建第一个现代应用程序-全栈应用 | 全栈应用构建、独立后端鉴权、从设计到上线闭环 | 🚧 |
扩展知识部分
| 难度 | 章节 | 关键内容 | 状态 |
|---|---|---|---|
| 初 | 扩展知识 1: 什么是 Git 和 GitHub | Git 版本控制、GitHub 协作流程、代码仓库管理、SSH 配置 | ✅ |
| 初 | 扩展知识 2: 什么是 API | API 原理与机制、接口请求/响应、第三方服务集成、HTTP 基础 | ✅ |
| 初 | 扩展知识 3: AI 能力入门手册 | AI 能力全景图、主流模型选型 (LLM/图像/语音)、多模态应用 | ✅ |
| 初 | 扩展知识 4: 什么是 AI IDE 和 Trae | AI IDE 概念、Trae 工具实战、智能代码补全、Agent 辅助调试 | ✅ |
| 中 | 扩展知识 5: 什么是 RAG 以及它如何工作 | RAG 技术原理、文档切片与索引、向量检索机制、幻觉消除 | ✅ |
| 中 | 扩展知识 6: Zeabur 与 Web 应用部署 | Web 应用部署、Zeabur 平台、环境与域名配置、项目上线 | ✅ |
| 中 | 扩展知识 7: CLI AI 编程工具与测试驱动开发原则 | CLI AI 编程工具、Claude Code/Codex、测试驱动开发 (TDD) | ✅ |
| 中 | 扩展知识 8: MCP 与 ClaudeCode skills | MCP 协议、ClaudeCode Skills、工具扩展机制 | 🚧 |
| 高 | 扩展知识 9: 如何让 Coding Tools 长时间工作 | 自动化开发配置、长时间任务管理、CLI 工具稳定性优化 | 🚧 |
实践项目部分
该部分将会覆盖常见电脑应用形式的 0-1 Vibe Coding 开发过程。
| 难度 | 章节 | 关键内容 | 状态 |
|---|---|---|---|
| 中 | Example 1: 如何构建微信小程序 | 了解微信小程序生态与开发链路，结合 Trae + HBuilderX + 微信开发者工具，通过 AI 辅助从环境搭建到代码生成，全流程开发贪吃蛇小程序。 | ✅ |
| 中 | Example 2: 如何构建微信小程序-包含后端 | 使用 vibe coding 从 0 到 1 构建具有后端数据库的微信小程序 | 🚧 |
| 高 | Example 3: 如何构建安卓程序 | 结合 Expo，使用 vibe coding 从 0 到 1 构建安卓应用并上架 | 🚧 |
如何学习
- 建议具备基本编程经验（任意一门语言均可），并对 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（CodingTool补充教程部分-清华大学）
- 赵芷霖（实践项目部分-清华大学）
- 李亦萱（页面美术设计-清华大学）
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们
特别感谢
- 感谢 @Sm1les 对本项目的帮助与支持
- 感谢所有为本项目做出贡献的开发者们 ❤️
关注我们
扫描下方二维码关注公众号：Datawhale
LICENSE
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。