easy-vibe

<!-- trigger vercel build --> <div align="center"> <img src="assets/header.png" width="100%" /> <pre style="font-family: 'Courier New', monospace; font-size: 16px; color: #000000; margin: 0; padding: 0; line-height: 1.2; transform: skew(-1deg, 0deg); display: block;"> ███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝</pre> # Easy-Vibe : Learn vibe coding from 0 to 1 <p align="center"> 📌 <a href="https://datawhalechina.github.io/easy-vibe/">Read Online (Read Online)</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/prompt-engineering/">Interactive Tutorial (Interactive Tutorial)</a> </p> <p align="center"> <a href="https://datawhalechina.github.io/easy-vibe/">Read Online</a> · <a href="#-内容导航">Learning Map</a> · <a href="#contact">Community</a> </p> <p align="center"> <a href="https://github.com/datawhalechina/easy-vibe/stargazers" target="_blank"> <img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=star&logoColor=white&labelColor=1a1a2e" alt="Stars"></a> <a href="https://github.com/datawhalechina/easy-vibe/network/members" target="_blank"> <img src="https://img.shields.io/github/forks/datawhalechina/easy-vibe?color=660874&style=for-the-badge&logo=git-fork&logoColor=white&labelColor=1a1a2e" alt="Forks"></a> <a href="LICENSE" target="_blank"> <img src="https://img.shields.io/badge/License-CC_BY_NC_SA_4.0-4ecdc4?style=for-the-badge&logo=creative-commons&logoColor=white&labelColor=1a1a2e" alt="License"></a> </p> <p align="center"> <a href="./README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a> <a href="docs-readme/zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a> <a href="docs-readme/en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a> <a href="docs-readme/ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a> <a href="docs-readme/es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a> <a href="docs-readme/fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a> <a href="docs-readme/ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a> <a href="docs-readme/ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a> <a href="docs-readme/vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a> <a href="docs-readme/de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a> </p> </div> <table align="center"> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-header.png" width="100%"> <br> <strong>Learning Map for Newbies</strong> <br> _{Exclusive guidance for beginners, clear path planning, say goodbye to "learn and forget"} </td> <td width="50%" valign="top" align="center"> <img src="assets/gif-tutorial.png" width="100%"> <br> <strong>Step-by-step Tutorial with Images and Text</strong> <br> _{Detailed explanations with images and text, like having a private tutor by your side, you can learn by following along} </td> </tr> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-ide.gif" width="100%"> <br> <strong>Immersive Simulated Programming</strong> <br> _{Virtual mouse automatically guides you, taking you to quickly get started with the core usage of IDE} </td> <td width="50%" valign="top" align="center"> <img src="assets/gif-diffusion.gif" width="100%"> <br> <strong>Visible AI Principles</strong> <br> _{Algorithm principles are animated, and you can understand at a glance how AI "draws" pictures} </td> </tr> <tr> <td width="50%" valign="top" align="center"> <img src="assets/gif-rag.gif" width="100%"> <br> <strong>Learn RAG Like Playing a Game</strong> <br> _{Exclusive interactive components, click to see the RAG data flow clearly} </td> <td width="50%" valign="top" align="center"> <img src="assets/git-terminal.gif" width="100%"> <br> <strong>Visualized Terminal Principles</strong> <br> _{Command line operations are visualized, intuitively displaying the background logic and principles} </td> </tr> </table> <div align="center"> <h3>⭐ Welcome to <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Click here to Star</a> to speed up updates ❤️</h3> </div> In the AI era, those who turn ideas into products are often not the strongest in technology, but the first to take action. Many people are still dissuaded by "can't understand the code" and "can't configure the environment" even with AI assistants. **Easy-Vibe was born for this.** Assuming everyone is starting from scratch, we will guide you step by step from writing the first line of code to understanding the front-end and back-end logic, and finally launching the product. - **Target audience**: Beginners, product managers, front-end/back-end/full-stack developers - **Themes**: AI programming, full-stack Web application development, AI Agent, workflow and RAG systems --- Easy-Vibe takes you from 0 to 1 through the following stages: | Stage | Core Skills | Output | | ------------ | -------------------------------- | ----------------------------------------- | | **Stage 1** | Introduction to AI programming, product thinking, prototype design | Interactive mini-games, Web application prototypes (Beginner & PM) | | **Stage 2** | Full-stack development, AI integration, database | Complete full-stack AI application | | **Stage 3** | claude code advanced, mini-program Android development | Production-level multi-platform application | ## 🔥 News - **[2026-01-27]** Added application development tutorials for Android and iOS platforms. - **[2026-01-19]** Released a series of interactive demonstration components such as Prompt Engineering, AI Evolution History, Authentication Design, and Git Principles to greatly enhance the visual learning experience. <details> <summary>Past News</summary> - **[2026-01-16]** Refactored the project structure and officially established the "Beginner's Guide" chapter to lower the barrier to entry. - **[2026-01-14]** Completed a large-scale update of the first stage "Product Prototype Construction" documentation. - **[2026-01-13]** Completed the documentation architecture refactoring and fully supported multiple languages (i18n). - **[2026-01-01]** Released the project's core learning map (Learning Map) to clarify the learning path. </details> ### 📖 Learning Map <div align="center"> <img src="assets/readme-image1.png" alt="Learning Map" width="70%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/> </div> ### Appendix [AI Capability Dictionary: Explanation of common AI core concepts and nouns, scenarios](docs/zh-cn/appendix/ai-capability-dictionary.md) ### I. Beginner & PM - From Games to Web Application Prototypes | Chapter | Key Content | Status | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- | | [Preface: Learning Map](docs/zh-cn/stage-0/0.1-learning-map/index.md) | Overall learning path guide | ✅ | | [Beginner 1: In the AI Era, You Can Program If You Can Speak](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Initially experience the capabilities of AI programming through cases such as Snake | ✅ | | [Beginner 2: Finding Good Ideas](docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Learn to find and validate product ideas, find projects worth doing | ✅ | | [Beginner 3: Introduction to AI IDE Tools](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE and make mini-games locally | ✅ | | [Beginner 4: Building a Prototype](docs/zh-cn/stage-1/1.2-building-prototype/index.md) | From requirement analysis, AI generates a single page, and then generates a multi-page product prototype | ✅ | | [Beginner 5: Adding AI Capabilities to the Prototype](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to access common AI capabilities (text, images, video) | ✅ | | [Beginner 6: Complete Project Practice](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Simulate real scenarios, accept user feedback and iterate, complete the project | ✅ | #### Appendix: Business Thinking | Chapter | Key Content | Status | | :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [Appendix A: Product Thinking and Solution Design](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | The thinking framework to consider when making a product from scratch | ✅ | | [Appendix B: AI Industry Application Scenario Reference (B-side)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Understand the application scenarios of AI in different industries | ✅ | | [Appendix C: AI Consumer Scenario Inspiration Reference (C-side)](docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | Explore the application scenarios of AI in consumer-level products | ✅ | #### Appendix: Technical Solutions | Chapter | Key Content | Status | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [Appendix D: What to do when you encounter an error while writing code](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Common errors and troubleshooting methods in vibe coding | ✅ | | [Appendix E: Comparison of Seven AI Programming Tools](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Compare and test mainstream AI programming platforms | ✅ | | [Appendix F: Designing a Website with Design and Programming Agents](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Learn how to use AI agents to work together | ✅ | <details> <summary><strong>II. Junior and Intermediate Development Engineers</strong></summary> #### Frontend | Chapter | Key Content | Status | | :--------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- | | [Frontend Zero: Producing Assets with lovart](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Learn to generate visual assets like characters and scenes in batches with lovart, providing a foundation for UI design and frontend development | 🚧 | | [Frontend One: Getting Started with Figma and MasterGo](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Use design tools to organize information architecture and page structure, laying the groundwork for frontend implementation | 🚧 | | [Frontend Two: Building Your First Modern Application - UI Design](docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Complete a componentized interface based on design drafts, realizing the first link from design to code | 🚧 | | [Frontend Three: UI Design Specifications and Multi-Product UI Design](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Expand multi-product interfaces around a unified main visual, practicing systematic design skills | 🚧 | | [Frontend Four: Let's Build Hogwarts Portraits](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Create a frontend application with AI capabilities from 0 to 1, connecting design and development | ✅ | #### Backend and Full-Stack | Chapter | Key Content | Status | | :--------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- | | [Backend One: What is an API](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Understand HTTP interfaces and request-response models, preparing for backend integration and joint debugging | ✅ | | [Backend Two: From Database to Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Land databases and APIs on Supabase, connecting data models and frontend pages | ✅ | | [Backend Three: Using Large Models to Assist in Writing Interface Code and Interface Documentation](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Use large models to assist in generating interface and database documentation and code, achieving readable and testable backend | 🚧 | | [Backend Four: Git Workflow](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Manage code in Git workflow, perform version control and collaboration | ✅ | | [Backend Five: Zeabur Deployment](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Deploy applications to Zeabur online | ✅ | | [Backend Six: Modern CLI Development Tools](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) | Use CLI-like AI programming tools to accelerate development and debugging, forming a personal engineering workflow | ✅ | | [Backend Seven: How to Integrate Charging Systems Like Stripe](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Integrate payment systems, complete charging links and basic settlement processes | 🚧 | | [Assignment 1: Building Your First Modern Application - Full-Stack Application](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Integrate frontend, backend, and payment modules to complete a full-stack Web application that can be launched online | 🚧 | | [Assignment 2: Modern Frontend Component Library + Trae Practice](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Use modern frontend component libraries and Trae to independently complete a product that supports login, registration, and charging | 🚧 | #### AI Capability Appendix | Chapter | Key Content | Status | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [AI One: Dify Getting Started and Knowledge Base Integration](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Build tool-like products with Dify Workflow and basic RAG to prepare for subsequent application upgrades | ✅ | | [AI Two: Learn to Query AI Dictionaries and Integrate Multimodal APIs](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Learn to find suitable models and APIs, and integrate text, image, and other multimodal capabilities into products | 🚧 | </details> <details> <summary><strong>III. Senior Development Engineer</strong></summary> | Chapter | Key Content | Status | | :---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- | | [Advanced One: MCP and ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/) | Extend IDE capabilities through MCP and Skills, connecting external services into tools | 🚧 | | [Advanced Two: How to Make Coding Tools Work for a Long Time](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Design and configure long-running tasks to make Coding Tools more stable and reliable | 🚧 | | [Advanced Three: Multi-Platform Development: How to Build a WeChat Mini-Program](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Understand the WeChat mini-program ecosystem, from official templates to launching a frontend mini-program | ✅ | | [Advanced Four: Multi-Platform Development: How to Build a WeChat Mini-Program - Including Backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate databases and backend logic in the mini-program to create a complete business loop | 🚧 | | [Advanced Five: Multi-Platform Development: How to Build an Android Application](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Use tools like Expo to complete Web/native integrated Android application development | ✅ | | [Advanced Six: Multi-Platform Development: How to Build an iOS Application](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Use tools like Expo to complete Web/native integrated iOS application development | ✅ | | [Advanced Seven: How to Build Your Own Personal Website and Academic Blog](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | From selection, construction to deployment, build a long-term online homepage to showcase personal projects and academic achievements | 🚧 | #### AI Capability Appendix | Chapter | Key Content | Status | | :------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--- | | [Advanced AI One: What is RAG and How Does It Work](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) | Systematically understand RAG principles and common architectures, providing a knowledge retrieval foundation for complex applications | ✅ | | [Advanced AI Two: Intermediate and Advanced RAG and Workflow Orchestration: Taking LangGraph as an Example](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Use tools like LangGraph to design multi-step workflows and intermediate and advanced RAG systems | 🚧 | </details> ## 🛠️ How to Learn - Based on your personal abilities, selectively read and practice relevant chapters. If you have any questions, feel free to raise an issue. ## 💻 Locally Launch this Courseware ### Modern Solution In the AI IDE dialog box (vscode, cursor, trae, etc.), enter the following prompt to start this courseware: ``` Please help me run the local service for this project ``` ### Old Solution 1. npm install 2. npm run dev 3. Open the browser and visit `http://localhost:3000` to view it. ## 🤝 Contribute - If you find any problems or think there are any areas where this project can be improved, you can submit an Issue for feedback. If no one replies after submitting, you can contact the students of the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for feedback and follow-up~ - If you want to contribute to this project, you can submit a Pull Request. If no one replies after submitting, you can contact the students of the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) for feedback and follow-up~ - If you are very interested in Datawhale and want to initiate a new project, please follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md) to operate~ ## 🙏 Thanks to Every Contributor - [散步-Project Leader](https://github.com/sanbuphy) (Datawhale member) - 方可-Instructor (Datawhale member, Tsinghua University) - [Yerim Kang](https://github.com/yerim25) (Practical Project Section - Tsinghua University) - 赵芷霖 (Practical Project Section - Tsinghua University) - [李亦萱](https://yixuan20.github.io/) (Page Art Design - Tsinghua University) - 刘思怡 (Practical Project Section - Tsinghua University) - AI Vibe Coding 101 internal test group for complete advice and experience ### Special Thanks - Thanks to [@Sm1les](https://github.com/Sm1les) for the help and support of this project - Thanks to all the developers and friends who contributed to this project and supported it with likes ❤️ <div align="center"> <p> <a href="https://github.com/datawhalechina/easy-vibe/stargazers"><img src="https://reporoster.com/stars/datawhalechina/easy-vibe" alt="Stargazers"/></a> &nbsp;&nbsp; <a href="https://github.com/datawhalechina/easy-vibe/network/members"><img src="https://reporoster.com/forks/datawhalechina/easy-vibe" alt="Forkers"/></a> </p> <a href="https://www.star-history.com/#datawhalechina/easy-vibe&type=timeline&legend=top-left"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&theme=dark&legend=top-left" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=timeline&legend=top-left" /> </picture> </a> </div> <div align=center style="margin-top: 30px;"> <a href="https://github.com/datawhalechina/easy-vibe/graphs/contributors"> <img src="https://contrib.rocks/image?repo=datawhalechina/easy-vibe" /> </a> </div> ## <span id="contact">📧 Contact Us</span> <div align=center> <p>If you have any questions, suggestions, complaints, or want to communicate with us, please scan the QR code below</p> <img src="assets/wechat.png" width="280"> <p>Scan the QR code below to follow the official account: Datawhale</p> <img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180"> </div> ## 📄 LICENSE <div align="center"> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> <img alt="Creative Commons License" style="border-width:0" src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey" /> </a> <br /> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 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)