easy-vibe

<!-- trigger vercel build --> <div align="center"> <img src="assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300"> <img src="assets/banner.png" alt="Easy-Vibe — Think it. Build it. From first idea to real product." width="100%"> <p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;"> Learn AI coding from zero by shipping real products.<br> <span style="font-size: 0.9em; color: #888;">从零开始学 AI 编程，把想法真正做成产品。</span> </p>

<a href="https://trendshift.io/repositories/22079" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22079" alt="datawhalechina/easy-vibe | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>

<p align="center" style="font-size: 1.05em; color: #666; margin: 16px 0;"> 你好 · Hello · 哈囉 · こんにちは · 안녕하세요 · Hola · Bonjour · Hallo · مرحبا · Xin chào<br> Our tutorial supports 10 languages. Let's code together!<br> <span style="font-size: 0.9em; color: #888;">我们的教程支持 10 种语言，欢迎世界各地的朋友一起 coding！</span> </p> <p align="center"> 🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Start Exploring</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/en/appendix/">Interactive Tutorial</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">Learn OpenClaw</a> · 📖 <a href="#table-of-contents">Table of Contents</a><br> <span style="font-size: 0.85em; color: #888;">🚀 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始体验</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">交互式教程</a> · 🦞 <a href="https://github.com/datawhalechina/hello-claw">学习 OpenClaw</a> · 📖 <a href="#table-of-contents">查看目录</a></span> </p> <p align="center"> <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> · <a href="#-content-navigation">Learning Map</a><br> <span style="font-size: 0.85em; color: #888;"> <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">开始阅读</a> · <a href="#-content-navigation">学习地图</a> </span> </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="README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a> <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/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/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/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> </p> </div> <table align="center"> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-header.png" width="100%"> <br> <strong>A beginner-friendly learning map</strong> <br> _{Clear guidance from zero, so you can stop "learning and forgetting"} </td> <td width="50%" valign="top" align="center"> <img src="assets/gif-tutorial.png" width="100%"> <br> <strong>Step-by-step visual tutorials</strong> <br> _{Detailed walkthroughs that feel like learning with a private tutor} </td> </tr> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-ide.gif" width="100%"> <br> <strong>Immersive simulated coding</strong> <br> _{Virtual mouse guidance helps you quickly learn the core IDE workflow} </td> <td width="50%" valign="top" align="center"> <img src="assets/gif-diffusion.gif" width="100%"> <br> <strong>Visible AI principles</strong> <br> _{Animated explanations make it easy to see how AI generates images} </td> </tr> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-rag.gif" width="100%"> <br> <strong>Learn RAG like a game</strong> <br> _{Interactive components let you click through the full RAG data flow} </td> <td width="50%" valign="top" align="center"> <img src="assets/git-terminal.gif" width="100%"> <br> <strong>Visual terminal concepts</strong> <br> _{Command-line behavior becomes intuitive when the underlying logic is visualized} </td> </tr> </table> <div align="center"> <h3>⭐ <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Star the repo here</a> to help accelerate updates ❤️</h3> </div> <div align="center" style="margin: 30px 0;"> <a href="https://github.com/datawhalechina/easy-vibe/issues/new?template=story_submission.md"> <img src="https://raw.githubusercontent.com/datawhalechina/easy-vibe/main/assets/stories_image.png" alt="Share Your Vibe Story" width="80%" style="border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"> </a> <p style="margin-top: 15px; font-size: 1.1em; color: #666;"> 📝 <strong>Have your own vibe coding story?</strong> Submit it here and inspire others! </p> </div>

Table of Contents

• Why Easy-Vibe
• 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.

🔥 News

• [2026-06-17] 🌍 Full multilingual coverage complete: All tutorial content (Stages 1-3) is now available in 10 languages (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn), covering product prototyping, full-stack development, and cross-platform development.
• [2026-03-29] ✨ Vibe Stories launched and upgraded with real user journeys: Added a new homepage Vibe Stories section with an interactive carousel and dedicated story pages, then replaced placeholder content with four real user stories featuring a rural primary school teacher, a college student, a high school IT teacher, and a truck driver who built real products with AI. 👉 View the stories
• [2026-03-26] 🚀 Major Stage 2 practice update: Completed the SaaS capstone project "Your First SaaS Full-Stack App: Copywriting Generator Website" and substantially expanded the "How to integrate Stripe and payment systems" section, plus key content around multi-product UI and WeChat Mini Program backend workflows.
• [2026-03-25] 📚 New appendix: User Research and Requirement Validation: Added four new articles covering idea sourcing, the Double Diamond model, Jobs to Be Done, and The Mom Test to help beginners discover and validate product ideas. 👉 Read the appendix
• [2026-03-25] 📚 English documentation fully updated: Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) are now fully available in English. 👉 Start learning

<details> <summary>Past News</summary>

• [2026-03-02] 🦞 OpenClaw and AI Agent friendly support: Added llms.txt so OpenClaw, Claude, Cursor, Trae, and other AI agents can quickly understand the repository structure and find the right tutorial content.
• [2026-03-01] The Advanced Development section has been comprehensively upgraded with deep guides for Claude Code, including MCP, Skills, Agent Teams, and more, along with eight cross-platform project tutorials.
• [2026-02-25] Updated the Appendix Knowledge Base, now covering 9 knowledge areas and 80+ interactive topics.
• [2026-01-27] Added Android and iOS app development tutorials.
• [2026-01-19] Released interactive demos for Prompt Engineering, AI history, authentication design, Git principles, and more.
• [2026-01-16] Reorganized the project structure and formally established a beginner entry path.
• [2026-01-14] Completed a large update to the Stage 1 product prototyping docs.
• [2026-01-13] Refactored the documentation architecture and fully enabled multi-language support.
• [2026-01-01] Released the core learning map for the project.

</details>

Who This Is For

• Complete beginners: Build your first project first, then understand how it works
• Product managers / founders: Validate ideas fast and build MVPs at low cost
• Students: Develop practical skills for the AI era
• Junior developers: Learn the full path from idea to launch
• Mid-level and senior developers: Upgrade your AI collaboration workflow for complex projects

Your Learning Paths

🎮 I want a fast first win

Best for: Everyone What you will learn: What AI coding actually feels like through a simple, concrete hands-on example What you will get: A clear first impression of vibe coding and how to work with AI by conversation

Start here

💡 I want to turn an idea into a product prototype

Best for: Beginners / product managers / founders What you will learn: Learning roadmap, AI IDE tools, idea validation, prototyping, AI capability integration, and full demo iteration What you will get: A demoable AI product prototype you can actually show to users or teammates

Start learning

🚀 I want to build full-stack products end to end

Best for: Junior developers / indie hackers / advanced learners What you will learn: Frontend workflows, design-to-code, databases, backend APIs, deployment, billing, and major projects What you will get: The ability to independently ship modern AI-enabled web applications

[Start learning](https://datawhalechina.github.io/easy-vibe/en/s