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

# Easy-Vibe : Lerne Vibe Coding von 0 auf 1

📌 Online lesen (Read Online) · ✨ Interaktives Tutorial

Online lesen · Lernkarte · Community

Exklusive Lernkarte für Anfänger
_{Anleitung ohne Vorkenntnisse, klare Pfadplanung, Schluss mit "Lernen und Vergessen"}

Schritt-für-Schritt-Grafik-Tutorial
_{Detaillierte Erklärungen, als hätte man einen Privatlehrer an der Seite}

Im Zeitalter der KI sind diejenigen, die Ideen in Produkte verwandeln, oft nicht die technisch stärksten, sondern diejenigen, die den ersten Schritt tun. **Easy-Vibe wurde dafür geschaffen.** Wir nehmen dich an die Hand, vom Schreiben deiner ersten Zeile Code bis zum Verständnis der Front-End- und Back-End-Logik und schließlich zum Start deines Produkts. - **Zielgruppe**: Anfänger, Produktmanager, Front-End / Back-End / Full-Stack Entwickler - **Themen**: KI-Programmierung, Full-Stack-Webentwicklung, KI-Agenten, Workflows und RAG-Systeme --- Easy-Vibe führt dich durch folgende Phasen von 0 auf 1: > Wähle deinen Startpunkt entsprechend deinem Niveau: > - **Anfänger / Product Manager**: Beginne mit Stage 1, um Programmierdenken zu entwickeln und AI IDE für schnelles Prototyping zu beherrschen > - **Entwickler**: Beginne mit Stage 2, um tief in Full-Stack-Entwicklung und KI-Integration einzutauchen > - **Fortgeschrittene Entwickler**: Gehe direkt zu Stage 3, um Claude Code und Multi-Plattform-Entwicklung zu erkunden | Phase | Kernkompetenzen | Ergebnis | | :--- | :--- | :--- | | **Stage 1** | Lernkarte, KI-Programmierung Einstieg, AI IDE, Produktdenken, Prototyping, KI-Fähigkeiten Integration | Interaktive Minispiele, vollständige Produktprototypen | | **Stage 2** | Full-Stack-Entwicklung, Datenbanken, KI-Integration, Deployment & Operations | Produktionsreife Full-Stack-KI-Anwendungen | | **Stage 3** | Fortgeschrittener Claude Code, Multi-Plattform-Entwicklung | Multi-Plattform-Anwendungen auf Produktionsniveau | | **Anhang** | Computer-Grundlagen, KI-Einführung, 9 Wissensbereiche | 80+ interaktive Themen | ## 🔥 Neuigkeiten - **[2026-03-02]** 🦞 **OpenClaw & AI Agent Unterstützung**: `llms.txt` KI-Navigationsdatei hinzugefügt, die OpenClaw, Claude, Cursor, Trae und anderen AI Agents ermöglicht, die Repository-Struktur schnell zu verstehen und Tutorial-Inhalte präzise zu lokalisieren. Wir wünschen jedem 🦞 viel Lernspaß! - **[2026-03-01]** [Abschnitt Fortgeschrittene Entwicklung](https://datawhalechina.github.io/easy-vibe/zh-cn/stage-3/) umfassend aktualisiert: Sieben detaillierte Claude Code Guides (MCP, Skills, Agent Teams, etc.) und acht Multi-Plattform-Entwicklungstutorials (PWA, Electron, NFT, VS Code Erweiterungen, Qt Industrieanwendungen, etc.) hinzugefügt. - **[2026-02-25]** [Anhang Wissensdatenbank](https://datawhalechina.github.io/easy-vibe/zh-cn/appendix/) aktualisiert, umfasst 9 Wissensbereiche und 80+ interaktive Themen.

Frühere Neuigkeiten

- **[2026-01-16]** Projekt-Restrukturierung, formelle Einrichtung des Kapitels "Einführung für Anfänger", Barrieren reduziert. - **[2026-01-14]** Vollständiges Update der Stage 1 Dokumentation "Produktprototypen erstellen". - **[2026-01-13]** Vollständiger Dokumentationsarchitektur-Aufbau, vollständige mehrsprachige Unterstützung (i18n). - **[2026-01-01]** Start der Haupt-Lernkarte des Projekts. ### 📖 Navigation

