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

431 lines
30 KiB
Markdown
Raw Normal View History

<!-- 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
2026-01-13 20:09:45 +08:00
<p align="center">
📌 <a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> · ✨ <a href="https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/">Interactive Tutorial</a>
2026-01-13 20:09:45 +08:00
</p>
2026-01-13 20:09:45 +08:00
<p align="center">
<a href="https://datawhalechina.github.io/easy-vibe/welcome.html">Read Online</a> ·
<a href="#-navigation">Learning Map</a> ·
2026-01-13 20:09:45 +08:00
<a href="#contact">Community</a>
</p>
2026-01-13 20:09:45 +08:00
<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="../zh-CN/README.md"><img alt="简体中文" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
<a href="../zh-TW/README.md"><img alt="繁體中文" src="https://img.shields.io/badge/繁體中文-d9d9d9"></a>
<a href="../en-US/README.md"><img alt="English" src="https://img.shields.io/badge/English-d9d9d9"></a>
<a href="../ja-JP/README.md"><img alt="日本語" src="https://img.shields.io/badge/日本語-d9d9d9"></a>
<a href="../es-ES/README.md"><img alt="Español" src="https://img.shields.io/badge/Español-d9d9d9"></a>
<a href="../fr-FR/README.md"><img alt="Français" src="https://img.shields.io/badge/Français-d9d9d9"></a>
<a href="../tlh/README.md"><img alt="Klingon" src="https://img.shields.io/badge/Klingon-d9d9d9"></a>
<a href="../ko-KR/README.md"><img alt="한국어" src="https://img.shields.io/badge/한국어-d9d9d9"></a>
<a href="../ar-SA/README.md"><img alt="العربية" src="https://img.shields.io/badge/العربية-d9d9d9"></a>
<a href="../tr-TR/README.md"><img alt="Türkçe" src="https://img.shields.io/badge/Türkçe-d9d9d9"></a>
<a href="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
<a href="../de-DE/README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
<a href="../bn-BD/README.md"><img alt="বাংলা" src="https://img.shields.io/badge/বাংলা-d9d9d9"></a>
2026-01-13 20:09:45 +08:00
</p>
</div>
<table align="center">
<tr>
<td width="50%" valign="top" align="center">
<img src="../../assets/gif-header.png" width="100%">
<br>
<strong>Exclusive Learning Map for Beginners</strong>
<br>
<sub>Zero-foundation guidance, clear path planning, say goodbye to "learn and forget"</sub>
</td>
<td width="50%" valign="top" align="center">
<img src="../../assets/gif-tutorial.png" width="100%">
<br>
<strong>Step-by-Step Graphical Tutorial</strong>
<br>
<sub>Nanny-level detailed explanations, like having a private tutor nearby, just follow along</sub>
</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>
<sub>Virtual mouse auto-navigation, guiding you through core IDE usage quickly</sub>
</td>
<td width="50%" valign="top" align="center">
<img src="../../assets/gif-diffusion.gif" width="100%">
<br>
<strong>Visible AI Principles</strong>
<br>
<sub>Algorithm principles animated, see at a glance how AI "draws" images</sub>
</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>
<sub>Exclusive interactive components, click to see the RAG data flow clearly</sub>
</td>
<td width="50%" valign="top" align="center">
<img src="../../assets/git-terminal.gif" width="100%">
<br>
<strong>Visualized Terminal Principles</strong>
<br>
<sub>Command-line operations visualized, intuitively showcasing background logic and principles</sub>
</td>
</tr>
</table>
<div align="center">
<h3>⭐ Welcome to <a href="https://github.com/datawhalechina/easy-vibe" style="color: #d0cd16ff;">Star here</a> to accelerate updates ❤️</h3>
</div>
In the AI era, those who turn ideas into products are often not the ones with the strongest technical skills, but the ones who take the first step.
Many people, even with AI assistants, are still discouraged by "not understanding the code" or "not knowing how to configure the environment." **Easy-Vibe was born for this.** Assuming everyone starts from zero foundation, we take you by the hand from writing your first line of code to understanding front-end and back-end logic, and finally launching your 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:
> Choose your starting point based on your background:
> - **Zero Foundation / Product Manager**: Start from Stage 1 to build programming mindset and master AI IDE for rapid prototyping
> - **Developer**: Start from Stage 2 to dive into full-stack development and AI integration
> - **Advanced Developer**: Jump to Stage 3 to explore Claude Code and multi-platform development
| Stage | Core Skills | Output |
| :--- | :--- | :--- |
| **Stage 1** | Learning Map, AI Programming Intro, AI IDE, Product Thinking, Prototype Design, AI Capability Integration | Interactive Mini-games, Complete Product Prototypes |
| **Stage 2** | Full-stack Development, Databases, AI Integration, Deployment & Operations | Production-ready Full-stack AI Applications |
| **Stage 3** | Advanced Claude Code, Multi-platform Development | Production-grade Multi-platform Applications |
| **Appendix** | Computer Fundamentals, AI Intro, 9 Knowledge Domains | 80+ Interactive Topics |
## 🔥 News
- **[2026-03-02]** 🦞 **OpenClaw & AI Agent Friendly Support**: Added `llms.txt` AI navigation file, enabling OpenClaw, Claude, Cursor, Trae and other AI Agents to quickly understand the repository structure and accurately locate tutorial content. Hope every 🦞 enjoys learning!
- **[2026-03-01]** [Advanced Development Section](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) comprehensively upgraded: Added seven deep guides for Claude Code (MCP, Skills, Agent Teams, etc.) and eight cross-platform development tutorials (PWA, Electron, NFT, VS Code Extensions, Qt Industrial Applications, etc.).
- **[2026-02-25]** Updated [Appendix Knowledge Base](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/), covering 9 knowledge domains and 80+ interactive topics.
- **[2026-01-27]** Added Android and iOS platform application development tutorials.
- **[2026-01-19]** Released interactive demonstration components for Prompt Engineering, AI Evolution, Authentication Design, Git Principles, etc., significantly enhancing the visual learning experience.
<details>
<summary>Past News</summary>
- **[2026-01-16]** Restructured project, formally established the "Beginner Entry" chapter to lower the entry barrier.
- **[2026-01-14]** Completed a major update of the Stage 1 "Product Prototype Construction" documentation.
- **[2026-01-13]** Completed document architecture refactoring, fully supporting multi-language (i18n).
- **[2026-01-01]** Released the project's core Learning Map, clarifying the learning path.
</details>
### 📖 Navigation
<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 Knowledge Base
> Covering **9 knowledge domains** and **80+ interactive topics**, using animations and visual components to help you intuitively understand core concepts from computer fundamentals to the AI frontier.
>
> 👉 [View Full Appendix](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) · [AI Capability Dictionary](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
<table>
<tr>
<td valign="top" width="33%">
<strong>💻 Computer Fundamentals</strong><br><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md">From Transistor to CPU</a><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md">Operating Systems</a><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md">Data Encoding, Storage & Transmission</a><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md">Networks: How Two Computers Talk</a><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md">Data Structures</a><br>
• <a href="../../docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md">Intro to Algorithmic Thinking</a>
</td>
<td valign="top" width="33%">
<strong>🔧 Development Tools</strong><br><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/git-version-control.md">Git: The Time Machine of Code</a><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/command-line-shell.md">Command Line & Shell Scripting</a><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/package-managers.md">Package Managers</a><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/debugging-art/">The Art of Debugging</a><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/regex.md">Regular Expressions</a><br>
• <a href="../../docs/zh-cn/appendix/2-development-tools/environment-path.md">Environment Variables & PATH</a>
</td>
<td valign="top" width="33%">
<strong>🌐 Browser & Front-end</strong><br><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive.md">Deep Dive into JavaScript</a><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering.md">Browser Rendering Pipeline</a><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks.md">Front-end Framework Comparison</a><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/graphics-animation.md">Graphics & Animation</a><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/web-performance.md">Web Performance Measurement & Optimization</a><br>
• <a href="../../docs/zh-cn/appendix/3-browser-and-frontend/frontend-engineering.md">The Big Picture of Front-end Engineering</a>
</td>
</tr>
<tr>
<td valign="top" width="33%">
<strong>🖥️ Server & Back-end</strong><br><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/http-protocol.md">HTTP Protocol</a><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/api-design.md">API Design Philosophy</a><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/auth-authorization.md">Authentication & Authorization</a><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/concurrency-async.md">Concurrency, Async & Multithreading</a><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/message-queues.md">Message Queues & Event-Driven</a><br>
• <a href="../../docs/zh-cn/appendix/4-server-and-backend/backend-layered-architecture.md">Back-end Layered Architecture</a>
</td>
<td valign="top" width="33%">
<strong>📊 Data</strong><br><br>
• <a href="../../docs/zh-cn/appendix/5-data/sql.md">SQL</a><br>
• <a href="../../docs/zh-cn/appendix/5-data/database-fundamentals.md">Database Fundamentals</a><br>
• <a href="../../docs/zh-cn/appendix/5-data/data-tracking.md">Tracking & User Behavior Collection</a><br>
• <a href="../../docs/zh-cn/appendix/5-data/data-analysis.md">Data Analysis Basics</a><br>
• <a href="../../docs/zh-cn/appendix/5-data/ab-testing.md">A/B Testing & Experiment Driven</a><br>
• <a href="../../docs/zh-cn/appendix/5-data/data-visualization.md">Data Visualization & Dashboards</a>
</td>
<td valign="top" width="33%">
<strong>🏗️ Architecture & System Design</strong><br><br>
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices.md">Evolution from Monolith to Microservices</a><br>
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/distributed-systems.md">Challenges of Distributed Systems</a><br>
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/high-availability.md">High Availability & Disaster Recovery</a><br>
• <a href="../../docs/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology.md">System Design Methodology</a>
</td>
</tr>
<tr>
<td valign="top" width="33%">
<strong>☁️ Infrastructure & DevOps</strong><br><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/docker-containers.md">Docker Containerization</a><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/kubernetes.md">Kubernetes Orchestration</a><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/ci-cd.md">CI / CD Automation</a><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md">Domains, DNS & HTTPS</a><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md">Monitoring, Logging & Alerting</a><br>
• <a href="../../docs/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code.md">Infrastructure as Code</a>
</td>
<td valign="top" width="33%">
<strong>🤖 Artificial Intelligence</strong><br><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/llm-principles.md">How LLMs Work</a><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/transformer-attention.md">Transformer & Attention Mechanism</a><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/rag.md">RAG Architecture</a><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/ai-agents.md">AI Agents & Tool Calling</a><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/prompt-engineering.md">Prompt Engineering</a><br>
• <a href="../../docs/zh-cn/appendix/8-artificial-intelligence/image-generation.md">Image Generation Principles</a>
</td>
<td valign="top" width="33%">
<strong>🎯 Engineering Excellence</strong><br><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring.md">Code Quality & Refactoring</a><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/testing-strategies.md">Testing Strategies</a><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/design-patterns.md">Design Patterns</a><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/security-thinking.md">Security Thinking & Defense Basics</a><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/technical-writing.md">Technical Writing</a><br>
• <a href="../../docs/zh-cn/appendix/9-engineering-excellence/open-source-collaboration.md">Open Source Collaboration</a>
</td>
</tr>
</table>
### I. Zero Foundation Entry
| Chapter | Key Content | Status |
| :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- |
| [Preface: Learning Map](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | Overall learning path navigation | ✅ |
| [Level 1: AI Era, Speaking is Programming](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Experience AI programming through cases like Snake | ✅ |
| [Level 2: Finding Great Ideas](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Learn to find and validate product ideas | ✅ |
| [Level 3: Intro to AI IDE Tools](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | Learn to use IDE, make games locally | ✅ |
| [Level 4: Building Prototypes Hands-on](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | From requirements to single and multi-page prototypes | ✅ |
| [Level 5: Adding AI Power to Prototypes](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | Learn to integrate AI (text, image, video) | ✅ |
| [Level 6: Full Project Practice](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Simulate real scenarios, iterate with feedback | ✅ |
#### Appendix: Business Thinking
| Chapter | Key Content | Status |
| :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
| [Appendix A: Product Thinking & Solution Design](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Thinking frameworks for building products | ✅ |
| [Appendix B: AI Industry Scenarios (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | AI applications in different industries | ✅ |
| [Appendix C: AI Consumer Scenarios (B2C)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | AI application scenarios in consumer products | ✅ |
#### Appendix: Technical Solutions
| Chapter | Key Content | Status |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | :--- |
| [Appendix D: Handling Errors](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Common errors and troubleshooting in vibe coding | ✅ |
| [Appendix E: Comparison of 7 AI Programming Tools](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Direct comparison of mainstream platforms | ✅ |
| [Appendix F: Designing Websites with Design & Programming Agents](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Multi-agent collaboration for web design | ✅ |
<details>
<summary><strong>II. Intermediate Developer</strong></summary>
#### Front-end
| Chapter | Key Content | Status |
| :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- |
| [Front-end 0: Assets with Lovart](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Batch generate visual assets like characters/scenes | 🚧 |
| [Front-end 1: Figma & MasterGo Intro](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Organize info architecture and page structure | 🚧 |
| [Front-end 2: Building First Modern App - UI Design](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Design-to-code workflow with components | 🚧 |
| [Front-end 3: UI Design Specs & Multi-product UI](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Systematic design across multiple products | 🚧 |
| [Front-end 4: Hogwarts Portraits Together](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Build an AI-powered front-end app from 0 to 1 | ✅ |
#### Back-end & Full-stack
| Chapter | Key Content | Status |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
| [Back-end 1: What is an API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP interfaces and request-response models | ✅ |
| [Back-end 2: DB to Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | Implement DB and API on Supabase | ✅ |
| [Back-end 3: AI-Assisted API Code & Docs](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Generate API/DB docs and code with LLM | 🚧 |
| [Back-end 4: Git Workflow](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Version control and collaboration in Git | ✅ |
| [Back-end 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 | ✅ |
| [Back-end 6: Modern CLI Dev 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) | Accelerate dev with CLI-based AI tools | ✅ |
| [Back-end 7: Integrating Payment Systems like Stripe](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Integrate payment and basic settlement flow | 🚧 |
| [Project 1: First Modern Application - Full-stack App](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Complete localized, production-ready Full-stack Web App | 🚧 |
| [Project 2: Modern UI Library + Trae Practice](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Independent product with auth and payment | 🚧 |
#### AI Capability Appendix
| Chapter | Key Content | Status |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
| [AI 1: Dify Intro & Knowledge Base](../../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 utility products with Dify Workflow & RAG | ✅ |
| [AI 2: AI Dictionary & Multimodal APIs](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Research models/APIs and integrate multimodal power | 🚧 |
</details>
<details>
<summary><strong>III. Advanced Developer</strong></summary>
#### Claude Code Core Skills
| Chapter | Key Content | Status |
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
| [Claude Code Quick Start](../../docs/zh-cn/stage-3/core-skills/basics/) | Installation, basic operations, practical tips and common commands | ✅ |
| [Claude Code MCP Complete Guide](../../docs/zh-cn/stage-3/core-skills/mcp/) | Connect Claude Code to GitHub, databases, APIs via MCP | ✅ |
| [Claude Code Skills Complete Guide](../../docs/zh-cn/stage-3/core-skills/skills/) | Package professional knowledge into reusable skill packs | ✅ |
| [Claude Code Workflow Best Practices](../../docs/zh-cn/stage-3/core-skills/workflow/) | Best practices for daily development, refactoring, code review | ✅ |
| [Claude Agent Teams Complete Guide](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | Multi-AI instance collaboration like a real dev team | ✅ |
| [Claude Code Superpowers Engineering Development](../../docs/zh-cn/stage-3/core-skills/superpowers/) | Write engineering-grade code following TDD and best practices | ✅ |
| [How to Make Claude Code Work for Long Periods](../../docs/zh-cn/stage-3/core-skills/long-running-tasks/) | Design long-running tasks for continuous work | ✅ |
#### Multi-platform Development
| Chapter | Key Content | Status |
| :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- |
| [How to Build WeChat Mini Program](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | WeChat mini program ecosystem, from template to launch | ✅ |
| [How to Build WeChat Mini Program with Back-end](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | Integrate database and back-end logic in mini programs | ✅ |
| [Android App Development](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Web/Native unified Android dev with Expo | ✅ |
| [iOS App Development](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Web/Native unified iOS dev with Expo | ✅ |
| [PWA Development](../../docs/zh-cn/stage-3/cross-platform/3.7-pwa/) | Build Progressive Web Apps with offline support | 🚧 |
| [Electron Desktop App Development](../../docs/zh-cn/stage-3/cross-platform/3.8-electron/) | Build cross-platform desktop applications | 🚧 |
| [VS Code Extension Development](../../docs/zh-cn/stage-3/cross-platform/3.9-vscode-extension/) | Develop VS Code extensions and plugins | 🚧 |
| [Qt Industrial Application Development](../../docs/zh-cn/stage-3/cross-platform/3.10-qt-industrial/) | Build industrial-grade desktop applications with Qt | 🚧 |
</details>
## 🛠️ How to Learn
- Choose chapters to read and practice based on your skill level. Feel free to open an issue for questions.
## 💻 Local Setup
### Modern Approach
In an AI IDE (VS Code, Cursor, Trae, etc.), use the following prompt:
```
Please help me run the local service for this project.
```
### Traditional Approach
1. npm install
2. npm run dev
3. Open `http://localhost:3000` in your browser.
## 🤝 Contributing
- If you find issues or have suggestions, please open an Issue. If you don't get a response, contact the [Nanny Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md).
- To contribute, please submit a Pull Request.
- If you want to start a new project with Datawhale, follow the [Datawhale Open Source Project Guide](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md).
## 🙏 Acknowledgements
- [Sanbu - Project Lead](https://github.com/sanbuphy) (Datawhale Member)
- Fang Ke - Advisor (Datawhale Member, Tsinghua University)
- [Yerim Kang](https://github.com/yerim25) (Practice Projects - Tsinghua University)
- Zhao Zhilin (Practice Projects - Tsinghua University)
- [Li Yixuan](https://yixuan20.github.io/) (Visual Design - Tsinghua University)
- Liu Siyi (Practice Projects - Tsinghua University)
- All Beta testers from the AI Vibe Coding 101 group for their feedback.
### Special Thanks
- Thanks to [@Sm1les](https://github.com/Sm1les) for support and help.
- Thanks to all contributors and everyone who starred this project ❤️
<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>For questions, suggestions, or collaboration, please scan the QR code below:</p>
<img src="../../assets/wechat.png" width="280">
<p>Follow Datawhale on WeChat:</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="CC-BY-NC-SA 4.0"
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
[![Star History Chart](https://api.star-history.com/svg?repos=datawhalechina/easy-vibe&type=date&legend=top-left)](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)