easy-vibe

easy-vibe

Vibe coding from 0 to 1 |把想法做成真正能上线的产品|首个交互式教程|零基础也能学会的 AI 编程实战

Stars: 2627

Visit
 screenshot

Easy-Vibe is a beginner-friendly tool designed to help individuals learn vibe coding from scratch and develop full-stack AI applications. It provides interactive tutorials, immersive programming simulations, and visual explanations of AI principles. The tool aims to guide users through different stages, from AI programming basics to advanced AI integration and multi-platform development. Easy-Vibe caters to beginners, product managers, and front-end/back-end/full-stack developers interested in AI programming, full-stack web application development, AI agents, workflow, and RAG systems.

README:

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗  
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝  
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe : Learn vibe coding from 0 to 1

📌 在线阅读 (Read Online) · ✨ 交互式教程 (Interactive Tutorial)

在线阅读 · 学习地图 · 社区交流

Stars Forks License

简体中文 繁體中文 English 日本語 Español Français 한국어 العربية Tiếng_Việt Deutsch


新手专属学习地图
零基础专属指引,清晰规划路径,告别“学了忘”

手把手图文教程
保姆级图文详解,如同私教在旁,跟着做就能学会

沉浸式模拟编程
虚拟鼠标自动导览,带你快速上手 IDE 核心用法

看得见的 AI 原理
算法原理动画化,一眼看懂 AI 如何“画”出图片

像玩游戏一样学 RAG
独家交互组件,点击即可看清 RAG 数据流向

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

⭐ 欢迎 点击此处Star 加速更新 ❤️

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

很多人即便有了 AI 助手,依然会被“代码看不懂”、“环境不会配”劝退。Easy-Vibe 为此而生。 假设每个人都是零基础,手把手带你从写出第一行代码,到理解前后端逻辑,最后把产品上线。

  • 面向人群:初学者、产品经理、前后端 / 全栈开发者
  • 主题:AI 编程、全栈 Web 应用开发、AI Agent、工作流和 RAG 系统

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

阶段 核心技能 产出
第一阶段 AI 编程入门、产品思维、原型设计 互动小游戏、Web 应用原型(新手入门 & PM)
第二阶段 全栈开发、AI 集成、数据库 完整的全栈 AI 应用
第三阶段 claude code 进阶、小程序安卓开发 生产级多平台应用

🔥 News

  • [2026-01-27] 新增 Android 和 iOS 平台应用开发教程。
  • [2026-01-19] 发布 Prompt Engineering、AI 演进史、鉴权设计、Git 原理等一系列交互式演示组件,大幅提升可视化学习体验。
Past News
  • [2026-01-16] 重构项目结构,正式确立“新手入门”章节,降低上手门槛。
  • [2026-01-14] 完成第一阶段“产品原型构建”文档的大规模更新。
  • [2026-01-13] 完成文档架构重构,全面支持多语言 (i18n)。
  • [2026-01-01] 发布项目核心学习地图 (Learning Map),明确学习路径。

📖 内容导航

Learning Map

总附录

AI 能力词典:常见 AI 核心概念与名词、场景解释

一、新手入门 & PM - 从游戏到 Web 应用原型

章节 关键内容 状态
前言:学习地图 整体学习路径导览
初级一:AI 时代,会说话就会编程 通过贪吃蛇等案例初步感受 AI 编程的能力
初级二:寻找好想法 学会寻找和验证产品想法,找到值得做的项目
初级三:认识 AI IDE 工具 学会使用 IDE,在本地制作小游戏
初级四:动手做出原型 从需求分析、AI 生成单页面,再到生成多页面产品原型
初级五:给原型加上 AI 能力 学会接入常见 AI 能力(文本、图片、视频)
初级六:完整项目实战 模拟真实场景、接受用户反馈迭代,完整化项目

附录:业务思维

章节 关键内容 状态
附录A:产品思维与方案设计 从零到一做产品需要考虑的思维框架
附录B:AI 行业应用场景参考 (B端) 了解 AI 在不同产业的应用场景
附录C:AI 消费场景灵感参考 (C端) 探索 AI 在消费级产品中的应用场景

附录:技术方案

章节 关键内容 状态
附录D:写代码时遇到错误怎么办 vibe coding 中的常见错误及排查方法
附录E:七款 AI 编程工具对比 对比测试主流 AI 编程平台
附录F:用设计和编程 Agent 设计网站 学习如何使用 AI 智能体协同工作
二、初中级开发工程师

前端部分

