easy-vibe

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

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
• [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

Past News

• [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.

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

Start here

💡 I have an idea I want to build

Best for: Beginners / product managers / founders
What you will learn: AI IDE tools, requirement breakdown, page design, feature planning, prompting, prototype iteration
What you will get: A demoable product prototype

Start learning

🚀 I want a structured learning path

Best for: Developers / advanced learners
What you will learn: Frontend, backend, databases, AI integration, deployment, Claude Code workflow
What you will get: The ability to ship a full-stack AI app independently

Start learning

🦞 I want to build an AI Agent

Best for: Developers interested in AI agents
What you will learn: OpenClaw assistant workflows, the Skills system, and automation
What you will get: Your own command-line AI assistant

Learn OpenClaw

📚 I want to browse reference material

Best for: Everyone
What you will learn: Computer fundamentals, AI principles, and 9 major knowledge areas
What you will get: 80+ interactive reference topics

Browse the knowledge base

Study Suggestions

• If you are a beginner, product manager, or founder, start with Stage 0 / Stage 1
• If you already have development experience, start with Stage 2
• If you want to jump directly into complex projects, go to Stage 3
• If you want to learn AI agents, check out Hello Claw

📖 Content Navigation

I. Beginner Entry

Section	Key Content
Learning Map	A guided overview of the full learning journey
In the AI era, if you can talk, you can code	Get your first feel for AI coding through examples like Snake
Finding great ideas	Learn how to discover and validate product ideas worth building
Introduction to AI IDE tools	Learn to use an IDE and build simple local projects
Build your prototype	Move from requirements to single-page and multi-page product prototypes
Add AI capabilities to your prototype	Integrate text, image, and video AI features
Complete project practice	Simulate real scenarios, collect user feedback, and iterate on a full project

Appendix: Product and Business Thinking

Section	Key Content
Product thinking and solution design	Core frameworks for going from zero to one with a product
AI industry application scenarios (B2B)	Understand how AI is applied across industries
AI consumer product inspiration (B2C)	Explore product opportunities in consumer AI

Appendix: Technical Solutions

Section	Key Content
What to do when coding errors happen	Common vibe coding issues and how to troubleshoot them
Comparison of seven AI coding tools	Compare major AI coding platforms through hands-on testing
Design a website with design and coding agents	Learn multi-agent collaboration in practice

II. Junior and Mid-Level Developers

Frontend

Section	Key Content
Build your own asset-generation agent starting from Lovart	Use Nanobanana and Lovart to generate high-quality visual assets and build a drawing agent that understands intent
Getting started with Figma and MasterGo	Organize information architecture and page structure with design tools
Build your first modern application: UI design	Turn design drafts into component-based interfaces
UI guidelines and multi-product UI design	Extend a unified visual system across multiple products
Make interfaces beautiful with LLMs and Skills	Use prompting and Skills plugins to generate distinctive, polished interfaces
Build Hogwarts portraits together	Create a frontend app from scratch that integrates AI capabilities
From design prototype to project code	Three practical paths to convert design prototypes into frontend code
Refresh your UI with modern component libraries	Build more professional interfaces faster with modern component systems

Backend

Section	Key Content
From databases to Supabase	Implement databases and APIs with Supabase and connect them to your frontend
Use LLMs to write API code and API docs	Generate backend code and documentation that is easier to read and test
Git and GitHub workflow	Manage versions and collaborate effectively with Git workflows
How to deploy web applications	Deploy apps with platforms like CloudBase, Vercel, and Zeabur
CLI AI coding tools	Build a personal engineering workflow with terminal-based AI tools
How to integrate Stripe and payment systems	Add payment flows and basic billing capabilities
Capstone: build your first modern full-stack application	Combine frontend, backend, and payments into a launch-ready web product

AI Capabilities Appendix

Section	Key Content
Getting started with Dify and knowledge base integration	Build utility products with Dify workflows and basic RAG

III. Advanced Developers

Claude Code Core Skills

Section	Key Content
Getting started with Claude Code	Installation, setup, fundamentals, and useful commands
Claude Code MCP guide	Connect Claude Code to GitHub, databases, APIs, and other services through MCP
Claude Code Skills guide	Package expertise into reusable skills you can use again and again
Claude Code workflow best practices	Best practices for refactoring, code review, and daily development
Claude Agent Teams guide	Coordinate multiple AI instances like a real development team
Claude Code Superpowers for engineering-grade development	Help AI produce engineering-grade code with TDD and best practices
How to keep Claude Code working for 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	Understand the ecosystem and ship a frontend mini program from template to launch
Build a WeChat Mini Program with backend	Add backend logic and databases to complete the full business loop
Build an Android app	Use Expo and related tools to build Android apps across web and native
Build an iOS app	Use Expo and related tools to build iOS apps across web and native
Build a personal website and academic blog	Create an online home for projects, personal branding, and academic work
Build a local PWA app	Turn a website into a real app with offline support, push, and installation
Build a browser AI assistant extension	Create a Chrome extension that summarizes any page with either cloud APIs or built-in AI
Build an Electron desktop app	Build a voice-to-text desktop app with Electron for three platforms
Rapidly build and mint an NFT	Write a smart contract from scratch, deploy it, and mint your own NFT
Build a VS Code extension	Build an AI project assistant with templates, code chat, and multi-file Q&A
Build an industrial-grade Qt desktop app	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	Build a systematic understanding of RAG principles and common architectures
Intermediate and advanced RAG workflows with LangGraph	Design multi-step workflows and more advanced RAG systems

📚 Appendix Knowledge Base

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

🛠️ How To Learn

• Read and practice the sections that match your current level. If you get stuck, feel free to open an issue.

💻 Run Locally

Modern approach

In an AI IDE chat window such as VS Code, Cursor, or Trae, you can simply say:

Please help me run this project locally.

Traditional approach

1. npm install
2. npm run dev
3. Open http://localhost:3000 in your browser.

🤝 Contributing

• 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.
• If you want to contribute, open a pull request. If nobody replies, you can also contact the Datawhale support team.
• If you want to start a new Datawhale open-source project, please follow the Datawhale Open Source Project Guide.

🙏 Contributors

• Sanbu - Project Lead (Datawhale member)
• Fang Ke - Mentor (Datawhale member, Tsinghua University)
• Yerim Kang (Practice projects, Tsinghua University)
• Zhilin Zhao (Practice projects, Tsinghua University)
• Yixuan Li (Visual design, Tsinghua University)
• Siyi Liu (Practice projects, Tsinghua University)
• Lixin Liu (Practice projects, Tsinghua University)
• Everyone in the AI Vibe Coding 101 internal testing group who shared suggestions and feedback

Special Thanks

• Thanks to @Sm1les for the help and support on this project
• Thanks to every contributor and everyone who supported the project with feedback and stars ❤️

📧 Contact

📄 LICENSE

Star History