easy-vibe

<!-- trigger vercel build -->
<div align="center">

<img src="assets/easy-vibe-logo-hd.svg" alt="Easy-Vibe Logo" width="300">

<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">
  🚀 <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><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></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>

## 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-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-01]** The [Advanced Development section](https://datawhalechina.github.io/easy-vibe/en/stage-3/) 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](https://datawhalechina.github.io/easy-vibe/en/appendix/), 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](https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/)

### 💡 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 y