In the past, building a mini app, booking system, or personal blog usually meant studying for a long time before you could make anything useful. Now, you can describe the idea first and build it together with AI.
For complete beginners, that means you can create your first real project before mastering an entire programming curriculum. For junior and mid-level developers, it means closing the loop from requirements to frontend, backend, and deployment much faster. For senior developers, it means learning a new way of working: treating AI as a development partner for prototyping, refactoring, integration, and complex delivery.
Easy-Vibe is not just about generating code with AI. It is about helping you truly learn how development works in the AI era.
## 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 to try it first (5-minute experience)
**Best for**: Everyone
**What you will learn**: Your first AI coding experience with a Snake mini-game
**What you will get**: Your first AI-built app in 5 minutes
- **[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.
- **[2026-03-25]** 📚 **English documentation fully updated**: Stage 2 (Full-stack Development) and Stage 3 (Advanced Development) are now fully available in English.
- **[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.
| [Learning Map](https://datawhalechina.github.io/easy-vibe/en/stage-0/0.1-learning-map/) | A guided overview of the full learning journey |
| [In the AI era, if you can talk, you can code](https://datawhalechina.github.io/easy-vibe/en/stage-0/0.2-ai-capabilities-through-games/) | Get your first feel for AI coding through examples like Snake |
| [Finding great ideas](https://datawhalechina.github.io/easy-vibe/en/stage-1/1.0-finding-great-idea/) | Learn how to discover and validate product ideas worth building |
| [Introduction to AI IDE tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/1.1-introduction-to-ai-ide/) | Learn to use an IDE and build simple local projects |
| [Build your prototype](https://datawhalechina.github.io/easy-vibe/en/stage-1/1.2-building-prototype/) | Move from requirements to single-page and multi-page product prototypes |
| [Add AI capabilities to your prototype](https://datawhalechina.github.io/easy-vibe/en/stage-1/1.3-integrating-ai-capabilities/) | Integrate text, image, and video AI features |
| [Complete project practice](https://datawhalechina.github.io/easy-vibe/en/stage-1/1.4-complete-project-practice/) | Simulate real scenarios, collect user feedback, and iterate on a full project |
| [Product thinking and solution design](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/) | Core frameworks for going from zero to one with a product |
| [AI industry application scenarios (B2B)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/) | Understand how AI is applied across industries |
| [AI consumer product inspiration (B2C)](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/) | Explore product opportunities in consumer AI |
| [What to do when coding errors happen](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/) | Common vibe coding issues and how to troubleshoot them |
| [Comparison of seven AI coding tools](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial) | Compare major AI coding platforms through hands-on testing |
| [Design a website with design and coding agents](https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents) | Learn multi-agent collaboration in practice |
| [Build your own asset-generation agent starting from Lovart](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.0-lovart-assets/) | Use Nanobanana and Lovart to generate high-quality visual assets and build a drawing agent that understands intent |
| [Getting started with Figma and MasterGo](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.1-figma-mastergo/) | Organize information architecture and page structure with design tools |
| [Build your first modern application: UI design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.2-ui-design/) | Turn design drafts into component-based interfaces |
| [UI guidelines and multi-product UI design](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.3-multi-product-ui/) | Extend a unified visual system across multiple products |
| [Make interfaces beautiful with LLMs and Skills](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.4-llm-skills-beautiful/) | Use prompting and Skills plugins to generate distinctive, polished interfaces |
| [Build Hogwarts portraits together](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.5-hogwarts-portraits/) | Create a frontend app from scratch that integrates AI capabilities |
| [From design prototype to project code](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.6-design-to-code/) | Three practical paths to convert design prototypes into frontend code |
| [Refresh your UI with modern component libraries](https://datawhalechina.github.io/easy-vibe/en/stage-2/frontend/2.7-modern-component-library/) | Build more professional interfaces faster with modern component systems |
| [From databases to Supabase](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.2-database-supabase/) | Implement databases and APIs with Supabase and connect them to your frontend |
| [Use LLMs to write API code and API docs](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.3-ai-interface-code/) | Generate backend code and documentation that is easier to read and test |
| [Git and GitHub workflow](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.4-git-workflow/) | Manage versions and collaborate effectively with Git workflows |
| [How to deploy web applications](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.5-zeabur-deployment/) | Deploy apps with platforms like CloudBase, Vercel, and Zeabur |
| [CLI AI coding tools](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.6-modern-cli/) | Build a personal engineering workflow with terminal-based AI tools |
| [How to integrate Stripe and payment systems](https://datawhalechina.github.io/easy-vibe/en/stage-2/backend/2.7-stripe-payment/) | Add payment flows and basic billing capabilities |
| [Capstone: build your first modern full-stack application](https://datawhalechina.github.io/easy-vibe/en/stage-2/assignments/2.1-fullstack-app/) | Combine frontend, backend, and payments into a launch-ready web product |
| [Getting started with Dify and knowledge base integration](https://datawhalechina.github.io/easy-vibe/en/stage-2/ai-capabilities/2.1-dify-knowledge-base/) | Build utility products with Dify workflows and basic RAG |
| [Getting started with Claude Code](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/basics/) | Installation, setup, fundamentals, and useful commands |
| [Claude Code MCP guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/mcp/) | Connect Claude Code to GitHub, databases, APIs, and other services through MCP |
| [Claude Code Skills guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/skills/) | Package expertise into reusable skills you can use again and again |
| [Claude Code workflow best practices](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/workflow/) | Best practices for refactoring, code review, and daily development |
| [Claude Agent Teams guide](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/agent-teams/) | Coordinate multiple AI instances like a real development team |
| [Claude Code Superpowers for engineering-grade development](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/superpowers/) | Help AI produce engineering-grade code with TDD and best practices |
| [How to keep Claude Code working for long-running tasks](https://datawhalechina.github.io/easy-vibe/en/stage-3/core-skills/long-running-tasks/) | Design long-running tasks so coding tools can keep working until the job is done |
#### Cross-Platform Development
| Section | Key Content |
| :------ | :---------- |
| [Build a WeChat Mini Program](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.3-wechat-miniprogram/) | Understand the ecosystem and ship a frontend mini program from template to launch |
| [Build a WeChat Mini Program with backend](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Add backend logic and databases to complete the full business loop |
| [Build an Android app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.5-android-app/) | Use Expo and related tools to build Android apps across web and native |
| [Build an iOS app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.6-ios-app/) | Use Expo and related tools to build iOS apps across web and native |
| [Build a personal website and academic blog](https://datawhalechina.github.io/easy-vibe/en/stage-3/personal-brand/3.7-personal-website-blog/) | Create an online home for projects, personal branding, and academic work |
| [Build a local PWA app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.8-pwa-local-app/) | Turn a website into a real app with offline support, push, and installation |
| [Build a browser AI assistant extension](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.9-browser-ai-extension/) | Create a Chrome extension that summarizes any page with either cloud APIs or built-in AI |
| [Build an Electron desktop app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.10-electron-voice-to-text/) | Build a voice-to-text desktop app with Electron for three platforms |
| [Rapidly build and mint an NFT](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.11-nft-minting/) | Write a smart contract from scratch, deploy it, and mint your own NFT |
| [Build a VS Code extension](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.12-vscode-extension/) | Build an AI project assistant with templates, code chat, and multi-file Q&A |
| [Build an industrial-grade Qt desktop app](https://datawhalechina.github.io/easy-vibe/en/stage-3/cross-platform/3.13-qt-industrial-hmi/) | Create a real-time Qt HMI system with trends, alerts, and monitoring |
#### AI Capabilities Appendix
| Section | Key Content |
| :------ | :---------- |
| [What is RAG and how does it work](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/3.a1-rag-introduction/) | Build a systematic understanding of RAG principles and common architectures |
| [Intermediate and advanced RAG workflows with LangGraph](https://datawhalechina.github.io/easy-vibe/en/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Design multi-step workflows and more advanced RAG systems |
> Covering **9 major knowledge areas** and **80+ interactive topics**, this appendix uses animation and visual components to help you intuitively understand core concepts from computer fundamentals to the AI frontier.
>
> 👉 [View the full appendix](https://datawhalechina.github.io/easy-vibe/en/appendix/)
- If you find an issue or see something that can be improved, feel free to open an issue. If nobody replies, you can also contact the [Datawhale support team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
- If you want to contribute, open a pull request. If nobody replies, you can also contact the [Datawhale support team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
- If you want to start a new Datawhale open-source project, please follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
</a>.
</div>
## Star History
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
