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 Banner" width="100%">

<p align="center" style="font-size: 1.2em; color: #666; margin: 20px 0;">
  Jump right in and vibe together — if you can talk, you can build apps.<br>
  <span style="font-size: 0.9em; color: #888;">直接上手，一起 vibe！会说话就会做应用。</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>
  Stages 1–3 of our tutorial are now available in 10 languages. Friends around the world, let's start coding 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>
      <sub>Clear guidance from zero, so you can stop "learning and forgetting"</sub>
    </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>
      <sub>Detailed walkthroughs that feel like learning with a private tutor</sub>
    </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>
      <sub>Virtual mouse guidance helps you quickly learn the core IDE workflow</sub>
    </td>
    <td width="50%" valign="top" align="center">
      <img src="assets/gif-diffusion.gif" width="100%">
      <br>
      <strong>Visible AI principles</strong>
      <br>
      <sub>Animated explanations make it easy to see how AI generates images</sub>
    </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>
      <sub>Interactive components let you click through the full RAG data flow</sub>
    </td>
    <td width="50%" valign="top" align="center">
      <img src="assets/git-terminal.gif" width="100%">
      <br>
      <strong>Visual terminal concepts</strong>
      <br>
      <sub>Command-line behavior becomes intuitive when the underlying logic is visualized</sub>
    </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](#why-easy-vibe)
- [News](#-news)
- [Who This Is For](#who-this-is-for)
- [Your Learning Paths](#your-learning-paths)
- [Study Suggestions](#study-suggestions)
  - [I. Beginner Entry](#i-beginner-entry)
  - [II. Junior and Mid-Level Developers](#ii-junior-and-mid-level-developers)
  - [III. Advanced Developers](#iii-advanced-developers)
  - [Appendix Knowledge Base](#-appendix-knowledge-base)
- [How To Learn](#️-how-to-learn)
- [Run Locally](#-run-locally)
- [Other Courses](#other-courses)
- [Contributing & Contributors](#-contributing--contributors)
- [LICENSE](#-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-05-31]** 🌍 **Stage 3 multilingual coverage is now complete**: Stage 3 (Advanced Developer) is fully available across all supported locales (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn), covering 25 chapters of core skills, cross-platform development, personal brand, and AI advanced topics.
- **[2026-05-26]** 🌍 **Stage 2 multilingual coverage is now complete**: Stage 2 (Junior Developer) is fully available across all supported locales (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn), covering 24 chapters of frontend, backend, AI capabilities, and comprehensive projects.
- **[2026-05-20]** 🌍 **Stage 1 multilingual coverage is now complete**: Stage 1 is fully available across all supported locales (zh-cn, en, zh-tw, ja-jp, ko-kr, es-es, fr-fr, de-de, ar-sa, vi-vn). Navigation/build checks have been verified to avoid 404s.
- **[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](https://datawhalechina.github.io/easy-vibe/zh-cn/vibe-stories/story-1.html)
- **[2026-03-26]** 🚀 **Major Stage 2 practice update**: Completed the SaaS capstone project "[Your First SaaS Full-Stack App: Copywriting Generator Website](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/fullstack-app/)" and substantially expanded the "[How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/stripe-payment/)" 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](https://datawhalechina.github.io/easy-vibe/en/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](https://datawhalechina.github.io/easy-vibe/en/stage-2/)
<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