Learning Map

### 📚 Anhang Wissensdatenbank

💻 Computer-Grundlagen

• Vom Transistor zum CPU
• Betriebssysteme
• Datenkodierung, Speicherung und Übertragung
• Netzwerke: Wie zwei Computer sprechen
• Datenstrukturen
• Einführung in algorithmisches Denken

🔧 Entwicklungswerkzeuge

• Git: Die Zeitmaschine des Codes
• Befehlszeile und Shell-Skripte
• IDEs und VS Code
• Browser-Entwicklerwerkzeuge
• Paketmanager

💡 Web-Programmierung

• HTML & CSS
• JavaScript
• DOM-Manipulation
• Fetch API und asynchrone Programmierung
• Frameworks (Vue/React)

### I. Einstieg ohne Vorkenntnisse | Kapitel | Hauptinhalt | Status | | :----------------------------------------------------------------------------------------------- | :------------------------------------------------ | :--- | | [Vorwort: Lernkarte](../../docs/zh-cn/stage-0/0.1-learning-map/index.md) | Navigation durch den Gesamt-Lernpfad | ✅ | | [Stufe 1: KI-Ära, Sprechen ist Programmieren](../../docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | KI-Programmierung durch Beispiele erfahren | ✅ | | [Stufe 2: Großartige Ideen finden](../../docs/zh-cn/stage-1/1.0-finding-great-idea/index.md) | Produktideen finden und validieren lernen | ✅ | | [Stufe 3: Einführung in AI IDE Tools](../../docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md) | IDE verwenden, Spiele lokal erstellen | ✅ | | [Stufe 4: Prototypen praktisch bauen](../../docs/zh-cn/stage-1/1.2-building-prototype/index.md) | Von Anforderungsanalyse zu Prototypen | ✅ | | [Stufe 5: KI-Fähigkeiten zu Prototypen hinzufügen](../../docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md) | KI integrieren (Text, Bild, Video) | ✅ | | [Stufe 6: Vollständige Projektpraxis](../../docs/zh-cn/stage-1/1.4-complete-project-practice/index.md) | Echte Szenarien simulieren, mit Feedback iterieren | ✅ | #### Anhang: Geschäftsdenken | Kapitel | Hauptinhalt | Status | | :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [Anhang A: Produktdenken und Lösungsdesign](../../docs/zh-cn/stage-1/appendix-a-product-thinking/index.md) | Denkrahmen für Produktentwicklung | ✅ | | [Anhang B: KI-Anwendungsszenarien (B2B)](../../docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | KI-Anwendungen in verschiedenen Branchen | ✅ | | [Anhang C: KI-Konsumentenszenarien Inspiration (B2C)](../../docs/zh-cn/stage-1/appendix-c-consumer-scenarios/index.md) | KI-Anwendungen in Konsumentenprodukten erkunden | ✅ | #### Anhang: Technische Lösungen | Kapitel | Hauptinhalt | Status | | :----------------------------------------------------------------------------------------- | :----------------------------------------- | :--- | | [Anhang D: Was tun bei Fehlern](../../docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Häufige Fehler in Vibe Coding | ✅ | | [Anhang E: Vergleich von 7 KI-Programmierwerkzeugen](../../docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Vergleich der wichtigsten KI-Plattformen | ✅ | | [Anhang F: Website-Design mit Design- und Programmieragenten](../../docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Multi-Agent-Zusammenarbeit | ✅ |

II. Mittlerer Entwickler

