feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/de-de/appendix/prompt-engineering)
- [AI Evolution](/de-de/appendix/ai-evolution)
- [LLM Introduction](/de-de/appendix/llm-intro)
- [VLM Introduction](/de-de/appendix/vlm-intro)
- [AI Image Generation](/de-de/appendix/image-gen-intro)
- [AI Audio Models](/de-de/appendix/audio-intro)
- [Context Engineering](/de-de/appendix/context-engineering)
- [AI Agents](/de-de/appendix/agent-intro)
- [AI Capability Dictionary](/de-de/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/de-de/appendix/web-basics)
- [Frontend Evolution](/de-de/appendix/frontend-evolution)
- [Frontend Performance](/de-de/appendix/frontend-performance)
- [Canvas 2D](/de-de/appendix/canvas-intro)
- [URL to Browser](/de-de/appendix/url-to-browser)
- [Browser DevTools](/de-de/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/de-de/appendix/backend-evolution)
- [Backend Languages](/de-de/appendix/backend-languages)
- [Database Principles](/de-de/appendix/database-intro)
- [Cache Design](/de-de/appendix/cache-design)
- [Message Queues](/de-de/appendix/queue-design)
- [Authentication](/de-de/appendix/auth-design)
- [Tracking Design](/de-de/appendix/tracking-design)
- [Operations](/de-de/appendix/operations)
-
-### General Skills
- [API Introduction](/de-de/appendix/api-intro)
- [IDE Introduction](/de-de/appendix/ide-intro)
- [Terminal Introduction](/de-de/appendix/terminal-intro)
- [Git Introduction](/de-de/appendix/git-intro)
- [Computer Networks](/de-de/appendix/computer-networks)
- [Deployment](/de-de/appendix/deployment)
@@ -0,0 +1,186 @@
+# Anhang
+
+Willkommen im **Anhang**-Abschnitt! Dies ist eine Sammlung von Grundlagen der künstlichen Intelligenz und Grundlagen der Full-Stack-Entwicklung, die als wichtige Referenzbibliothek während deiner Lernreise dient.
+
+## Inhaltskategorien
+
+### KI-Grundlagen
+
+Verstehe die Kernkonzepte, die Entwicklungsgeschichte und die hochmodernen technischen Prinzipien der künstlichen Intelligenz:
+<NavGrid>
+  <NavCard
+    href="/de-de/appendix/prompt-engineering/"
+    title="Prompt-Engineering"
+    description="Beherrsche die Kunst des effizienten Dialogs mit KI, um das Potenzial großer Modelle zu entfalten"
+  />
+  <NavCard
+    href="/de-de/appendix/ai-evolution"
+    title="KI-Evolutionsgeschichte"
+    description="Überprüfe wichtige Meilensteine in der KI-Entwicklung und verstehe die Entwicklungstrajektorie der Technologie"
+  />
+  <NavCard
+    href="/de-de/appendix/llm-intro"
+    title="Große Sprachmodelle"
+    description="Tiefgehende, aber zugängliche Erklärung, wie Große Sprachmodelle (LLMs) funktionieren und ihre Anwendungen"
+  />
+  <NavCard
+    href="/de-de/appendix/vlm-intro"
+    title="Multimodale große Modelle"
+    description="Erkunde fortschrittliche Modelle, die mehrere Datenmodalitäten wie Bilder und Audio verarbeiten können"
+  />
+  <NavCard
+    href="/de-de/appendix/image-gen-intro"
+    title="KI-Bildgenerierungsprinzipien"
+    description="Enthülle die zugrunde liegende Logik und technische Umsetzung der KI-Bildgenerierung"
+  />
+  <NavCard
+    href="/de-de/appendix/audio-intro"
+    title="KI-Audiomodelle"
+    description="Verstehe KI-Anwendungen in der Sprachsynthese, Erkennung und Musikerzeugung"
+  />
+  <NavCard
+    href="/de-de/appendix/context-engineering"
+    title="Kontext-Engineering"
+    description="Lerne, wie du das Kontextmanagement optimierst, um die langfristige Kohärenz von KI-Aufgaben zu verbessern"
+  />
+  <NavCard
+    href="/de-de/appendix/agent-intro"
+    title="Agenten-Intelligenz"
+    description="Erkunde KI-Agenten-Architekturen mit autonomen Entscheidungs- und Ausführungsfähigkeiten"
+  />
+  <NavCard
+    href="/de-de/appendix/ai-capability-dictionary"
+    title="KI-Fähigkeitenwörterbuch"
+    description="Ein Schnellreferenzhandbuch für häufig verwendete Begriffe und Kernkonzepte im KI-Bereich"
+  />
+</NavGrid>
+
+
+### Frontend-Grundlagen
+
+Festige die technische Basis der Frontend-Entwicklung:
+<NavGrid>
+  <NavCard
+    href="/de-de/appendix/web-basics"
+    title="HTML/CSS/JS-Grundlagen"
+    description="Die drei Säulen des Webseitenaufbaus, unverzichtbar für Frontend-Entwicklungseinsteiger"
+  />
+  <NavCard
+    href="/de-de/appendix/frontend-evolution"
+    title="Frontend-Evolutionsgeschichte"
+    description="Verstehe die Entwicklung der Frontend-Technologie-Stacks und erfasse die Trends der Technologieentwicklung"
+  />
+  <NavCard
+    href="/de-de/appendix/frontend-performance"
+    title="Frontend-Leistungsoptimierung"
+    description="Lerne Schlüsselstrategien, um die Ladegeschwindigkeit von Webseiten und die Flüssigkeit der Interaktion zu verbessern"
+  />
+  <NavCard
+    href="/de-de/appendix/canvas-intro"
+    title="Einführung in Canvas 2D"
+    description="Beherrsche die Canvas-Zeichen-API, um coole Grafik- und Animationseffekte zu erzielen"
+  />
+  <NavCard
+    href="/de-de/appendix/url-to-browser"
+    title="Von der URL zur Browser-Anzeige"
+    description="Vollständige Kettenanalyse des vollständigen Prozesses des Browser-Renderings von Seiten"
+  />
+  <NavCard
+    href="/de-de/appendix/browser-devtools/"
+    title="Browser-Entwicklertools"
+    description="Verwende Entwicklertools fachkundig, um Frontend-Probleme effizient zu lokalisieren und zu lösen"
+  />
+</NavGrid>
+
+
+### Backend-Grundlagen
+
+Beherrsche die Kernkonzepte der Backend-Entwicklung:
+<NavGrid>
+  <NavCard
+    href="/de-de/appendix/backend-evolution"
+    title="Backend-Evolutionsgeschichte"
+    description="Von monolithisch zu Microservices, die Entwicklung der Backend-Architektur erkunden"
+  />
+  <NavCard
+    href="/de-de/appendix/backend-languages"
+    title="Backend-Programmiersprachen"
+    description="Vergleiche die Eigenschaften und Anwendungsszenarien dominanter Backend-Sprachen, um den besten Technologie-Stack zu wählen"
+  />
+  <NavCard
+    href="/de-de/appendix/database-intro"
+    title="Datenbankprinzipien"
+    description="Verstehe die Kernprinzipien von Datenbanken und beherrsche die Kunst der Datenspeicherung und -abfrage"
+  />
+  <NavCard
+    href="/de-de/appendix/cache-design"
+    title="System-Cache-Design"
+    description="Lerne Caching-Strategien, um die Hochlastverarbeitungsfähigkeiten des Systems zu verbessern"
+  />
+  <NavCard
+    href="/de-de/appendix/queue-design"
+    title="Nachrichtenwarteschlangen-Design"
+    description="Beherrsche die Schlüsselrolle von Nachrichtenwarteschlangen bei der Entkopplung und Lastspitzenbeseitigung"
+  />
+  <NavCard
+    href="/de-de/appendix/auth-design"
+    title="Authentifizierungsprinzipien und -praxis"
+    description="Baue sichere Identitätsauthentifizierungs- und Berechtigungsverwaltungssysteme auf"
+  />
+  <NavCard
+    href="/de-de/appendix/tracking-design"
+    title="Tracking-Design"
+    description="Entwerfe Daten-Tracking wissenschaftlich, um Datenunterstützung für Produktentscheidungen zu bieten"
+  />
+  <NavCard
+    href="/de-de/appendix/operations"
+    title="Online-Betrieb"
+    description="Beherrsche Betriebsfähigkeiten für Systembereitstellung, Überwachung und Fehlerbehebung"
+  />
+</NavGrid>
+
+
+### Allgemeine Fähigkeiten
+
+Grundlegendes Wissen der Softwareentwicklung:
+<NavGrid>
+  <NavCard
+    href="/de-de/appendix/api-intro"
+    title="API-Einführung"
+    description="Grundlegendes Wissen über API-Schnittstellendesign und -entwicklung"
+  />
+  <NavCard
+    href="/de-de/appendix/ide-intro/"
+    title="IDE-Prinzipien"
+    description="Verstehe den internen Arbeitsmechanismus von Integrierten Entwicklungsumgebungen (IDEs)"
+  />
+  <NavCard
+    href="/de-de/appendix/terminal-intro"
+    title="Terminal-Einführung"
+    description="Beherrsche grundlegende Befehlszeilen-Terminaloperationen, um die Entwicklungseffizienz zu verbessern"
+  />
+  <NavCard
+    href="/de-de/appendix/git-intro"
+    title="Detaillierte Git-Einführung"
+    description="Verstehe tiefgehend die Git-Versionskontrollprinzipien und fortgeschrittene Nutzung"
+  />
+  <NavCard
+    href="/de-de/appendix/computer-networks"
+    title="Computernetzwerke"
+    description="Grundlegendes Wissen über Netzwerkprotokolle und Kommunikationsprinzipien"
+  />
+  <NavCard
+    href="/de-de/appendix/deployment"
+    title="Bereitstellung und Launch"
+    description="Vollständiger Prozess und bewährte Verfahren für die Anwendungsbereitstellung und den Launch"
+  />
+</NavGrid>
+
+
+## Nutzungshinweise
+
+- Als Referenzmaterial während des Lernprozesses verwenden, bei Bedarf konsultieren
+- Bei unbekannten technischen Konzepten zuerst hier nach Erklärungen suchen
+- Es wird empfohlen, es einmal durchzulesen, um ein vollständiges Wissenssystem aufzubauen
+
+Dies ist dein technisches Wissensschatz, immer willkommen zum Konsultieren!
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- [1. Learning Map](/de-de/stage-0/0.1-learning-map/)
- [2. If you can speak, you can code](/de-de/stage-0/0.2-ai-capabilities-through-games/)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- [1. Introduction to AI IDE](/de-de/stage-1/1.1-introduction-to-ai-ide/)
- [2. Building a Prototype](/de-de/stage-1/1.2-building-prototype/)
- [3. Integrating AI Capabilities](/de-de/stage-1/1.3-integrating-ai-capabilities/)
- [4. Complete Project Practice](/de-de/stage-1/1.4-complete-project-practice/)
@@ -0,0 +1,66 @@
+# Anfänger und Produktprototyp
+
+Willkommen in der Phase **KI-Produktmanager**! Dies ist der Ausgangspunkt des Easy-Vibe-Tutorials, entwickelt für Lernende ohne Programmiererfahrung.
+
+## Was du lernen wirst
+
+In dieser Phase startest du von Null und beherrschst den Vibe Coding-Workflow, um zu einem Super-Individuum zu werden, das in der Lage ist, Produkte unabhängig zu entwerfen.
+
+### Erste Schritte
+
+Geeignet für Produkt, Betrieb und nicht-technische Hintergründe. Verstehe die KI-Programmierlogik durch Spiele und baue Vertrauen auf:
+<NavGrid>
+  <NavCard
+    href="/de-de/stage-0/0.1-learning-map/"
+    title="Lernkarte"
+    description="Verstehe den gesamten Lernpfad und kläre die Ziele und Ergebnisse jeder Phase"
+  />
+  <NavCard
+    href="/de-de/stage-0/0.2-ai-capabilities-through-games/"
+    title="KI-Ära: Wenn du sprechen kannst, kannst du programmieren"
+    description="Erlebe den Charme der KI-Programmierung durch Spiele wie Snake und überwinde die Angst vor dem Codieren"
+  />
+</NavGrid>
+
+
+### Produktmanager
+
+Beherrsche den Vibe Coding-Workflow. Lerne, Anforderungen zu zerlegen und unabhängig hochfidele Webanwendungsprototypen zu vervollständigen:
+<NavGrid>
+  <NavCard
+    href="/de-de/stage-1/1.1-introduction-to-ai-ide/"
+    title="Einführung in KI-IDE-Tools"
+    description="Lerne die aktuellen KI-Programmierungstools kennen und wähle den besten Entwicklungspartner für dich"
+  />
+  <NavCard
+    href="/de-de/stage-1/1.2-building-prototype/"
+    title="Prototypenerstellung"
+    description="Lerne, wie du Produktideen schnell in visuelle Prototypen umwandeln kannst, um kostengünstig zu testen"
+  />
+  <NavCard
+    href="/de-de/stage-1/1.3-integrating-ai-capabilities/"
+    title="Integration von KI-Fähigkeiten"
+    description="Integriere einfache KI-APIs, um deinem Prototyp Intelligenz zu verleihen"
+  />
+  <NavCard
+    href="/de-de/stage-1/1.4-complete-project-practice/"
+    title="Vollständige Projektpraxis"
+    description="Wende das Gelernte umfassend an, um die Entwicklung eines vollständigen Produktprototyps von 0 bis 1 abzuschließen"
+  />
+</NavGrid>
+
+
+## Für wen es ist
+
+- Produktmanager und Betriebspersonal ohne Programmiererfahrung
+- Unternehmer, die Ideen schnell validieren möchten
+- Nicht-technische Personen, die sich für KI-Programmierung interessieren
+- Designer, die ihre Prototyping-Fähigkeiten verbessern möchten
+
+## Lernpfad
+
+```
+Erste Schritte → Grundlagen des Produktmanagements → Integration von KI-Fähigkeiten → Vollständige Projektpraxis
+```
+
+Bereit, deine KI-Programmierreise zu beginnen? Klicke auf die linke Navigation, um mit dem Lernen zu beginnen!
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/de-de/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/de-de/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/de-de/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/de-de/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/de-de/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/de-de/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/de-de/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/de-de/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/de-de/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/de-de/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/de-de/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/de-de/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/de-de/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/de-de/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/de-de/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/de-de/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# Full-Stack-Entwicklung
+
+Willkommen in der Phase **Full-Stack-Entwicklung**! Hier wirst du dich tief mit der Full-Stack-Entwicklung beschäftigen, Frontend-Komponentisierung, Datenbankdesign, Backend-API-Entwicklung und Deployment beherrschen.
+
+## Was du lernen wirst
+
+### Frontend-Entwicklung
+
+Beherrsche moderne Frontend-Entwicklung und lerne die Verwendung von Komponentenbibliotheken und Designtools:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Frontend 0: Verwendung von Lovart für Assets"
+    description="Lerne, wie du KI-Tools wie Lovart verwenden kannst, um schnell hochwertige Spiel-Assets und UI-Ressourcen zu generieren"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 1: Einführung in Figma und MasterGo"
+    description="Beherrsche die Grundoperationen professioneller UI-Designtools und den Workflow vom Design zum Code"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 2: Erstelle deine erste moderne App - UI-Design"
+    description="Entwerfe eine moderne Webanwendungsoberfläche von Grund auf und übe UI-Designprinzipien"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 3: UI-Design-Richtlinien und Multi-Produkt-UI"
+    description="Lerne die führenden UI-Design-Richtlinien kennen, um Konsistenz und Ästhetik des Produktdesigns zu verbessern"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 4: Lass uns Hogwarts-Porträts erstellen"
+    description="Praxisprojekt: Erstelle eine interaktive Hogwarts-Porträt-Anwendung mit KI-generierten Bildern"
+  />
+</NavGrid>
+
+
+### Backend und Full-Stack
+
+Lerne API-Design, Datenbankverwaltung und Anwendungs-Deployment-Strategien:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Backend 1: Was ist eine API"
+    description="Verstehe das Kernkonzept von APIs, die Brücke zwischen Frontend und Backend"
+  />
+  <NavCard
+    href="#"
+    title="Backend 2: Von der Datenbank zu Supabase"
+    description="Beherrsche die Grundlagen relationaler Datenbanken und lerne die Verwendung von Supabase, einer modernen BaaS-Plattform"
+  />
+  <NavCard
+    href="#"
+    title="Backend 3: KI-unterstützter Schnittstellencode und Dokumentation"
+    description="Verwende KI, um bei der Generierung von Backend-Schnittstellencode und standardisierter API-Dokumentation zu helfen"
+  />
+  <NavCard
+    href="#"
+    title="Backend 4: Git-Workflow"
+    description="Beherrsche die Kernoperationen und Kollaborations-Workflows des Git-Versionskontrollsystems"
+  />
+  <NavCard
+    href="#"
+    title="Backend 5: Zeabur-Deployment"
+    description="Lerne, wie du deine Full-Stack-Anwendungen schnell in der Cloud mit Zeabur bereitstellst"
+  />
+  <NavCard
+    href="#"
+    title="Backend 6: Moderne CLI-Entwicklungstools"
+    description="Erkunde moderne CLI-Tools, um die Entwicklungserfahrung in Befehlszeilenumgebungen zu verbessern"
+  />
+  <NavCard
+    href="#"
+    title="Backend 7: Integration von Stripe-Zahlungssystemen"
+    description="Praxis: Integriere Stripe-Zahlungsfunktionalität in deine Anwendung zur Monetarisierung"
+  />
+</NavGrid>
+
+
+### Aufgaben
+
+Festige deine Full-Stack-Entwicklungsfähigkeiten durch praktische Projekte:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Aufgabe 1: Erstelle deine erste moderne App - Full-Stack"
+    description="Wende das Gelernte umfassend an, um unabhängig eine vollständig funktionsfähige Full-Stack-Anwendung abzuschließen"
+  />
+  <NavCard
+    href="#"
+    title="Aufgabe 2: Moderne Frontend-Komponentenbibliothek + Trae"
+    description="Verwende moderne Komponentenbibliotheken mit Trae IDE, um effizient komplexe Frontend-Oberflächen zu erstellen"
+  />
+</NavGrid>
+
+
+### KI-Fähigkeitserweiterung
+<NavGrid>
+  <NavCard
+    href="#"
+    title="KI 1: Einführung in Dify und Wissensdatenbank-Integration"
+    description="Lerne, wie du KI-Anwendungen mit Dify erstellst und private Wissensdatenbanken integrierst"
+  />
+  <NavCard
+    href="#"
+    title="KI 2: KI-Wörterbuch-Abfrage und multimodale API-Integration"
+    description="Erkunde weitere KI-Fähigkeiten und integriere multimodale APIs wie Vision und Sprache"
+  />
+</NavGrid>
+
+
+## Für wen es ist
+
+- Entwickler mit einiger Programmiergrundlage, die systematisch Full-Stack-Entwicklung lernen möchten
+- Lernende, die vom Produktmanager zum Full-Stack-Ingenieur wechseln möchten
+- Junior- bis Mittelstufen-Entwickler, die moderne Entwicklungstools und Workflows beherrschen möchten
+- Unternehmer, die unabhängig vollständige Produkte entwickeln möchten
+
+## Voraussetzungen
+
+- Abschluss der Phase "Anfänger und Produktprototyp" oder gleichwertige Grundkenntnisse
+- Verständnis grundlegender HTML/CSS/JavaScript-Konzepte
+- Vorkenntnisse über KI-Programmierungstools
+
+Bereit, dich tief in die Full-Stack-Entwicklung zu vertiefen? Klicke auf die linke Navigation, um mit dem Lernen zu beginnen!
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/de-de/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/de-de/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/de-de/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/de-de/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/de-de/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/de-de/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/de-de/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/de-de/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/de-de/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# Fortgeschrittene Entwicklung
+
+Willkommen in der Phase **Fortgeschrittene Entwicklung**! Hier wirst du komplexe plattformübergreifende Anwendungen erstellen, die Entwicklung von WeChat-Mini-Programmen beherrschen und dich mit der fortgeschritteneren KI-nativen Anwendungsentwicklung herausfordern.
+
+## Was du lernen wirst
+
+### Kernkompetenzen
+
+Beherrsche das MCP-Protokoll und fortgeschrittene Claude Code-Techniken tiefgehend, um die Entwicklungseffizienz zu verbessern:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Fortgeschritten 1: MCP- und ClaudeCode-Fähigkeiten"
+    description="Beherrsche Model Context Protocol (MCP), um die Fähigkeiten von KI-Programmierungstools zu erweitern"
+  />
+  <NavCard
+    href="#"
+    title="Fortgeschritten 2: Langlaufende Aufgaben"
+    description="Lerne, wie du KI-Coding-Tools dazu bringst, langlaufende komplexe Aufgaben zu bearbeiten"
+  />
+</NavGrid>
+
+
+### Plattformübergreifende Entwicklung
+
+Erstelle WeChat-Mini-Programme, Android- und iOS-Anwendungen, um plattformübergreifende Abdeckung zu erreichen:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Fortgeschritten 3: Erstellen von WeChat-Mini-Programmen"
+    description="Entwickle WeChat-Mini-Programme von Grund auf und beherrsche die Kern-Workflows der Mini-Programm-Entwicklung"
+  />
+  <NavCard
+    href="#"
+    title="Fortgeschritten 4: WeChat-Mini-Programme mit Backend"
+    description="Erstelle vollständige WeChat-Mini-Programm-Anwendungen mit Backend-Unterstützung"
+  />
+  <NavCard
+    href="#"
+    title="Fortgeschritten 5: Erstellen von Android-Apps"
+    description="Verwende moderne plattformübergreifende Frameworks, um native Android-Anwendungen zu erstellen"
+  />
+  <NavCard
+    href="#"
+    title="Fortgeschritten 6: Erstellen von iOS-Apps"
+    description="Entwickle und veröffentliche iOS-Anwendungen und beherrsche die Entwicklungsstandards des iOS-Ökosystems"
+  />
+</NavGrid>
+
+
+### Persönliche Marke
+
+Erstelle deine eigene persönliche Website und deinen eigenen Tech-Blog, um persönlichen Einfluss aufzubauen:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Fortgeschritten 7: Erstellen deiner persönlichen Website und akademischen Blogs"
+    description="Verwende moderne Technologie-Stacks, um leistungsstarke und visuell ansprechende persönliche Blogs zu erstellen"
+  />
+</NavGrid>
+
+
+### Fortgeschrittene KI-Fähigkeiten
+
+Erkunde fortgeschrittene KI-Technologien wie RAG und LangGraph, um komplexe KI-Anwendungs-Workflows zu erstellen:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Fortgeschrittene KI 1: Was ist RAG und wie funktioniert es"
+    description="Verstehe tiefgehend die Prinzipien von Retrieval-Augmented Generation (RAG) und dessen Wert in KI-Anwendungen"
+  />
+  <NavCard
+    href="#"
+    title="Fortgeschrittene KI 2: Fortgeschrittenes RAG und Workflow-Orchestrierung - LangGraph"
+    description="Lerne, wie du LangGraph verwendest, um komplexe KI-Workflows zu orchestrieren und fortgeschrittene RAG-Systeme zu erstellen"
+  />
+</NavGrid>
+
+
+## Für wen es ist
+
+- Fortgeschrittene Entwickler mit Full-Stack-Entwicklungserfahrung, die komplexere Anwendungen herausfordern möchten
+- Ingenieure, die plattformübergreifende Entwicklungstechnologien beherrschen möchten
+- Forscher, die KI-native Anwendungsentwicklung tiefgehend verstehen möchten
+- Tech-Blogger, die ihre persönliche Tech-Marke aufbauen möchten
+
+## Voraussetzungen
+
+- Abschluss der Phase "Full-Stack-Entwicklung" oder Full-Stack-Entwicklungserfahrung
+- Vertrautheit mit Frontend-Frameworks (wie React/Vue) und Backend-Entwicklung
+- Verständnis grundlegender KI-Konzepte und API-Nutzung
+
+Bereit, dich der fortgeschrittenen Entwicklung zu stellen? Klicke auf die linke Navigation, um mit dem Lernen zu beginnen!