A hands-on Vibe Coding guide chosen by tens of thousands of learners.
Refined through real teaching and learner feedback. A complete roadmap, step-by-step explanations, and interactive demos guide you from zero to launch.
数万名学习者选择的 Vibe Coding 产品实战教程。
在真实教学与实践反馈中持续打磨，用完整路线、细致讲解和交互演示，陪你从零基础走到产品上线。
你好 · Hello · 哈囉 · こんにちは · 안녕하세요 · Hola · Bonjour · Hallo · مرحبا · Xin chào
Our tutorial supports 10 languages. Let's code together!
我们的教程支持 10 种语言，欢迎世界各地的朋友一起 coding！
🚀 Start Exploring · ✨ Interactive Tutorial · 🦞 Learn OpenClaw · 📖 Table of Contents
🚀 开始体验 · ✨ 交互式教程 · 🦞 学习 OpenClaw · 📖 查看目录
Read Online ·
Learning Map
开始阅读 ·
学习地图
Learning guide · New to coding · Validate an idea · Ship an application · Advanced projects
First experience · Stage 1 project · Stage 2 full-stack project · Stage 3 workflows · Appendix
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 |
⭐ Star the repo here to help accelerate updates ❤️
Your next project could be here.
Classroom tools, student projects, personal websites, and first demos are welcome.
Add your story, a real screenshot or GIF, and a demo or repository link if available. Follow the template and open a Pull Request.
- Why Easy-Vibe
- What You Can Build
- News
- Who This Is For
- Your Learning Paths
- Study Suggestions
- How To Learn
- Run Locally
- Other Courses
- Contributing & Contributors
- LICENSE
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.
Illustrative project previews. Explore the corresponding tutorials:
AI Copywriter · Travel Planner · Personal Blog · Browser AI Assistant
- [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
Past News
- [2026-03-02] 🦞 OpenClaw and AI Agent friendly support: Added
llms.txtso 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.
- 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
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
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
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
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
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
- 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
↑ See the learning progression above, then choose from the chapters below.
| 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 |
| 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 |
| 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 |
| 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 |
- Clone from a Screenshot: Your First Imitation Exercise
- Publish Your Vibe Coding Project on ModelScope
| 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 |
| 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 |
| 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 |