sanbuphy
7d0e798672
Add comprehensive guide for AI applications in consumer scenarios with 16 categories and 80+ inspiration ideas. Focus on creating emotional connections and atmosphere rather than just functionality. Includes interactive selection tool to help users find relevant scenarios based on desired vibe and current feeling. Each scenario provides detailed atmosphere creation tips and psychological cues. Also covers core design principles for C-end products, shifting from functional thinking to emotional experience design.
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe: Learn Vibe Coding from 0 to 1
Zero Foundation, Project-Based Learning, Build Your First AI Product
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 1: From Games to Web Prototypes, mastering AI programming basics and product thinking (Novice & PM)
- 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 1: Novice & PM - From Games to Web Prototypes
| 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 | 🚧 |
| 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: Business Thinking
| Chapter | Key Content | Status |
|---|---|---|
| Appendix A: Product Thinking and Solution Design | Thinking framework needed to build products from scratch | 🚧 |
| Appendix B: AI Industry Application Scenarios (B2B) | Understand AI applications in different industries | 🚧 |
| Appendix C: AI Consumer Scenario Inspiration (B2C) | Explore AI applications in consumer products | 🚧 |
Appendix: Technical Solutions
| Chapter | Key Content | Status |
|---|---|---|
| Appendix D: What to Do When Encountering Errors | Common errors in vibe coding and troubleshooting methods | 🚧 |
| Appendix E: Comparison of Seven AI Programming Tools | Compare and test mainstream AI programming platforms | 🚧 |
| Appendix F: Designing Websites with Design and Programming Agents | Learn how to use AI agents collaboratively | 🚧 |
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
- npm install
- npm run dev
- Open your browser and visit
http://localhost:3000to 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 .