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.
237 lines
22 KiB
Markdown
237 lines
22 KiB
Markdown
<!-- trigger vercel build -->
|
|
<div align="center">
|
|
|
|
<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
|
|
|
|
### _Zero Foundation, Project-Based Learning, Build Your First AI Product_
|
|
|
|
<p align="center">
|
|
📌 <a href="https://datawhalechina.github.io/easy-vibe/">Start Reading Online</a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://datawhalechina.github.io/easy-vibe/">Online Reading</a> ·
|
|
<a href="#-content-navigation">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="./README_CHT.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
|
|
<a href="./README_EN.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
|
|
<a href="./README_JA.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
|
|
<a href="./README_ES.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
|
|
<a href="./README_FR.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
|
|
<a href="./README_KL.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
|
|
<a href="./README_KO.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
|
|
<a href="./README_AR.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
|
|
<a href="./README_TR.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
|
|
<a href="./README_VI.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
|
|
<a href="./README_DE.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
|
|
<a href="./README_BN.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
## 🚀 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
|
|
|
|
<div align="center">
|
|
<img src="assets/readme-image1.png" alt="Learning Map" width="100%" style="border-radius: 10px; box-shadow: 0 8px 20px rgba(45,55,72,0.3); margin: 15px 0;"/>
|
|
</div>
|
|
|
|
### Appendix
|
|
|
|
[AI Capability Dictionary: Common AI Core Concepts, Terminology, and Scenario Explanations](docs/zh-cn/appendix/ai-capability-dictionary.md)
|
|
|
|
### Stage 1: Novice & PM - From Games to Web Prototypes
|
|
|
|
| Chapter | Key Content | Status |
|
|
| :---------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | :----- |
|
|
| [Preface: Learning Map](docs/en-us/stage-0/) | Overall learning path overview | 🚧 |
|
|
| [Primary 1: Programming by Speaking in the AI Era](docs/en-us/stage-0/) | Experience AI programming capabilities through Snake and other cases | 🚧 |
|
|
| [Primary 2: Understanding AI IDE Tools](docs/en-us/stage-0/) | Learn to use IDE, create small games locally | 🚧 |
|
|
| [Primary 3: Building Prototypes Hands-On](docs/en-us/stage-0/) | From requirement analysis, AI-generated single page to multi-page product prototype | 🚧 |
|
|
| [Primary 4: Adding AI Capabilities to Prototypes](docs/en-us/stage-0/) | Learn to integrate common AI capabilities (text, image, video) | 🚧 |
|
|
| [Primary 5: Complete Project Practice](docs/en-us/stage-0/) | Simulate real scenarios, accept user feedback iterations, complete projects | 🚧 |
|
|
| [Final Assignment: Build a Complete Web Application Prototype and Present](docs/en-us/stage-0/) | Fully implement application, showcase application effects | 🚧 |
|
|
|
|
#### Appendix: Business Thinking
|
|
|
|
| Chapter | Key Content | Status |
|
|
| :---------------------------------------------------------------------- | :--------------------------------------------------------------------- | :----- |
|
|
| [Appendix A: Product Thinking and Solution Design](docs/en-us/stage-1/appendix-a-product-thinking/) | Thinking framework needed to build products from scratch | 🚧 |
|
|
| [Appendix B: AI Industry Application Scenarios (B2B)](docs/en-us/stage-1/appendix-industry-scenarios/) | Understand AI applications in different industries | 🚧 |
|
|
| [Appendix C: AI Consumer Scenario Inspiration (B2C)](docs/en-us/stage-1/appendix-c-consumer-scenarios/) | Explore AI applications in consumer products | 🚧 |
|
|
|
|
#### Appendix: Technical Solutions
|
|
|
|
| Chapter | Key Content | Status |
|
|
| :---------------------------------------------------------------------- | :--------------------------------------------------------------------- | :----- |
|
|
| [Appendix D: What to Do When Encountering Errors](docs/en-us/stage-1/appendix-b-common-errors/) | Common errors in vibe coding and troubleshooting methods | 🚧 |
|
|
| [Appendix E: Comparison of Seven AI Programming Tools](docs/en-us/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Compare and test mainstream AI programming platforms | 🚧 |
|
|
| [Appendix F: Designing Websites with Design and Programming Agents](docs/en-us/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Learn how to use AI agents collaboratively | 🚧 |
|
|
|
|
### Stage 2: Intermediate Developer
|
|
|
|
#### Frontend Part
|
|
|
|
| Chapter | Key Content | Status |
|
|
| :----------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :----- |
|
|
| [Frontend 0: Using Lovart to Generate Assets](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Learn to use Lovart to batch generate characters, scenes and other visual assets | 🚧 |
|
|
| [Frontend 1: Figma & MasterGo Introduction](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Use design tools to organize information architecture and page structure | 🚧 |
|
|
| [Frontend 2: Building Your First Modern Application - UI Design](docs/zh-cn/stage-2/frontend/2.2-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](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Expand multi-product interfaces around unified visual design, practice systematic design capabilities | 🚧 |
|
|
| [Frontend 4: Building Hogwarts Portraits Together](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | 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](docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | Understand HTTP interfaces and request-response models | ✅ |
|
|
| [Backend 2: From Database to Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implement databases and APIs on Supabase, connect data models with frontend pages | ✅ |
|
|
| [Backend 3: AI-Assisted Interface Code and Documentation](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Use LLM to help generate interface and database documentation and code | 🚧 |
|
|
| [Backend 4: 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, version control and collaboration | ✅ |
|
|
| [Backend 5: 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 for production | ✅ |
|
|
| [Backend 6: 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-based AI programming tools to accelerate development and debugging | ✅ |
|
|
| [Backend 7: Integrating Payment Systems like Stripe](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Integrate payment systems, complete payment links and basic settlement processes | 🚧 |
|
|
| [Assignment 1: Build Your First Modern Application - Full Stack](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Integrate frontend, backend and payment modules, complete production-ready full stack web application | 🚧 |
|
|
| [Assignment 2: Modern Frontend Component Library + Trae Practice](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | 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](docs/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md) | Use Dify Workflow and basic RAG to build utility products | ✅ |
|
|
| [AI 2: Learn to Query AI Dictionary 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, integrate text, image and other multimodal capabilities | 🚧 |
|
|
|
|
### Stage 3: Advanced Developer
|
|
|
|
| Chapter | Key Content | Status |
|
|
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----- |
|
|
| [Advanced 1: MCP and ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/) | Extend IDE capabilities through MCP and Skills, integrate external services as tools | 🚧 |
|
|
| [Advanced 2: Making Coding Tools Work for Long Periods](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) | Design and configure long-running tasks, make Coding Tools more stable and reliable | 🚧 |
|
|
| [Advanced 3: Multi-Platform Development: Building WeChat Mini Programs](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | 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](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate databases and backend logic in mini programs, complete business loops | 🚧 |
|
|
| [Advanced 5: Multi-Platform Development: Building Android Apps](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Use Expo and other tools to complete Web/native integrated Android application development | 🚧 |
|
|
| [Advanced 6: Multi-Platform Development: Building iOS Apps](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Use Expo and other tools to complete Web/native integrated iOS application development | 🚧 |
|
|
| [Advanced 7: Building Your Personal Website and Academic Blog](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-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](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 | ✅ |
|
|
| [Advanced AI 2: Intermediate/Advanced RAG and Workflow Orchestration with LangGraph](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) 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](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
|
|
|
|
## 🙏 Thanks to Every Contributor
|
|
|
|
- [Sanbu - Project Lead](https://github.com/sanbuphy) (Datawhale Member)
|
|
- Fang Ke - Advisor (Datawhale Member, Tsinghua University)
|
|
- [Yerim Kang](https://github.com/yerim25) (Practice Project Section - Tsinghua University)
|
|
- Zhao Zhilin (Practice Project Section - Tsinghua University)
|
|
- [Li Yixuan](https://yixuan20.github.io/) (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](https://github.com/Sm1les) for their help and support with this project
|
|
- Thanks to all developers who contributed to this project ❤️
|
|
|
|
<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 questions, suggestions, or want to communicate together, 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)
|