easy-vibe 使用教程

📖 项目简介

easy-vibe 是 Datawhale 出品的一套系统化中文 Vibe Coding 课程，主打"会说话就会做应用"——零基础也能从想法走到可上线的 AI 原生产品。

教程按"产品原型 → 全栈开发 → 高级跨平台"三个阶段递进，覆盖 AI IDE、原型设计、Supabase 后端、Stripe 支付、微信小程序、Android/iOS、Electron、PWA、VS Code 插件、NFT 等实战项目，配套 9 大知识领域、80+ 交互式专题。

⭐

14.5K Star

3 个月狂涨 10K

🐳

Datawhale 出品

国内权威开源教育组织

🌍

10 种语言

中/英/日/韩/法/德等

📜

CC BY-NC-SA 4.0

完全开源免费

💡

GitHub： github.com/datawhalechina/easy-vibe
在线阅读： datawhalechina.github.io/easy-vibe

✨ 四大可视化教学神器

这套教程之所以炸场，是因为把抽象的编程原理全部做成了"看得见、点得动"的交互组件：

💻

沉浸式模拟 IDE

虚拟鼠标自动导览，带你快速上手 IDE 核心用法

🎨

看得见的 AI 原理

Diffusion 算法动画化，一眼看懂 AI 如何"画"出图片

🎮

像玩游戏一样学 RAG

独家交互组件，点击即可看清 RAG 数据流向

⌨️

可视化终端原理

命令行操作可视化，直观展示后台逻辑与原理

🗺️ 三阶段学习路径

零基础入门：动手做出原型（适合产品经理 / 创业者 / 学生）

从 AI IDE 工具入手，学会需求拆解、页面设计、提示词写法、原型迭代，最终做出一个可演示的产品原型。

初中级开发工程师：全栈应用上线（适合开发者 / 进阶学习者）

覆盖 Figma/MasterGo 设计、组件化 UI、Supabase 数据库、Stripe 支付、Vercel/Zeabur 部署，最终独立完成一个可上线的全栈 SaaS。

高级开发工程师：跨平台 + AI Agent（适合中高级开发者）

包含 Claude Code 七大深度指南（MCP/Skills/Agent Teams 等）+ 八大跨平台实战（PWA、Electron、NFT、VS Code 插件、Qt 工业 HMI 等）。

🚀 本地启动课件

方案一：让 AI IDE 帮你跑（最快）

在 Cursor / Trae / VS Code 等 AI IDE 的对话框中，直接输入：

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

方案二：传统命令行

需要 Node.js >= 18.0.0，按下面三步：

                bash
                git clone https://github.com/datawhalechina/easy-vibe.git
cd easy-vibe
npm install
npm run dev
            

启动成功后，浏览器访问 http://localhost:3000 即可看到完整课件，VitePress 支持热重载。

✅

不想本地装环境？直接访问在线版本： datawhalechina.github.io/easy-vibe/welcome.html

🎯 学习建议

Q: 完全零基础，从哪开始？

直接进 第一阶段「动手做出原型」。从「AI 时代会说话就会编程」入手，先用贪吃蛇等小案例建立感觉，再逐步学习 AI IDE 工具与多页面原型搭建。

Q: 已经有开发经验了，想跳过基础？

从 第二阶段「初中级开发工程师」开始，重点学 Supabase 全栈、Stripe 支付集成、SaaS 大作业，3 个月就能独立交付一个可收费的产品。

Q: 想学 AI Agent / Claude Code 怎么办？

直接进 第三阶段「高级开发工程师」，重点看 Claude Code MCP 完全指南、Skills 完全指南、Agent Teams 完全指南；想做命令行 AI 助理的可配合 Hello Claw 项目食用。

Q: 卡住了找谁问？

仓库 Issue 区直接提问，Datawhale 保姆团队会跟进。也可加入官方微信群（README 底部有二维码）和其他学习者一起 vibe。

📜

License 提醒：本教程采用 CC BY-NC-SA 4.0 协议，可自由分享与改编，但 禁止商业使用，且修改后必须以相同协议发布。