test-repo/docs-readme/de-DE/README.md

<!-- 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

### _Von Null, projektbasiertes Lernen, dein erstes KI-Produkt bauen_

<p align="center">
  📌 <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen starten (Start Reading Online)</a>
</p>

<p align="center">
  <a href="https://datawhalechina.github.io/easy-vibe/">Online lesen</a> ·
  <a href="#-inhaltsnavigation">Lernkarte</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="../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="../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="../vi-VN/README.md"><img alt="Tiếng_Việt" src="https://img.shields.io/badge/Tiếng_Việt-d9d9d9"></a>
  <a href="./README.md"><img alt="Deutsch" src="https://img.shields.io/badge/Deutsch-d9d9d9"></a>
</p>

</div>

## 🚀 Projektvorstellung

Wenn du versuchst, mit KI Code zu schreiben, ständig auf Fehler stößt, oft aufgeben möchtest und unklar ist, wie man Programme tatsächlich online bringt 😢.

Dieses Tutorial ist speziell dafür konzipiert, dich von 0 auf 1 zu bringen und Vibe Coding-Techniken schrittweise zu meistern:

- **Stufe 1**: **Von Mini-Spielen zu Web-Prototypen**, Beherrschung von KI-Programmiergrundlagen und Produktdenken
- **Stufe 2**: Lernen von **Frontend/Backend-Entwicklung und KI-Fähigkeiten** im Zusammenhang mit Vibe Coding-Techniken, Vervollständigung einer kompletten Anwendung
- **Stufe 3**: Beherrschung des Baus von **plattformübergreifenden komplexen Anwendungen**, hin zu produktionsreifen Anwendungen

Wir glauben, dass durch die Beherrschung von Vibe Coding in Kombination mit systematischem Training eine einzelne Person zu einem Entwickler werden kann, der Frontend-Entwicklung, Backend-Entwicklung, Integration von KI-Fähigkeiten und Produktdesign vereint.

> **Dieses Projekt richtet sich hauptsächlich an drei Arten von Lernenden:**
>
> - **Anfänger (normale Menschen / Produkt und Betrieb)**: Nicht-technische Lernende helfen, Schlüsselkonzepte zu verstehen und ihren ersten Produktprototyp zu completed
> - **Entwickler auf Anfänger-Fortgeschrittenen-Niveau (Studenten und Entwickler mit gewisser Grundlage)**: Beherrschung von Vibe Coding Frontend/Backend und KI-Fähigkeitswissen
> - **Fortgeschrittene Entwickler (Unternehmen und Startups, Open Source und unabhängige Entwickler)**: Fortgeschrittene Entwicklungstechniken, plattformübergreifende Entwicklung

### 📖 Inhaltsnavigation

<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>

### Gesamtanhang

[KI-Fähigkeitslexikon: gängige KI-Kernkonzepte und Begriffe, Szenario-Erklärungen](docs/zh-cn/appendix/ai-capability-dictionary.md)

### 1. Anfängereinstieg und Produktprototyp

| Kapitel                                                                                                                                     | Schlüsselinhalt                                                                                     | Status |
| :------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------- | :----- |
| [Vorwort: Lernkarte](docs/zh-cn/stage-0/0.1-learning-map/index.md)                                                                          | Gesamtführung durch den Lernpfad                                                                    | ✅     |
| [Anfänger 1: KI-Zeitalter, wenn du sprechen kannst, kannst du programmieren](docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md) | Erste Erfahrung mit KI-Programmierfähigkeiten durch Fälle wie Snake                                 | ✅     |
| [Anfänger 2: KI-IDE-Tools kennenlernen](docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md)                                             | IDE-Nutzung lernen, lokal Mini-Spiele erstellen                                                     | ✅     |
| [Anfänger 3: Einen Prototyp selbst bauen](docs/zh-cn/stage-1/1.2-building-prototype/index.md)                                               | Anforderungsanalyse, KI-generierte Einzelseite, bis zu Generierung von Mehrseiten-Produktprototypen | ✅     |
| [Anfänger 4: KI-Fähigkeiten zum Prototyp hinzufügen](docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md)                           | Verbindung gängiger KI-Fähigkeiten (Text, Bild, Video) lernen                                       | ✅     |
| [Anfänger 5: Komplettes Projektpraxis](docs/zh-cn/stage-1/1.4-complete-project-practice/index.md)                                           | Reale Szenarien simulieren, Benutzerfeedback zur Iteration akzeptieren, Projekt completed           | ✅     |
| [Großes Projekt: Einen kompletten Web-App-Prototyp erstellen und präsentieren](docs/zh-cn/stage-1/1.5-final-project/index.md)               | Anwendung vollständig implementieren, Anwendungseffekte präsentieren                                | ✅     |