#### Frontend | Kapitel | Hauptinhalt | Status | | :------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--- | | [Frontend 0: Assets mit Lovart](../../docs/zh-cn/stage-2/frontend/2.0-lovart-assets/) | Visuelle Assets massenhaft generieren | 🚧 | | [Frontend 1: Einführung in Figma & MasterGo](../../docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/) | Informationsarchitektur und Seitenstruktur organisieren | 🚧 | | [Frontend 2: Erste moderne App bauen - UI Design](../../docs/zh-cn/stage-2/frontend/2.2-ui-design/) | Design-to-Code-Workflow mit Komponenten | 🚧 | | [Frontend 3: UI Design Specs & Multi-Produkt UI](../../docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/) | Systematisches Multi-Produkt-Design | 🚧 | | [Frontend 4: Gemeinsam Hogwarts Portraits bauen](../../docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Frontend-App mit KI von Grund auf erstellen | ✅ | #### Backend & Fullstack | Kapitel | Hauptinhalt | Status | | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- | | [Backend 1: Was ist eine API](../../docs/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api.md) | HTTP und Request/Response-Modelle verstehen | ✅ | | [Backend 2: Von Datenbank zu Supabase](../../docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) | DB und API auf Supabase implementieren | ✅ | | [Backend 3: KI-gestützte API-Code und Dokumentation generieren](../../docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) | Dokumentation und Code mit KI generieren | 🚧 | | [Backend 4: Git Workflow](../../docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) | Versionskontrolle und Git-Zusammenarbeit | ✅ | | [Backend 5: Deployment auf Zeabur](../../docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) | Anwendungen auf Zeabur deployen | ✅ | | [Backend 6: Moderne CLI-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) | Entwicklung mit KI-CLI beschleunigen | 🚧 | | [Backend 7: Zahlungssysteme wie Stripe integrieren](../../docs/zh-cn/stage-2/backend/2.7-stripe-payment/) | Zahlung und Abwicklung integrieren | 🚧 | | [Projekt 1: Erste moderne App - Fullstack App](../../docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) | Vollständige Fullstack-Web-App erstellen | 🚧 | | [Projekt 2: Moderne UI-Bibliothek + Trae Praxis](../../docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) | Unabhängiges Produkt mit Auth und Zahlung | 🚧 | #### Anhang KI-Fähigkeiten | Kapitel | Hauptinhalt | Status | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [KI 1: Dify Einführung & 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) | Utility-Produkte mit Dify & RAG bauen | ✅ | | [KI 2: KI-Wörterbuch & Multimodale APIs](../../docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) | Models/APIs finden und Multimodal integrieren | 🚧 |

III. Fortgeschrittener Entwickler

