test-repo/README.md

<div align='center'>
  <img src="./assets/logo.png" alt="Vibe-Coding" width="20%">
</div>
<div align="center">
  <h1>Vibe-Coding</h1>
  <img src="https://img.shields.io/github/stars/datawhalechina/vibe-coding?style=flat&logo=github" alt="GitHub stars"/>
  <img src="https://img.shields.io/github/forks/datawhalechina/vibe-coding?style=flat&logo=github" alt="GitHub forks"/>
  <img src="https://img.shields.io/badge/language-Chinese-brightgreen?style=flat" alt="Language"/>
  <a href="https://github.com/datawhalechina/vibe-coding"><img src="https://img.shields.io/badge/GitHub-Project-blue?style=flat&logo=github" alt="GitHub Project"></a>
</div>

<div align="center">

[中文](./README.md) | [English](./README.md)

</div>

<div align="center">
  <h3>📚 Vibe Coding 原生 AI 应用实践教程</h3>
  <p>从零开始掌握 vibe coding，动手构建你的第一个 AI 原生应用</p>
</div>

## 项目介绍

> 这是一个面向所有想要学习 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 原生产品开发工作流

## 内容导航

### Project 部分

| 章节                                                                                                                                                                                    | 关键内容                                                                     | 状态 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ---- |
| [Project 1: 如何构建贪吃蛇游戏](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter1/chapter1-how-to-build-a-snake-game.md)                                       | 结合 AI 与代码实现经典贪吃蛇游戏                                             | ✅   |
| [Project 2: 探索 AI 工具的能力边界](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md)                 | 系统体验与分析不同 AI 工具的能力边界                                         | ✅   |
| [Project 3: Dify 入门与知识库集成](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | 使用 Dify 搭建应用并完成知识库集成                                           | ✅   |
| [Project 4: 一起做霍格沃茨画像](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter4/chapter4-lets-build-hogwarts-portraits.md)                                   | 基于多模态能力生成与迭代人物画像                                             | ✅   |
| [Project 5: 从数据库到 Supabase](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter5/chapter5-from-database-to-supabase.md)                                      | 从传统数据库迁移到 Supabase 并完成应用接入                                   | ✅   |
| [Project 6: 别急着写代码，先想一个好点子](https://github.com/datawhalechina/vibe-coding/blob/main/docs/project/chapter6/chapter6-no-code-without-an-idea.md)                               | 产品思维入门，从 0 构思并实现一个原生 AI 应用原型，涉及第一个应用            | ✅   |
| Project 7: 构建第一个现代应用程序-UI设计                                                                                                                                                | 学会更高级的前端组件库的使用方式，前端编辑工具的深入用法，学习设计规范       | 🚧   |
| Project 8: 构建第一个现代应用程序-功能设计                                                                                                                                              | 市场调研、学习产品 PRD 构建、深入理解产品原型设计、构架多页面产品原型和代码  | 🚧   |
| Project 9: 构建第一个现代应用程序-全栈应用                                                                                                                                              | 构建与部署带鉴权与独立后端的应用、从参考到设计开发出可上线网页应用的完整闭环 | 🚧   |

### 扩展知识部分

| 章节                                                                                                                                                                                                | 关键内容                                                   | 状态 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ---- |
| [扩展知识 1: 什么是 Git 和 GitHub](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra1/extra1-what-is-git-and-what-is-github.md)                                                 | 版本控制基础与 GitHub 使用入门                             | ✅   |
| [扩展知识 2: 什么是 API](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra2/extra2-what-is-api.md)                                                                              | API 基本概念与在 AI 应用中的使用方式                       | ✅   |
| [扩展知识 3: AI 能力入门手册](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra3/extra3-ai-capability-starter-handbook.md)                                                      | 关于深度学习 AI 涉及到的所有主流模型与常见能力速览         | ✅   |
| [扩展知识 4: 什么是 AI IDE 和 Trae](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra4/extra4-what-is-ai-ide-and-trae.md)                                                       | 了解 AI IDE 概念并上手 Trae 辅助开发                       | ✅   |
| [扩展知识 5: 什么是 RAG 以及它如何工作](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future.md)                               | RAG 原理、实现路径及未来演进方向                           | ✅   |
| [扩展知识 6: Zeabur 与 Web 应用部署](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md)                         | 使用 Zeabur 将 Web 与 AI 应用部署上线                      | ✅   |
| [扩展知识 7: CLI AI 编程工具与测试驱动开发原则](https://github.com/datawhalechina/vibe-coding/blob/main/docs/Extra/extra7/extra9-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | CLI AI 编程工具与测试驱动开发原则                          | ✅   |
| 扩展知识 8: MCP 与 ClaudeCode skills                                                                                                                                                                | MCP 与 ClaudeCode skills 的概念与方式深入解析              | 🚧   |
| 扩展知识 9: 如何让 Coding Tools 长时间工作                                                                                                                                                          | 如何通过配置让 ClaudeCode、Codex 等 CLI 工具连续工作数小时 | 🚧   |

### 实践项目部分

该部分将会覆盖常见电脑应用形式的 0-1 Vibe Coding 开发过程。

| 章节                                                                                                                                                       | 关键内容                                                  | 状态 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ---- |
| [Example 1: 如何构建微信小程序](https://github.com/datawhalechina/vibe-coding/blob/main/docs/examples/example1/example1-how-to-build-a-wechat-miniprogram.md) | 使用 vibe coding 从 0 到 1 构建微信小程序                 | ✅   |
| 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 等）中，输入下列提示词启动本课件：

```
请你帮我运行这个项目的本地服务
```

### 旧方案

1. npm install
2. npm run dev
3. 打开浏览器访问 `http://localhost:3000` 即可查看。

## 参与贡献

- 如果你发现了一些问题，可以提 Issue 进行反馈，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
- 如果你想参与贡献本项目，可以提 Pull Request，如果提完没有人回复你可以联系[保姆团队](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同学进行反馈跟进~
- 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照[Datawhale 开源项目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)进行操作即可~

## 🙏 感谢每位贡献者

- [散步-项目负责人](https://github.com/sanbuphy) (Datawhale成员)
- 方可-指导老师（Datawhale成员, 清华大学）
- 赵芷霖（实践项目部分-清华大学）
- [李亦萱](https://yixuan20.github.io/)（页面美术设计-清华大学）
- AI Vibe Coding 101 内测群完整给建议体验的小伙伴们

### 特别感谢

- 感谢 [@Sm1les](https://github.com/Sm1les) 对本项目的帮助与支持
- 感谢所有为本项目做出贡献的开发者们 ❤️

<div align=center style="margin-top: 30px;">
  <a href="https://github.com/datawhalechina/vibe-coding/graphs/contributors">
    <img src="https://contrib.rocks/image?repo=datawhalechina/vibe-coding" />
  </a>
</div>

## 关注我们

<div align=center>
<p>扫描下方二维码关注公众号：Datawhale</p>
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
</div>

## LICENSE

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  <img
    alt="知识共享许可协议"
    style="border-width:0"
    src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
  />
</a>
<br />
本作品采用
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
</a>
进行许可。