test-repo/docs-readme/en-US/README.md

███████╗ █████╗ ███████╗██╗   ██╗    ██╗   ██╗██╗██████╗ ███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝    ██║   ██║██║██╔══██╗██╔════╝
█████╗  ███████║███████╗ ╚████╔╝     ██║   ██║██║██████╔╝█████╗
██╔══╝  ██╔══██║╚════██║  ╚██╔╝      ╚██╗ ██╔╝██║██╔══██╗██╔══╝
███████╗██║  ██║███████║   ██║        ╚████╔╝ ██║██████╔╝███████╗
╚══════╝╚═╝  ╚═╝╚══════╝   ╚═╝         ╚═══╝  ╚═╝╚═════╝ ╚══════╝

Easy-Vibe: Learn Vibe Coding from 0 to 1

Zero Foundation, Project-Based Learning, Build Your First AI Product

📌 Start Reading Online

Online Reading · Learning Map · Community

🚀 Project Introduction

When you try to write code with AI, encounter constant errors, often want to give up, and are unclear about how to actually deploy your programs online 😢.

This tutorial is specifically designed to take you from 0 to 1, progressively mastering Vibe Coding techniques:

• Stage 0: Get started with vibe coding skills through simple games
• Stage 1: Vibe coding skills and business understanding from a product manager perspective, implementing web application prototypes
• Stage 2: Learn frontend/backend development and AI capabilities related vibe coding techniques, complete full applications
• Stage 3: Master multi-platform complex application construction solutions, moving towards production-grade applications

We believe that by mastering Vibe Coding combined with systematic training, one person can become a developer combining frontend, backend, AI capability integration, and product design.

This project is primarily designed for three types of learners:

• Beginners (ordinary people / product and operations): Help non-technical beginners understand key concepts and complete their first product prototype.
• Intermediate Developers (students and developers with some foundation): Master frontend/backend vibe coding and AI capability knowledge.
• Advanced Developers (companies and startups, open source and independent developers): Advanced development techniques, multi-platform development.

📖 Content Navigation

Appendix

AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations

Stage 0: Kindergarten

Chapter	Key Content	Status
Preface: Learning Map	Overall learning path overview	✅
Primary 1: Programming by Speaking in the AI Era	Experience AI programming capabilities through Snake and other cases	✅

Stage 1: AI Product Manager

Chapter	Key Content	Status
Primary 2: Understanding AI IDE Tools	Learn to use IDE, create small games locally	✅
Primary 3: Building Prototypes Hands-On	From requirement analysis, AI-generated single page to multi-page product prototype	✅
Primary 4: Adding AI Capabilities to Prototypes	Learn to integrate common AI capabilities (text, image, video)	✅
Primary 5: Complete Project Practice	Simulate real scenarios, accept user feedback iterations, complete projects	✅
Final Assignment: Build a Complete Web Application Prototype and Present	Fully implement application, showcase application effects	✅

Appendix

Chapter	Key Content	Status
Appendix A: Product Thinking Supplement	Thinking framework needed to build products from scratch	✅
Appendix B: Common Errors and Solutions	Common errors in vibe coding and troubleshooting methods	✅

Stage 2: Intermediate Developer

Frontend Part

Chapter	Key Content	Status
Frontend 0: Using Lovart to Generate Assets	Learn to use Lovart to batch generate characters, scenes and other visual assets	🚧
Frontend 1: Figma & MasterGo Introduction	Use design tools to organize information architecture and page structure	🚧
Frontend 2: Building Your First Modern Application - UI Design	Complete componentized interface based on design specs, implement the first link from design to code	🚧
Frontend 3: Reference UI Design Specs and Multi-Product UI Design	Expand multi-product interfaces around unified visual design, practice systematic design capabilities	🚧
Frontend 4: Building Hogwarts Portraits Together	Build AI-capable frontend applications from scratch, connecting design and development	✅

Backend and Full Stack Part