#### Claude Code Kernfähigkeiten | Kapitel | Hauptinhalt | Status | | :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- | | [Claude Code Schnellstart](../../docs/zh-cn/stage-3/core-skills/basics/) | Installation, grundlegende Operationen, Tipps und Befehle | ✅ | | [Claude Code MCP Vollständiger Guide](../../docs/zh-cn/stage-3/core-skills/mcp/) | Claude Code über MCP mit GitHub, DB, APIs verbinden | ✅ | | [Claude Code Skills Vollständiger Guide](../../docs/zh-cn/stage-3/core-skills/skills/) | Wissen in wiederverwendbare Skill-Packs verpacken | ✅ | | [Claude Code Workflow Best Practices](../../docs/zh-cn/stage-3/core-skills/workflow/) | Best Practices für tägliche Entwicklung, Refactoring, Code Review | ✅ | | [Claude Agent Teams Vollständiger Guide](../../docs/zh-cn/stage-3/core-skills/agent-teams/) | Multi-KI-Zusammenarbeit wie echtes Entwicklungsteam | ✅ | | [Claude Code Superpowers Engineering-Entwicklung](../../docs/zh-cn/stage-3/core-skills/superpowers/) | Qualitätscode mit TDD schreiben | ✅ | | [Wie man Claude Code lange laufen lässt](../../docs/zh-cn/stage-3/core-skills/long-running-tasks/) | Langfristige Aufgaben für kontinuierliche Arbeit entwerfen | ✅ | #### Multi-Plattform-Entwicklung | Kapitel | Hauptinhalt | Status | | :------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | :--- | | [Wie man ein WeChat Mini-Programm baut](../../docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) | Mini-Programm-Ökosystem, von Template zum Launch | ✅ | | [Wie man WeChat Mini-Programm mit Backend baut](../../docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) | DB und Backend-Logik integrieren | ✅ | | [Android App Entwicklung](../../docs/zh-cn/stage-3/cross-platform/3.5-android-app/) | Einheitliche Android-Entwicklung mit Expo | ✅ | | [iOS App Entwicklung](../../docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) | Einheitliche iOS-Entwicklung mit Expo | ✅ | | [Wie man persönliche Website und akademischen Blog baut](../../docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) | Von Tech-Wahl bis Deployment, persönliche Seite bauen | ✅ | | [PWA Entwicklung](../../docs/zh-cn/stage-3/cross-platform/3.8-pwa-local-app/) | Progressive Web Apps mit Offline-Support bauen | 🚧 | | [KI Browser Extension Entwicklung](../../docs/zh-cn/stage-3/cross-platform/3.9-browser-ai-extension/) | Chrome Extensions für Seiten-Zusammenfassung entwickeln | 🚧 | | [Electron Desktop App Entwicklung](../../docs/zh-cn/stage-3/cross-platform/3.10-electron-voice-to-text/) | Desktop App für Spracherkennung mit Electron bauen | 🚧 | | [Wie man schnell entwickelt und NFT mintet](../../docs/zh-cn/stage-3/cross-platform/3.11-nft-minting/) | Smart Contracts schreiben, auf Ethereum Testnet deployen | 🚧 | | [VS Code Extensions entwickeln](../../docs/zh-cn/stage-3/cross-platform/3.12-vscode-extension/) | Extensions für KI-Projektassistenten entwickeln | 🚧 | | [Qt Industrieanwendungen entwickeln](../../docs/zh-cn/stage-3/cross-platform/3.13-qt-industrial-hmi/) | HMI für industrielle Pumpenüberwachung mit Qt bauen | 🚧 | #### Anhang Fortgeschrittene KI-Fähigkeiten | Kapitel | Hauptinhalt | Status | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- | | [Was ist RAG und wie es funktioniert](../../docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/) | RAG und gängige Architekturen verstehen | ✅ | | [Mittleres RAG und Workflow-Orchestrierung: LangGraph](../../docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) | Mehrstufige Workflows und erweiterte RAG-Systeme entwerfen | 🚧 |

## 🛠️ Wie man lernt - Wähle Kapitel zum Lesen und Üben nach deinem Level. Zögere nicht, ein Issue für Fragen zu öffnen. ## 💻 Lokale Einrichtung ### Moderner Weg In einem AI IDE (VS Code, Cursor, Trae, etc.), verwende folgenden Prompt: ``` Bitte helfen Sie mir, den lokalen Dienst dieses Projekts auszuführen. ``` ### Traditioneller Weg 1. npm install 2. npm run dev 3. Öffne `http://localhost:3000` in deinem Browser. ## 🤝 Beitragen - Wenn du Probleme findest oder Vorschläge hast, bitte ein Issue eröffnen. - Um beizutragen, bitte einen Pull Request einreichen. - Wenn du ein neues Projekt mit Datawhale starten möchtest, folge dem [Datawhale Open Source Projektleitfaden](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md). ## 🙏 Dank - [Sanbu - Projektleiter](https://github.com/sanbuphy) (Datawhale Mitglied) - Fang Ke - Berater (Datawhale Mitglied, Tsinghua Universität) - [Yerim Kang](https://github.com/yerim25) (Praktische Projekte - Tsinghua Universität) - Zhao Zhilin (Praktische Projekte - Tsinghua Universität) - [Li Yixuan](https://yixuan20.github.io/) (Visuelles Design - Tsinghua Universität) - Liu Siyi (Praktische Projekte - Tsinghua Universität) - Alle Beta-Tester der AI Vibe Coding 101 Gruppe für ihr Feedback. ### Besonderer Dank - Danke an [@Sm1les](https://github.com/Sm1les) für Unterstützung und Hilfe. - Danke an alle Mitwirkenden und alle, die diesem Projekt einen Stern gegeben haben ❤️ *(Details siehe Online-Dokumentation oder Haupt-Repository)*