datawhalechina /easy-vibe

💻 Vibe Coding 101|Your First Course For AI Product Builders.

★ 20,390⑂ 1,966
JavaScriptCreated 2025-12-28datawhalechina.github.io/easy-vibe/
20,390
stars
+67+97+718
1,966
forks
–
watchers
–
prs
–
issues
–
releases
–
discussions

README

A hands-on Vibe Coding guide chosen by tens of thousands of learners.
  Refined through real teaching and learner feedback. A complete roadmap, step-by-step explanations, and interactive demos guide you from zero to launch.
  数万名学习者选择的 Vibe Coding 产品实战教程。在真实教学与实践反馈中持续打磨,用完整路线、细致讲解和交互演示,陪你从零基础走到产品上线。





  你好 · Hello · 哈囉 · こんにちは · 안녕하세요 · Hola · Bonjour · Hallo · مرحبا · Xin chào
  Our tutorial supports 10 languages. Let's code together!
  我们的教程支持 10 种语言,欢迎世界各地的朋友一起 coding!



  🚀 Start Exploring · ✨ Interactive Tutorial · 🦞 Learn OpenClaw · 📖 Table of Contents
  🚀 开始体验 · ✨ 交互式教程 · 🦞 学习 OpenClaw · 📖 查看目录



  Read Online ·
  Learning Map
  
    开始阅读 ·
    学习地图
  



    
        
    
        
    
        



  
  
  
  
  
  
  
  
  
  






  



  Learning guide ·
  New to coding ·
  Validate an idea ·
  Ship an application ·
  Advanced projects




  



  First experience ·
  Stage 1 project ·
  Stage 2 full-stack project ·
  Stage 3 workflows ·
  Appendix



  
    
      
      
      A beginner-friendly learning map
      
      Clear guidance from zero, so you can stop "learning and forgetting"
    
    
      
      
      Step-by-step visual tutorials
      
      Detailed walkthroughs that feel like learning with a private tutor
    
  
  
    
      
      
      Immersive simulated coding
      
      Virtual mouse guidance helps you quickly learn the core IDE workflow
    
    
      
      
      Visible AI principles
      
      Animated explanations make it easy to see how AI generates images
    
  
  
    
      
      
      Learn RAG like a game
      
      Interactive components let you click through the full RAG data flow
    
    
      
      
      Visual terminal concepts
      
      Command-line behavior becomes intuitive when the underlying logic is visualized
    
  


  ⭐ Star the repo here to help accelerate updates ❤️



  
    
  
  Your next project could be here.Classroom tools, student projects, personal websites, and first demos are welcome.
  Add your story, a real screenshot or GIF, and a demo or repository link if available. Follow the template and open a Pull Request.
  
    Submit your case → ·
    Case template ·
    Open a Pull Request
  
  Explore real cases →


 Table of Contents

- Why Easy-Vibe
- What You Can Build
- News
- Who This Is For
- Your Learning Paths
- Study Suggestions
  - I. Beginner Entry
  - II. Junior and Mid-Level Developers
  - III. Advanced Developers
  - Appendix Knowledge Base
- How To Learn
- Run Locally
- Other Courses
- Contributing & Contributors
- LICENSE

 Why Easy-Vibe

Want an expense tracker? Say it.

Need a booking system with WeChat login? Say it.

Want a blog with comments? Say it.

In the AI era, programming starts by describing what you want.

Easy-Vibe teaches you how to turn that into a real product.


 What You Can Build


  


Illustrative project previews. Explore the corresponding tutorials:

AI Copywriter · Travel Planner · Personal Blog · Browser A

Snapshot: 2026-11-10T09:35:25Z · Data license Apache-2.0 · JSON