章节 关键内容 状态
前端零:使用 lovart 生产素材 学会用 lovart 批量生成人物、场景等视觉素材,为 UI 设计和前端开发提供素材基础 🚧
前端一:Figma 与 MasterGo 入门 用设计工具梳理信息架构和页面结构,为前端实现打基础 🚧
前端二:构建第一个现代应用程序-UI 设计 基于设计稿完成组件化界面,实现从设计到代码的第一条链路 🚧
前端三:参考 UI 设计规范与多产品 UI 设计 围绕统一主视觉扩展多产品界面,练习系统化设计能力 🚧
前端四:一起做霍格沃茨画像 从 0 到 1 做出接入 AI 能力的前端应用,串联设计与开发

后端与全栈部分

章节 关键内容 状态
后端一:什么是 API 理解 HTTP 接口与请求响应模型,为后端集成与联调做准备
后端二:从数据库到 Supabase 在 Supabase 上落地数据库和 API,打通数据模型与前端页面
后端三:大模型辅助编写接口代码与接口文档 用大模型协助生成接口与数据库文档及代码,实现可读可测的后端 🚧
后端四:Git 工作流 在 Git 工作流中管理代码,进行版本控制和协作
后端五:Zeabur 部署 将应用部署到 Zeabur 上线
后端六:现代 CLI 开发工具 使用 CLI 类 AI 编程工具加速开发与调试,形成个人工程化工作流
后端七:如何集成 Stripe 等收费系统 接入支付系统,完成收费链路与基础结算流程 🚧
大作业 1:构建第一个现代应用程序-全栈应用 综合前端、后端与支付模块,完成可上线的全栈 Web 应用 🚧
大作业 2:现代前端组件库 + Trae 实战 使用现代前端组件库与 Trae,独立完成可登录注册并支持收费的产品 🚧

AI 能力附录

章节 关键内容 状态
AI 一:Dify 入门与知识库集成 用 Dify Workflow 与基础 RAG 搭建工具类产品,为后续应用升级打样
AI 二:学会查询 AI 词典与集成多模态 API 学会查找合适的模型与 API,并把文本、图像等多模态能力接入产品 🚧
三、高级开发工程师
章节 关键内容 状态
高级一:MCP 与 ClaudeCode Skills 通过 MCP 与 Skills 扩展 IDE 能力,把外部服务接成工具 🚧
高级二:如何让 Coding Tools 长时间工作 设计和配置长时间运行的任务,让 Coding Tools 更稳定可靠 🚧
高级三:多平台开发:如何构建微信小程序 了解微信小程序生态,从官方模板到上线完成一个前端小程序
高级四:多平台开发:如何构建微信小程序-包含后端 在小程序中接入数据库与后端逻辑,打通完整业务闭环 🚧
高级五:多平台开发:如何构建安卓程序 使用 Expo 等工具,完成 Web/原生一体化的安卓应用开发
高级六:多平台开发:如何构建 iOS 程序 使用 Expo 等工具,完成 Web/原生一体化的 iOS 应用开发
高级七:如何构建属于自己的个人网页与学术博客 从选型、搭建到部署,构建展示个人项目与学术成果的长久在线主页 🚧

AI 能力附录

章节 关键内容 状态
高级 AI 一:什么是 RAG 以及它如何工作 系统理解 RAG 原理与常见架构,为复杂应用提供知识检索基础
高级 AI 二:中高级 RAG 与工作流编排:以 LangGraph 为例 使用 LangGraph 等工具设计多步工作流与中高级 RAG 系统 🚧

🛠️ 如何学习

  • 根据个人能力,选择性地阅读和实践相关章节,如果有问题欢迎 issue 提问。

💻 本地启动本课件

现代方案

在 AI IDE 对话框(vscode、cursor、trae 等)中,输入下列提示词启动本课件:

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

旧方案

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

🤝 参与贡献

  • 如果你发现了一些问题,或者觉得任何可以改进本项目的地方,可以提 Issue 进行反馈。如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
  • 如果你想参与贡献本项目,可以提 Pull Request,如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
  • 如果你对 Datawhale 很感兴趣并想要发起一个新的项目,请按照Datawhale 开源项目指南进行操作即可~

🙏 感谢每位贡献者

  • 散步-项目负责人 (Datawhale成员)
  • 方可-指导老师(Datawhale成员, 清华大学)
  • Yerim Kang(实践项目部分-清华大学)
  • 赵芷霖(实践项目部分-清华大学)
  • 李亦萱(页面美术设计-清华大学)
  • AI Vibe Coding 101 内测群完整给建议体验的小伙伴们

特别感谢

  • 感谢 @Sm1les 对本项目的帮助与支持
  • 感谢所有为本项目做出贡献的开发者们和支持点赞的朋友们 ❤️

Stargazers    Forkers

📧 联系我们

如果有问题提建议吐槽,或者想要一起交流,请扫描下方二维码

扫描下方二维码关注公众号:Datawhale

📄 LICENSE

知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

Star History

Star History Chart

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for easy-vibe

Similar Open Source Tools

For similar tasks

For similar jobs