easy-vibe

Table of Contents

• Why Easy-Vibe
• What You Can Build
• 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.

What You Can Build

Illustrative project previews. Explore the corresponding tutorials:

AI Copywriter · Travel Planner · Personal Blog · Browser AI Assistant

🔥 News

• [2026-08-12] 📘 Stage 1 has been restructured and polished: The beginner path now starts with real problems and proceeds through finding opportunities, choosing a direction, understanding user needs, conducting interviews, narrowing the solution, building a prototype, integrating AI, and completing a presentable project. The explanations, real-world examples, images, and hands-on exercises have also been revised. Stage 1 is now better suited to complete beginners, first-time product builders, and indie developers who want to move from a real need to a prototype that can be shown to users. 👉 Start with Stage 1
• [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

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

AI-Native: I want advanced Claude Code and agent workflows

Best for: Developers interested in AI-native engineering What you will learn: Claude Code, MCP, Skills, Agent Teams, long-running tasks, Spec Coding, and cross-platform app delivery What you will get: A stronger workflow for complex AI-assisted development and automation

Go to advanced development

📚 I want reference material and fundamentals

Best for: Everyone What you will learn: Computer fundamentals, frontend/backend basics, infrastructure, AI principles, and engineering practices What you will get: A long-term reference knowledge base covering 9 major knowledge areas

Browse the knowledge base

Study Suggestions

• If you are a beginner, product manager, or founder, start with Stage 1
• If you want to move from prototypes to full-stack delivery, start with Stage 2
• If you want advanced Claude Code workflows or cross-platform projects, go to Stage 3
• If you get blocked by concepts or missing background knowledge, use the Appendix Knowledge Base

📖 Content Navigation

I. Beginner Entry

Section	Key Content
Learning Map	A guided overview of the full learning journey
AI Era: If You Can Speak, You Can Code	Get your first feel for AI coding through examples like Snake
Master AI Programming Tools	Learn how AI IDE tools work and build simple local projects with them
Find Great Ideas	Learn how to discover and validate product ideas worth building
Build Product Prototypes	Move from requirements to single-page and multi-page product prototypes
Integrate AI Capabilities	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 Application Scenario Reference (B2B & B2C)	B2B industry and B2C consumer AI application scenarios

Appendix: User Research and Requirement Validation

Section	Key Content
Where to find ideas: 3 reference sources that work best for beginners	Build a reliable pipeline for finding concrete product opportunities
Double Diamond: first do the right thing, then do it right	Use a structured process to move from scattered inspiration to a workable direction
Use Jobs to Be Done to find what users really want done	Analyze user goals through real tasks instead of surface-level feature requests
The Mom Test: a user interview method for validating demand	Learn how to ask better questions and avoid false-positive feedback

Appendix: Technical Solutions

Section	Key Content
What to do if you encounter errors	Common vibe coding issues and how to troubleshoot them
Comparison of Seven AI Programming Tools	Compare major AI coding platforms through hands-on testing
Design Websites with Agents	Learn multi-agent collaboration in practice

More Beginner Practice

• Clone from a Screenshot: Your First Imitation Exercise
• Publish Your Vibe Coding Project on ModelScope

II. Junior and Mid-Level Developers

Frontend

Section	Key Content
Frontend 0: Build Your Own Asset-Production Agent with Lovart	Use Nanobanana and Lovart to batch-generate visual assets and build a drawing agent with intent recognition
Frontend 1: Figma & MasterGo Basics	Learn the workflow from design drafts to implementation-ready UI thinking
Frontend 2: Build Your First Modern App - UI Design	Learn the UI design foundations behind modern application interfaces
Frontend 3: UI Guidelines and Multi-Product Design	Improve consistency and aesthetics across multiple products with shared UI rules
Frontend 4: Make Interfaces Beautiful with LLMs and Skills	Use prompts and plugins to make AI generate more polished, distinctive interfaces
Frontend 4: Let's Build Hogwarts Portraits	Build an interactive AI-image frontend project from scratch
Frontend 6: From Design Prototype to Project Code	Turn design prototypes into frontend code that can really run in the browser
Frontend 7: Upgrade Your UI with Modern Component Libraries	Use component libraries to build professional interfaces faster

Backend

Section	Key Content
Backend 1: Learn Git and GitHub	Master core version control operations and collaboration workflows with Git
Backend 2: From Database to Supabase	Learn relational database basics and use Supabase as a modern BaaS platform
Backend 3: Backend API Design and Development	Use AI to assist API design, backend code generation, and API documentation
Backend 4: Ship Your Product Prototype	Quickly deploy full-stack applications to the cloud with Zeabur
Backend 5: From IDEs to CLI AI Coding Tools	Explore terminal-first AI coding workflows for modern development
Backend 6: Integrate Stripe and Other Billing Systems	Add monetization with payment and billing capabilities

Major Projects

Section	Key Content
Major Project 1: Your First SaaS Full-Stack App - AI Copywriting Website	Build an AI marketing copy workspace with login, generation, billing, and admin management
Major Project 2: Online Exam and Management System	Build an online exam system with question generation, test-taking flows, and admin tools

More Project Practice

Section
Modern AI Image Generation SaaS
Custom Dify Agent Platform
Travel Planning Agent Platform
Spring Boot Movie Recommendation System
Grocery E-Commerce Microservices System
Go Traffic Data Analysis Platform

AI Capabilities Appendix

Section	Key Content
AI 1: Dify Basics & Knowledge Base Integration	Learn to build AI applications with Dify and integrate private knowledge bases

More Full-Stack Tutorials

• Put Your Website Online (Advanced): Set Up Your Own VPS

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
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
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
Claude Code workflow best practices	Best practices for refactoring, code review, and daily development
Building Software End to End with GitHub Issues: From Product Conversation to a macOS App	Spec → Issues → implementation → tests and review
Claude Code remote development on mobile	Use Claude Code beyond the desktop and build a productive remote workflow on mobile devices
Claude Agent SDK complete guide	Build custom agent workflows and integrate Claude into your own tools with the SDK
From vibe coding to spec coding	Move from ad-hoc prompting to a more structured, specification-driven AI development workflow

Cross-Platform Development

Section	Key Content
How to choose the right platform for your app	Compare app forms and choose the right platform based on users, scenarios, and delivery goals
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	Learn Android app development with a modern native workflow
Build an iOS app	Learn iOS app development and the conventions of the Apple ecosystem
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

More Advanced Tutorials

• From a Web Page to Real Software, and Then to an AI-Native Product
• Build a Store Inspection App with React Native and Expo
• How to Build a Cross-Platform App with Flutter
• How to Build Platform, Pixel-Art, and 3D Games with Godot
• How to Publish the Application You Built

📚 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

🎓 Other Courses

• Hands-on Modern RL
• Learn Harness Engineering

🛠️ 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.

Other Courses

Our team has also created other courses! Check them out:

Hands-on Modern RL: An open-source, hands-on curriculum bridging the gap from basic RL concepts to LLM alignment, RLVR, and advanced Agentic systems.

Learn Harness Engineering: A comprehensive guide to harness engineering.

🤝 Contributing & Contributors

• 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 OpenAI for providing compute support for the development of this project
• 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 ❤️

📄 LICENSE

Star History