#### Anhänge

| Kapitel                                                                                       | Schlüsselinhalt                                                                       | Status |
| :-------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | :----- |
| [Anhang A: Produktdenken-Ergänzung](docs/zh-cn/stage-1/appendix-a-product-thinking/index.md)  | Denkrahmen, die für die Erstellung eines Produkts von Null auf Eins erforderlich sind | ✅     |
| [Anhang B: Häufige Fehler und Lösungen](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Häufige Fehler in Vibe Coding und Methoden zur Fehlerbehebung                         | ✅     |

### 2. Entwicklungsingenieur auf Anfänger-Fortgeschrittenen-Niveau

#### Frontend-Teil

| Kapitel                                                                                                                                           | Schlüsselinhalt                                                                                                                                               | Status |
| :------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----- |
| [Frontend 0: lovart für Asset-Generierung verwenden](docs/zh-cn/stage-2/frontend/2.0-lovart-assets/)                                              | lovart für Batch-Generierung von visuellen Assets wie Charakteren und Szenen verwenden, Bereitstellung von Asset-Basis für UI-Design und Frontend-Entwicklung | 🚧     |
| [Frontend 1: Einführung in Figma und MasterGo](docs/zh-cn/stage-2/frontend/2.1-figma-mastergo/)                                                   | Design-Tools zur Organisation der Informationsarchitektur und Seitenstruktur verwenden, Basis für Frontend-Implementierung schaffen                           | 🚧     |
| [Frontend 2: Erste moderne Anwendung erstellen - UI-Design](docs/zh-cn/stage-2/frontend/2.2-ui-design/)                                           | Komponentenbasierte Schnittstelle basierend auf Entwürfen completed, erste Route von Design zu Code realisieren                                               | 🚧     |
| [Frontend 3: UI-Design-Spezifikationen und Multi-Produkt-UI-Design referenzieren](docs/zh-cn/stage-2/frontend/2.3-multi-product-ui/)              | Multi-Produkt-Schnittstellen um ein einheitliches Hauptvisuelles erweitern, systematische Designfähigkeiten üben                                              | 🚧     |
| [Frontend 4: Gemeinsam Hogwarts-Porträts erstellen](docs/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits.md) | Frontend-Anwendung mit integrierten KI-Fähigkeiten von 0 auf 1 erstellen, Design und Entwicklung verbinden                                                    | ✅     |

#### Backend- und Full-Stack-Teil

| Kapitel                                                                                                                                                                                                                                                                                                         | Schlüsselinhalt                                                                                                 | 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-Schnittstellen und Request-Response-Modelle verstehen, Vorbereitung auf Backend-Integration und Abstimmung | ✅     |
| [Backend 2: Von Datenbanken zu Supabase](docs/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase.md) : Datenbanken und APIs auf Supabase implementieren, Datenmodelle mit Frontend-Seiten verbinden                                                                        | ✅                                                                                                              |
| [Backend 3: LLM-unterstützte Schnittstellen- und Dokumentationscodierung](docs/zh-cn/stage-2/backend/2.3-ai-interface-code/) : LLM zur Unterstützung bei der Generierung von Dokumentation und Code für Schnittstellen und Datenbanken verwenden, lesbaren und testbaren Backend realisieren                    | 🚧                                                                                                              |
| [Backend 4: Git-Workflow](docs/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github.md) : Code in Git-Workflow verwalten, Versionskontrolle und Zusammenarbeit durchführen                                                                                                       | ✅                                                                                                              |
| [Backend 5: Zeabur-Bereitstellung](docs/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md) : Anwendung auf Zeabur bereitstellen, um online zu gehen                                                                                             | ✅                                                                                                              |
| [Backend 6: Moderne CLI-Entwicklungstools](docs/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md) : KI-Programmierertools vom Typ CLI verwenden, um Entwicklung und Debugging zu beschleunigen, persönlichen Engineering-Workflow bilden | ✅                                                                                                              |
| [Backend 7: Zahlungssysteme wie Stripe integrieren](docs/zh-cn/stage-2/backend/2.7-stripe-payment/) : Zahlungssysteme anschließen, Zahlungsablauf und grundlegenden Abrechnungsprozess completed                                                                                                                | 🚧                                                                                                              |
| [Großes Projekt 1: Erste moderne Anwendung erstellen - Full-Stack-App](docs/zh-cn/stage-2/assignments/2.1-fullstack-app/) : Frontend, Backend und Zahlungsmodule integrieren, produktionsreife Full-Stack-Web-Anwendung completed                                                                               | 🚧                                                                                                              |
| [Großes Projekt 2: Moderne Frontend-Komponentenbibliothek + Trae-Praxis](docs/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/) : Moderne Frontend-Komponentenbibliothek und Trae verwenden, unabhängig ein Produkt mit Anmeldung/Registrierung und Zahlungsunterstützung completed                          | 🚧                                                                                                              |

#### KI-Fähigkeiten-Anhang

| Kapitel                                                                                                                                                                                                                                                                                                                                               | Schlüsselinhalt | Status |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :----- |
| [KI 1: Einführung in Dify und Wissensbasis-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) : Dify Workflow und grundlegendes RAG verwenden, um werkzeugartige Produkte zu erstellen, Beispiel für zukünftige Anwendungs-Upgrades erstellen | ✅              |
| [KI 2: KI-Lexikon abfragen und multimodale APIs integrieren lernen](docs/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook.md) : Lernen, geeignete Modelle und APIs zu finden, multimodale Fähigkeiten wie Text und Bild in Produkte integrieren                                                          | 🚧              |

### 3. Fortgeschrittener Entwicklungsingenieur

| Kapitel                                                                                                                                                                                                                                                                                             | Schlüsselinhalt | Status |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :----- |
| [Fortgeschritten 1: MCP und ClaudeCode Skills](docs/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/) : IDE-Fähigkeiten durch MCP und Skills erweitern, externe Dienste als Tools anschließen                                                                                                   | 🚧              |
| [Fortgeschritten 2: Coding Tools lange laufen lassen](docs/zh-cn/stage-3/core-skills/3.2-long-running-tasks/) : Lang laufende Aufgaben entwerfen und konfigurieren, Coding Tools stabiler und zuverlässiger machen                                                                                  | 🚧              |
| [Fortgeschritten 3: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen](docs/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/) : WeChat-Miniprogramm-Ökosystem verstehen, Frontend-Miniprogramm von offizieller Vorlage bis zum Start completed                                 | ✅              |
| [Fortgeschritten 4: Plattformübergreifende Entwicklung: WeChat-Miniprogramme erstellen - Mit Backend](docs/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/) : Datenbank und Backend-Logik in Miniprogramme integrieren, vollständigen Geschäftskreislauf realisieren                   | 🚧              |
| [Fortgeschritten 5: Plattformübergreifende Entwicklung: Android-Anwendungen erstellen](docs/zh-cn/stage-3/cross-platform/3.5-android-app/) : Tools wie Expo verwenden, Web/native-integrierte Android-Anwendungsentwicklung completed                                                               | 🚧              |
| [Fortgeschritten 6: Plattformübergreifende Entwicklung: iOS-Anwendungen erstellen](docs/zh-cn/stage-3/cross-platform/3.6-ios-app/) : Tools wie Expo verwenden, Web/native-integrierte iOS-Anwendungsentwicklung completed                                                                           | 🚧              |
| [Fortgeschritten 7: Eigene persönliche Website und akademischen Blog erstellen](docs/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/) : Von Auswahl, Erstellung bis Bereitstellung, langfristige Online-Homepage erstellen, die persönliche Projekte und akademische Ergebnisse präsentiert | 🚧              |

#### KI-Fähigkeiten-Anhang

| Kapitel                                                                                                                                                                                                                                                                                                            | Schlüsselinhalt | Status |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------- | :----- |
| [Fortgeschrittene KI 1: Was ist RAG und wie funktioniert es](docs/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future.md) : Systematisches Verständnis von RAG-Prinzipien und gängigen Architekturen, Wissensretrieval-Basis für komplexe Anwendungen bereitstellen | ✅              |
| [Fortgeschrittene KI 2: Mittel-fortgeschrittenes RAG und Workflow-Orchestrierung: LangGraph-Beispiel](docs/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/) : Tools wie LangGraph verwenden, um mehrstufige Workflows und mittel-fortgeschrittene RAG-Systeme zu entwerfen                                  | 🚧              |

## 🛠️ Lernmethode

- Entsprechend deiner persönlichen Fähigkeiten selektiv relevante Kapitel lesen und üben, bei Fragen in Issues stellen.

## 💻 Dieses Kurs lokal starten

### Moderne Methode

Gib im KI-IDE-Dialogfeld (vscode, cursor, trae etc.) den folgenden Prompt ein, um diesen Kurs zu starten:

```
Bitte hilf mir, den lokalen Service dieses Projekts auszuführen
```

### Alte Methode

1. npm install
2. npm run dev
3. Browser öffnen und `http://localhost:3000` besuchen.

## 🤝 Mitwirken

- Wenn du Probleme entdeckst oder denkst, dass es Möglichkeiten zur Verbesserung dieses Projekts gibt, kannst du eine Issue einreichen, um Feedback zu geben. Wenn nach Einreichung niemand antwortet, kannst du das [Betreuer-Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) für Feedback und Nachverfolgung kontaktieren~
- Wenn du zu diesem Projekt beitragen möchtest, kannst du einen Pull Request einreichen, wenn nach Einreichung niemand antwortet, kannst du das [Betreuer-Team](https://github.com/datawhalechina/DOPMC/blob/main/OP.md) für Feedback und Nachverfolgung kontaktieren~
- Wenn du sehr an Datawhale interessiert bist und ein neues Projekt starten möchtest, folge bitte dem [Datawhale-Open-Source-Projekt-Leitfaden](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)~

## 🙏 Dank an jeden Beitragenden

- [散步-Projektleiter](https://github.com/sanbuphy) (Datawhale-Mitglied)
- Fang Ke-Betreuer (Datawhale-Mitglied, Tsinghua-Universität)
- [Yerim Kang](https://github.com/yerim25)（Praxisprojektteil-Tsinghua-Universität）
- Zhao Zhilin（Praxisprojektteil-Tsinghua-Universität）
- [Li Yixuan](https://yixuan20.github.io/)（Seiten-Kunst-Design-Tsinghua-Universität）
- Alle Kameraden der AI Vibe Coding 101-Beta-Testgruppe, die Vorschläge und Erfahrungen eingebracht haben

### Besonderer Dank

- Danke an [@Sm1les](https://github.com/Sm1les) für die Hilfe und Unterstützung bei diesem Projekt
- Danke an alle Entwickler, die zu diesem Projekt beigetragen haben ❤️

<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">📧 Kontaktiere uns</span>

<div align=center>
<p>Bei Fragen, Vorschlägen, Beschwerden oder zum Austausch scanne bitte den untenstehenden QR-Code</p>
<img src="../assets/wechat.png" width="280">

<p>Scan den untenstehenden QR-Code, um dem offiziellen Konto zu folgen: Datawhale</p>
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width="180" height="180">
</div>

## 📄 LIZENZ

<div align="center">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  <img
    alt="Creative Commons Lizenz"
    style="border-width:0"
    src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey"
  />
</a>
<br />
Dieses Werk ist lizenziert unter einer
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
  Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz
</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)