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 😢.
- **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
| [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 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 | ✅ |
| [Anhang A: Produktdenken und Lösungsdesign](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: Referenz für KI-Branchenanwendungsszenarien (B2B)](docs/zh-cn/stage-1/appendix-industry-scenarios/index.md) | Verstehen der KI-Anwendungen in verschiedenen Branchen | ✅ |
| [Anhang D: Was Tun bei Fehlern beim Schreiben von Code](docs/zh-cn/stage-1/appendix-b-common-errors/index.md) | Häufige Fehler in Vibe Coding und Methoden zur Fehlerbehebung | ✅ |
| [Anhang E: Vergleich von 7 KI-Programmierungstools](docs/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md) | Vergleich und Testen der wichtigsten KI-Programmierplattformen | ✅ |
| [Anhang F: Websites mit Design- und Programmieragenten Entwerfen](docs/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md) | Lernen der kollaborativen Nutzung von KI-Agenten | ✅ |
| [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 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 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 | 🚧 |
| [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 | 🚧 |
| [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 | 🚧 |
- 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)~
Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz
</a>
</div>
## Star History
[](https://www.star-history.com/#datawhalechina/easy-vibe&type=date&legend=top-left)