Chapter	Key Content	Status
Backend 1: What is API	Understand HTTP interfaces and request-response models	✅
Backend 2: From Database to Supabase	Implement databases and APIs on Supabase, connect data models with frontend pages	✅
Backend 3: AI-Assisted Interface Code and Documentation	Use LLM to help generate interface and database documentation and code	🚧
Backend 4: Git Workflow	Manage code in Git workflow, version control and collaboration	✅
Backend 5: Zeabur Deployment	Deploy applications to Zeabur for production	✅
Backend 6: Modern CLI Development Tools	Use CLI-based AI programming tools to accelerate development and debugging	✅
Backend 7: Integrating Payment Systems like Stripe	Integrate payment systems, complete payment links and basic settlement processes	🚧
Assignment 1: Build Your First Modern Application - Full Stack	Integrate frontend, backend and payment modules, complete production-ready full stack web application	🚧
Assignment 2: Modern Frontend Component Library + Trae Practice	Use modern frontend component libraries with Trae, independently complete login/registration and payment-capable products	🚧

AI Capabilities Appendix

Chapter	Key Content	Status
AI 1: Dify Introduction and Knowledge Base Integration	Use Dify Workflow and basic RAG to build utility products	✅
AI 2: Learn to Query AI Dictionary and Integrate Multimodal APIs	Learn to find suitable models and APIs, integrate text, image and other multimodal capabilities	🚧

Stage 3: Advanced Developer

Chapter	Key Content	Status
Advanced 1: MCP and ClaudeCode Skills	Extend IDE capabilities through MCP and Skills, integrate external services as tools	🚧
Advanced 2: Making Coding Tools Work for Long Periods	Design and configure long-running tasks, make Coding Tools more stable and reliable	🚧
Advanced 3: Multi-Platform Development: Building WeChat Mini Programs	Understand WeChat mini program ecosystem, complete a frontend mini program from official template to launch	✅
Advanced 4: Multi-Platform Development: Building WeChat Mini Programs - With Backend	Integrate databases and backend logic in mini programs, complete business loops	🚧
Advanced 5: Multi-Platform Development: Building Android Apps	Use Expo and other tools to complete Web/native integrated Android application development	🚧
Advanced 6: Multi-Platform Development: Building iOS Apps	Use Expo and other tools to complete Web/native integrated iOS application development	🚧
Advanced 7: Building Your Personal Website and Academic Blog	From selection, building to deployment, create a permanent online homepage showcasing projects and academic achievements	🚧

AI Capabilities Appendix

Chapter	Key Content	Status
Advanced AI 1: What is RAG and How It Works	Systematically understand RAG principles and common architectures	✅
Advanced AI 2: Intermediate/Advanced RAG and Workflow Orchestration with LangGraph	Use LangGraph and other tools to design multi-step workflows and intermediate/advanced RAG systems	🚧

🛠️ How to Learn

• Choose relevant chapters to read and practice based on your personal ability. If you have questions, feel free to ask via issues.

💻 Running This Course Locally

Modern Approach

In the AI IDE dialog box (vscode, cursor, trae, etc.), enter the following prompt to start this course:

Please help me run this project's local service

Traditional Approach

1. npm install
2. npm run dev
3. Open your browser and visit http://localhost:3000 to view.

🤝 Contributing

• If you discover any problems or see areas for improvement, please submit an Issue for feedback. If there's no response after submitting, you can contact the Nanny Team for follow-up.
• If you want to contribute to this project, please submit a Pull Request. If there's no response after submitting, you can contact the Nanny Team for follow-up.
• If you're very interested in Datawhale and want to start a new project, please follow the Datawhale Open Source Project Guide.

🙏 Thanks to Every Contributor

• Sanbu - Project Lead (Datawhale Member)
• Fang Ke - Advisor (Datawhale Member, Tsinghua University)
• Yerim Kang (Practice Project Section - Tsinghua University)
• Zhao Zhilin (Practice Project Section - Tsinghua University)
• Li Yixuan (Page Art Design - Tsinghua University)
• All friends from the AI Vibe Coding 101 Beta Group who provided suggestions and experience

Special Thanks

• Thanks to @Sm1les for their help and support with this project
• Thanks to all developers who contributed to this project ❤️

📧 Contact Us

If you have questions, suggestions, or want to communicate together, please scan the QR code below

Scan the QR code below to follow the official account: Datawhale

📄 LICENSE

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License .

Star History