datawhalechina/easy-vibe

AI 总结

• 面向零基础到全栈/产品人群，覆盖 AI 编程、Web 全栈、AI Agent、工作流与 RAG
• 分阶段学习：入门与原型设计→全栈+AI集成+数据库→Claude Code进阶与多平台（含小程序/安卓）
• 提供在线阅读与交互式教程组件，强调“手把手图文+沉浸式模拟编程”体验
• 附录知识库扩展到9大领域、80+交互式专题，用动画与可视化解释底层到前沿概念
• 项目支持多语言（i18n），并在2026年持续更新教程与文档结构

内容摘录

<!-- trigger vercel build -->
<div align="center">

<pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;">
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝
█████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ 
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ 
███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre>
Easy-Vibe : Learn vibe coding from 0 to 1

<p align="center">
 📌 <a href="https://datawhalechina.github.io/easy-vibe/">在线阅读 (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">交互式教程 (Interactive Tutorial)</a>
</p>

<p align="center">
 <a href="https://datawhalechina.github.io/easy-vibe/">在线阅读</a> ·
 <a href="#-内容导航">学习地图</a> ·
 <a href="#contact">社区交流</a>
</p>

<p align="center">
 <a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank">
 <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a>
 <a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank">
 <img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a>
 <a href="LICENSE" target="_blank">
 <img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a>
</p>

<p align="center">
 <a href="docs-readme/zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
 <a href="docs-readme/zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
 <a href="docs-readme/en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
 <a href="docs-readme/ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
 <a href="docs-readme/es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
 <a href="docs-readme/fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
 <a href="docs-readme/tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
 <a href="docs-readme/ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
 <a href="docs-readme/ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
 <a href="docs-readme/tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
 <a href="docs-readme/vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
 <a href="docs-readme/de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
 <a href="docs-readme/bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
</p>

</div>
<table align="center">
 <tr>
 <td width="50%" valign="top" align="center">
 <img src="assets/gif-header.png" width="100%">
 <br>
 <strong>新手专属学习地图</strong>
 <br>
 <sub>零基础专属指引，清晰规划路径，告别“学了忘”</sub>
 </td>
 <td width="50%" valign="top" align="center">
 <img src="assets/gif-tutorial.png" width="100%">
 <br>
 <strong>手把手图文教程</strong>
 <br>
 <sub>保姆级图文详解，如同私教在旁，跟着做就能学会</sub>
 </td>
 </tr>
 <tr>
 <td width="50%" valign="top" align="center">
 <img src="assets/gif-ide.gif" width="100%">
 <br>
 <strong>沉浸式模拟编程</strong>
 <br>
 <sub>虚拟鼠标自动导览，带你快速上手 IDE 核心用法</sub>
 </td>
 <td width="50%" valign="top" align="center">
 <img src="assets/gif-diffusion.gif" width="100%">
 <br>
 <strong>看得见的 AI 原理</strong>
 <br>
 <sub>算法原理动画化，一眼看懂 AI 如何“画”出图片</sub>
 </td>
 </tr>
 <tr>
 <td width="50%" valign="top" align="center">
 <img src="assets/gif-rag.gif" width="100%">
 <br>
 <strong>像玩游戏一样学 RAG</strong>
 <br>
 <sub>独家交互组件，点击即可看清 RAG 数据流向</sub>
 </td>
 <td width="50%" valign="top" align="center">
 <img src="assets/git-terminal.gif" width="100%">
 <br>
 <strong>可视化终端原理</strong>
 <br>
 <sub>命令行操作可视化，直观展示后台逻辑与原理</sub>
 </td>
 </tr>
</table>
<div align="center">
 <h3>⭐ 欢迎 <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">点击此处Star</a> 加速更新 ❤️</h3>
</div>

在 AI 时代，把想法变成产品的人，往往技术不是最强，而是最先迈出行动。

很多人即便有了 AI 助手，依然会被“代码看不懂”、“环境不会配”劝退。**Easy-Vibe 为此而生。** 假设每个人都是零基础，手把手带你从写出第一行代码，到理解前后端逻辑，最后把产品上线。
**面向人群**：初学者、产品经理、前后端 / 全栈开发者
**主题**：AI 编程、全栈 Web 应用开发、AI Agent、工作流和 RAG 系统

---

Easy-Vibe 通过以下几个阶段，带你从 0 到 1：

| 阶段 | 核心技能 | 产出 |
| ------------ | -------------------------------- | ----------------------------------------- |
| **第一阶段** | AI 编程入门、产品思维、原型设计 | 互动小游戏、Web 应用原型（新手入门 & PM） |
| **第二阶段** | 全栈开发、AI 集成、数据库 | 完整的全栈 AI 应用 |
| **第三阶段** | claude code 进阶、小程序安卓开发 | 生产级多平台应用 |
| **附录** | 帮你理解计算机、人工智能基础概念 | 9 大知识领域、80+ 交互式专题 |
🔥 News
**[2026-02-25]** 更新附录知识库，涵盖 9 大知识领域、80+ 交互式专题。
**[2026-01-27]** 新增 Android 和 iOS 平台应用开发教程。
**[2026-01-19]** 发布 Prompt Engineering、AI 演进史、鉴权设计、Git 原理等一系列交互式演示组件，大幅提升可视化学习体验。

<details>
<summary>Past News</summary>
**[2026-01-16]** 重构项目结构，正式确立“新手入门”章节，降低上手门槛。
**[2026-01-14]** 完成第一阶段“产品原型构建”文档的大规模更新。
**[2026-01-13]** 完成文档架构重构，全面支持多语言 (i18n)。
**[2026-01-01]** 发布项目核心学习地图 (Learning Map)，明确学习路径。
</details>
📖 内容导航

<div align="center">
 <img src="assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
</div>
📚 附录知识库
涵盖 **9 大知识领域**、**80+ 交互式专题**，以动画和可视化组件帮助你直观理解从计算机底层到 AI 前沿的核心概念。
👉 查看完整附录 · AI 能力词典

<table>
 <tr>
 <td valign="top" width="33%">
 <strong>💻 计算机基础</strong><br><br>
 • <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.html">从晶体管到 CPU</a><br>
 • <a href="https://datawhalechina.git…