Vibe Coding Guide v1.0: Ein vollständiges Handbuch für KI-gestützte Entwicklung

Dieses Dokument ist ein Leitfaden, der nicht nur erfahrenen Programmierern, sondern auch Nicht-Programmierern helfen soll, mit "Vibe Coding" Apps und Dienste zu entwickeln. Auch Juniorenentwickler mit wenig Programmiererfahrung und Planer können durch die Befolgung dieser Schritte stabile Ergebnisse erzielen.

Kernprinzip: Anstatt die KI sofort Code schreiben zu lassen, ist es besser, sie zuerst Dokumente (Design.md, ToDo.md) erstellen zu lassen, bevor mit der Entwicklung begonnen wird.

0. Zusammenfassung des Gesamtablaufs

[1] Erstellung von Concept.md anfordern

↓

[2] Design.md erstellen (UI/UX-Referenzdokument)

↓

[3] Tech-Stack festlegen (Siehe Entscheidungsbaum unten)

↓

[4] ToDo.md erstellen (Modulspezifikationen + Entwicklungsplan)

↓

[5] GitHub-Repository erstellen und ersten Commit durchführen

↓

[6] App-Beschreibung + Design.md + ToDo.md an Claude Code oder Grok Build übergeben, um die Entwicklung zu starten

↓

[7] Wiederholen: Modulweise implementieren → Testen → Commit/Push

1. Concept.md — Prompt, um mit einer einfachen Idee zu beginnen

Beschreiben Sie zunächst kurz die App oder den Dienst, den Sie erstellen möchten, in 2-3 Zeilen, so wie es Ihnen einfällt, in der Form: "Ich möchte so etwas machen; bitte erstellen Sie ein Concept.md-Dokument, das die Verfahren und Methoden zur Umsetzung detailliert beschreibt."

Laden Sie das generierte Dokument herunter und speichern Sie es als Concept.md.

2. Design.md — Zuerst UI/Design-Referenzdokumente erstellen

Wenn die App eine Benutzeroberfläche hat, ist es gut, zuerst Design.md zu schreiben. Das heißt, wenn es einen Dienst oder eine App gibt, die Sie als Referenz verwenden möchten, oder wenn Sie bereits wissen, wie Sie das UI selbst gestalten, können Sie dies anfordern, indem Sie Bilder von in Figma erstellten Designs bereitstellen.

Methode

• Wählen Sie eine tatsächlich bereitgestellte Website, die Ihnen gefällt. (z. B. linear.app, stripe.com, toss.im usw.)
• Weisen Sie Claude oder Grok an: "Analysiere die Layout-Struktur, Farbpalette, Typografie, Abstände und Komponentenstile dieser Website und organisiere sie in Design.md."

Prompt-Beispiel

Analysiere das Design von https://linear.app und schreibe ein Design.md-Dokument. Du musst die folgenden Punkte einbeziehen: 1. Gesamtlayout-Struktur (Platzierung von Header/Sidebar/Body/Footer) 2. Farbpalette (Primär-, Sekundär-, Hintergrund- und Textfarben in HEX-Codes) 3. Typografie (Schriftarten, Größensystem, Schriftgewichte) 4. Abstandsregeln (Abstandsskala) 5. Stile für Hauptkomponenten wie Buttons, Karten und Eingabeformulare 6. Dark-Mode-Unterstützung und Farbzuordnung

Tipps

• Wenn Sie ein Gespür für Design haben, können Sie, da der generierte Design.md-Inhalt alles in natürlicher Sprache beschrieben ist, diesen lesen und direkt in die gewünschte Richtung modifizieren/verfeinern. Dieses Dokument wird zum Standard für alle nachfolgenden UI-Implementierungen.
• Wenn Sie einfach sagen "Mach es wie diese Seite", variieren die Ergebnisse jedes Mal. Sie müssen es mit einem Dokument fixieren, um Konsistenz zu gewährleisten.

2. Entscheidungsbaum für die Tech-Stack-Empfehlung

Bestimmen Sie den Stack zuerst basierend auf der Art des Dienstes, den Sie erstellen möchten.

Allgemeine Server (Backend)-Prinzipien

• Es muss möglich sein, es direkt über die CLI in jeder lokalen Umgebung zu installieren und auszuführen.
• Die Laufzeitumgebung/Sprache sollte Node.js oder Python sein.
• Verwenden Sie Tools, die für stabile Bereitstellung und Unterstützung auf allen Betriebssystemen für Pakete/Ausführungsumgebungen verifiziert sind:
• Python → uv
• Node.js → npm

Datenbank-Auswahlkriterien

Detaillierte Prompt-Anweisungen (Wenn Sie Entwicklungskenntnisse haben)

Dieses Projekt ist eine Web-App. Konfiguriere das Frontend mit React, und es sollte sofort lokal mit npm run dev getestet werden können, mit einer Struktur, die eine stabile Bereitstellung ermöglicht. Konfiguriere das Backend mit Node.js, und da eine relationale DB benötigt wird, verwende MariaDB. Füge ein Setup-Skript hinzu, das direkt über die CLI in der lokalen Entwicklungsumgebung installiert/ausgeführt werden kann. Überprüfe diesen Inhalt und das Concept.md-Dokument, um ein ToDo.md-Dokument für die detaillierte technische Implementierung zu schreiben.

• Fahren Sie fort, indem Sie das Concept.md-Dokument mit diesem Prompt anhängen oder den Inhalt des Concept.md-Dokuments kopieren und einfügen.

Aber was, wenn ich ein Nicht-Entwickler bin, der das oben Genannte nicht weiß?

Geben Sie einfach integrierte Anweisungen wie diese:

Ich bin mir nicht sicher, wie ich dieses Projekt ausführen soll, also empfehle bitte einen Weg. Empfehle, ob eine Web-App besser ist, ob eine Installationsmethode für das Betriebssystem während der Entwicklung einfacher zu überprüfen ist oder ob es besser ist, es als mobile App zu bauen. Wenn es in einem Webbrowser angezeigt werden kann, konfiguriere das Frontend mit React; wenn es als mobile App bereitgestellt werden muss, konfiguriere das Frontend mit Flutter. Wenn es eine Methode ist, die lokal installiert werden muss, konfiguriere es mit npm oder uv, die einfach über die CLI bereitgestellt und installiert werden können. Richte eine Struktur ein, die eine stabile Bereitstellung ermöglicht. Ich bin mir nicht sicher, ob ein Backend benötigt wird, aber richte eine stabile Struktur für Node.js oder die Bereitstellung/Installation ein. Wenn eine DB benötigt wird, verwende MariaDB, wenn eine relationale erforderlich ist, und wenn es nur eine Key-Value-DB ist, verwende AWS DynamoDB lokal für die Entwicklung und konfiguriere es für eine einfache Bereitstellung auf AWS. Wenn es ein Format ist, das direkt über die CLI in einer lokalen Entwicklungsumgebung installiert/ausgeführt werden kann, füge alle Setup-Skripte hinzu. Empfehle einen solchen detaillierten technischen Stack, überprüfe diesen Inhalt und das Concept.md-Dokument und schreibe ein ToDo.md-Dokument für die detaillierte technische Implementierung.

3. Admin-Dashboard — Essenziell, wenn es einen Server gibt

Sie wissen vielleicht nicht, ob es ein Dienst mit einem Server ist, aber es ist normalerweise gut, eines zu bauen, damit der Entwickler den Betriebsstatus und den Fortschritt der gesamten App persönlich erfassen kann.

• Projekte mit einem Server sollten die Implementierung eines Admin-Dashboards als Standard enthalten.
• Mindestinhalte des Dashboards:
• Server-Health-Check
• Schlüsseldatenstatus (Kernmetriken wie Anzahl der Abonnenten, Anzahl der bearbeiteten Fälle usw.)
• Aktuelle Fehler/Logs
• Bearbeitungsfortschritt wichtiger Aufgaben (Batches, Warteschlangen usw.)

Prompt-Beispiel

Wenn dieser Dienst einen Server umfasst, füge ein Admin-Dashboard in den Entwicklungsplan ein. Das Dashboard sollte es ermöglichen, den Serverstatus, Kernmetriken und aktuelle Logs/Fehler zu überprüfen. Setze das Standard-Admin-Konto auf 'admin' mit dem Passwort '12345' und füge die Möglichkeit hinzu, das Passwort im Admin-Dashboard zu ändern. Überprüfe ToDo.md und nimm dies in den Entwicklungsplan auf, falls es für notwendig erachtet wird.

4. Finalisieren von ToDo.md — Modulweiser Entwicklungsplan

Die Grundlage der Programmierung ist die Modularisierung. Wenn Sie ToDo.md Inhalte hinzufügen, um vor dem Schreiben von Code in Module zu unterteilen, kann eine gute Architektur für die zukünftige Wartung erstellt werden.

Prompt-Beispiel

Überprüfe das ToDo.md-Dokument und verifiziere, ob es gemäß der folgenden Anleitung gut geschrieben ist, und modifiziere/ergänze fehlende Teile. ToDo.md Anforderungen: 1. Entwerfe das gesamte System so, dass es mit objektorientiertem Design modularisiert ist. 2. Gib die Rolle, den Input/Output und die Datenstruktur jedes Moduls klar an, um eine maximale Kapselung zu gewährleisten. 3. Erstelle eine Implementierungsreihenfolge als Checkliste (beginnend mit Modulen ohne Abhängigkeiten). 4. Füge das DB-Schema-Design hinzu. 5. Beschreibe, wann und wie nicht-technische Personen einfach testen können.

Zu überprüfende Punkte im fertigen ToDo.md:

1. Projektübersicht (ein Absatz)
2. Bestätigter Tech-Stack (Ergebnis des Entscheidungsbaums in Schritt 2)
3. Modulliste und detaillierte technische Spezifikationen für jedes Modul (Nicht-technische Personen könnten dies schwer verständlich finden)
4. Modulname und Rolle
5. Input/Output (API-Endpunkte und Request/Response-Formate)
6. Verwendete Datenstruktur / DB-Tabellen-(oder Sammlungs-)Design
7. Abhängigkeitsbeziehungen zu anderen Modulen
8. Implementierungsreihenfolge (in Checklistenform, in der Reihenfolge der Abhängigkeiten)
9. Überprüfe, ob jede Testmethode auf einem für mich verständlichen Niveau geschrieben ist.

Wichtig

• Sie müssen das generierte ToDo.md nicht unbedingt selbst lesen und überprüfen. Auch wenn es so scheint, als ob die Dinge gut laufen, wenn Sie sich perfekt vorbereiten, ist der Kern von Vibe Coding der Prozess, zuerst ein Ergebnis zu erstellen und es dann schrittweise zu modifizieren, um das zu bekommen, was Sie wollen – das ist der wertvollste und unterhaltsamste Teil.

Praxisteil: Einrichtung der Umgebung → GitHub → Start der Claude Code Entwicklung

Geschrieben, damit auch diejenigen, die zum ersten Mal Entwicklungstools installieren, folgen können.

• Wenn es Ihnen dennoch zu komplex erscheint und Sie nicht wissen, warum Sie es verwenden sollten, und Sie sich zu Tode langweilen, hören Sie sich bitte zuerst eine kostenlose Vorlesung unter dem folgenden Link an.

https://nomadcoders.co/git-for-beginners

5. Vorbereiten der Entwicklungsumgebung (Nur 2 Dinge installieren)

Wir werden zwei Dinge installieren.

Und Sie benötigen ein GitHub-Konto. Melden Sie sich kostenlos unter https://github.com an (E-Mail-Verifizierung abschließen). Die Verwendung von Claude Code oder Grok Build erfordert einen Claude-Bezahlplan (Pro/Max/Team) oder ein Grok-Bezahlkonto.

5-1. 🪟 Installationsschritte für Windows-Benutzer

① Git installieren

1. Gehen Sie in Ihrem Browser zu https://git-scm.com/download/win → Der Download startet automatisch.
2. Führen Sie das heruntergeladene Installationsprogramm aus.
3. Es erscheinen viele Installationsoptionen; klicken Sie einfach immer wieder auf "Weiter", wobei Sie alle Standardwerte beibehalten.
4. Wenn jedoch der Bildschirm "Choosing the default editor" erscheint, ist es gut, "Use Visual Studio Code as Git's default editor" auszuwählen (wenn Sie VS Code noch nicht installiert haben, ist die Standardeinstellung in Ordnung).
5. Überprüfen Sie die Installation: Starten Sie PowerShell über das Startmenü und geben Sie ein:

git --version

→ Wenn eine Version wie git version 2.xx.x erscheint, ist es ein Erfolg. Wenn nicht, versuchen Sie, PowerShell zu schließen und erneut zu öffnen.

② VS Code installieren

1. Gehen Sie zu https://code.visualstudio.com → Klicken Sie auf Download for Windows.
2. Führen Sie das Installationsprogramm aus → Klicken Sie weiter auf "Weiter". Aktivieren Sie jedoch diese beiden im Optionsbildschirm:
3. "Add to PATH"
4. "Add 'Open with Code' action to file/directory context menus"
5. Führen Sie VS Code nach der Installation aus. Wenn eine Benachrichtigung zur Installation des deutschen Sprachpakets auf dem ersten Bildschirm erscheint, können Sie es installieren.

5-2. 🍎 Installationsschritte für Mac-Benutzer

① Git installieren

1. Öffnen Sie Terminal: Cmd + Leertaste → "Terminal" eingeben → Enter.
2. Geben Sie ein:

git --version

1. Wenn die Version sofort erscheint, ist es bereits installiert → Gehen Sie zu ②. Wenn ein Popup zur Installationsanleitung ("Command Line Developer Tools...") erscheint, klicken Sie auf "Installieren" und warten Sie. (Dies ist die Git-Installation).
2. Überprüfen Sie nach Abschluss erneut mit git --version.

② VS Code installieren

1. Gehen Sie zu https://code.visualstudio.com → Klicken Sie auf Download for macOS.
2. Entpacken Sie die heruntergeladene Datei und ziehen Sie Visual Studio Code.app in den Ordner "Programme". (Wichtig! Verwenden Sie es nicht direkt aus dem Download-Ordner).
3. Führen Sie VS Code aus dem Ordner "Programme" aus.

5-3. (Allgemein) Meinen Namen in Git registrieren — Nur beim ersten Mal

Diese Einstellung dient dazu, in Commits einen Vermerk zu hinterlassen, "wer daran gearbeitet hat". In PowerShell (Windows) oder Terminal (Mac):

git config --global user.name "Ihr Name" git config --global user.email "ihre-github-email@example.com"

Geben Sie die gleiche E-Mail-Adresse ein, die Sie für die Anmeldung bei GitHub verwendet haben.

6. Ein GitHub-Repository erstellen und mit VS Code mit meinem PC verbinden

Stellen Sie sich ein "Repository" als einen Cloud-Ordner vor, der ein Projekt enthält. Der Ablauf ist: Ein leeres Repository auf der GitHub-Website erstellen → Es mit VS Code auf meinen PC klonen → Planungsdokumente hochladen → Dieses Repository mit Claude Code Web verbinden.

6-1. Ein Repository auf der GitHub-Website erstellen

1. Melden Sie sich bei https://github.com an.
2. Klicken Sie auf die + Schaltfläche oben rechts → New repository.
3. Geben Sie wie folgt ein:
4. Repository name: Projektname (Englisch, Bindestriche anstelle von Leerzeichen. z. B. my-first-app)
5. Wählen Sie Private (Unternehmensprojekte müssen Private sein!)
6. Aktivieren Sie das Kontrollkästchen "Add a README file" ✅ ← Anfänger müssen dies aktivieren. Dies macht den nächsten Schritt (Klonen) einfacher.
7. Klicken Sie auf Create repository.
8. Klicken Sie auf der erstellten Repository-Seite auf die grüne <> Code Schaltfläche → Kopieren Sie die Adresse im HTTPS-Tab.

6-2. Mit VS Code auf meinen PC klonen

1. Führen Sie VS Code aus.
2. Strg + Umschalt + P (Cmd + Umschalt + P auf dem Mac) → Die Befehlspalette öffnet sich.
3. Geben Sie clone ein → Wählen Sie "Git: Clone".
4. Fügen Sie die kopierte Repository-Adresse ein und drücken Sie Enter.
5. Sie können auch "Clone from GitHub" auswählen → Wenn sich der Browser öffnet und nach GitHub-Login/-Autorisierung fragt, bestätigen Sie dies. (Nur beim ersten Mal).
6. Wählen Sie einen Speicherort für das Projekt (z. B. ist es gut, einen Ordner Dokumente/Projekte zu erstellen).
7. Wenn das Klonen abgeschlossen ist, erscheint eine "Öffnen"-Benachrichtigung unten rechts → Klicken Sie darauf.
8. Wenn Sie README.md im Datei-Explorer auf der linken Seite sehen, Erfolg! 🎉 Dieser Ordner ist nun der Arbeitsordner, der zwischen meinem PC und GitHub verbunden ist.

6-3. Planungsdokumente hochladen — Concept.md, Design.md, ToDo.md

Claude Code Web kann Dateien im Repository lesen. Daher ist das Ablegen von Planungsdokumenten im Repository dasselbe wie "Dokumente hochladen".

1. Klicken Sie mit der rechten Maustaste auf eine leere Stelle im VS Code-Datei-Explorer → New File → Geben Sie den Namen Concept.md ein.
2. Fügen Sie die vorbereitete App-Beschreibung ein und speichern Sie (Strg+S / Cmd+S).
3. Erstellen und fügen Sie auf die gleiche Weise Design.md (falls es ein UI gibt) und ToDo.md Dateien ein.
4. Laden Sie nun auf GitHub hoch (Commit & Push) — verwenden Sie die Methode in 6-4.

6-4. Committen und Pushen in VS Code — Nur mit der Maus

1. Wenn Sie eine Datei speichern, erscheint ein Zahlen-Badge auf dem zweigförmigen Symbol (Quellcodeverwaltung) links in VS Code.
2. Klicken Sie auf dieses Symbol → Sie sehen eine Liste der geänderten Dateien.
3. Schreiben Sie in das Nachrichten-Eingabefeld oben eine Zeile darüber, was Sie getan haben. (z. B. Planungsdokumente hinzugefügt).
4. Klicken Sie auf die ✔ Commit Schaltfläche → Speichern auf meinem PC abgeschlossen.
5. Wenn ein Popup "Es gibt keine bereitgestellten Änderungen" erscheint, klicken Sie auf "Ja", um alles zu committen.
6. Klicken Sie dann auf die Sync Changes Schaltfläche → Hochladen (Push) auf GitHub abgeschlossen.
7. Aktualisieren Sie das Repository auf der GitHub-Website, um das soeben hochgeladene Concept.md zu sehen. Jetzt kann Claude Code Web dieses Dokument ebenfalls lesen.

Pullen (Herunterladen) erfolgt ebenfalls auf demselben Bildschirm: Wenn es Änderungen gibt, die Claude in der Cloud hochgeladen hat, erledigt die Sync Changes Schaltfläche sowohl das Herunterladen als auch das Hochladen.

7. Das Repository mit Claude Code Web verbinden und die Entwicklung starten

Öffnen Sie nun Claude Code Web in Ihrem Browser und verbinden Sie das soeben erstellte GitHub-Repository.

7-1. Claude Code Web ↔ GitHub-Repository verbinden (Nur beim ersten Mal)

1. Rufen Sie https://claude.ai/code auf → Melden Sie sich mit Ihrem Claude-Konto an.
2. Wenn Sie es zum ersten Mal aufrufen, erscheint eine Connect GitHub-Anleitung → Folgen Sie der Anleitung.
3. Sie werden zur GitHub-Seite weitergeleitet, und der Claude GitHub App-Installationsbildschirm erscheint:
4. Wählen Sie Ihr GitHub-Konto (oder Ihre Organisation).
5. Wählen Sie den Zugriffsbereich: Es wird empfohlen, "Only select repositories" auszuwählen und das in 6-1 erstellte Repository anzugeben.
6. Klicken Sie auf Installieren / Autorisieren.
7. Die Rückkehr zu Claude schließt die Verbindung ab. Wenn der Bildschirm für die Umgebungseinstellungen erscheint, belassen Sie es bei Standard.
8. Wenn Sie eine neue Sitzung (Aufgabe) starten, wählen Sie Ihr Repository aus der Repository-Auswahlliste aus, geben Sie einen Prompt ein, und die Aufgabe beginnt.

7-2. Verstehen, wie Claude Code und Grok Build Web funktionieren (Wichtig!)

Claude Code und Grok Build Web arbeiten auf einem virtuellen Computer in der Cloud, nicht auf meinem PC. Der Ablauf ist:

① Ich gebe einen Prompt ein

↓

② Claude Code/Grok Build klont mein Repository in der Cloud und schreibt Code

↓

③ Pusht das Ergebnis als "neuen Aufgaben-Branch" auf GitHub

↓

④ Ich pullen diesen Branch auf meinen PC, um zu testen, oder überprüfe Änderungen über einen Pull Request auf GitHub

↓

⑤ Wenn es mir gefällt, merge ich in main.

• Da es Ergebnisse immer in einen neuen Branch hochlädt, ohne den main-Branch direkt zu berühren, besteht keine Sorge, dass vorhandener Code beschädigt wird. (Grok Build arbeitet auf dem main-Branch, kann aber rückgängig gemacht werden, also machen Sie sich keine Sorgen über Fehler).

7-4. Prompt für den Entwicklungsstart

Sobald die drei Dokumente (Concept.md / Design.md / ToDo.md) in main bereit sind, starten Sie schließlich die Entwicklung in einer neuen Sitzung.

Entwickle dieses Projekt. Gehe basierend auf den folgenden Dokumenten im Repository vor: - Concept.md: Beschreibung der zu erstellenden App - ToDo.md: Modulweiser Entwicklungsplan (in dieser Reihenfolge implementieren) - Design.md: Designstandards (alle UIs folgen diesem Dokument)

Arbeitsregeln: 1. Gehe ein Modul nach dem anderen gemäß der Implementierungsreihenfolge in ToDo.md vor. 2. Wenn eine testbare Einheit abgeschlossen ist, lass mich über README oder Antwort wissen, wie ich sie auf meinem lokalen PC ausführen/testen kann. Da ich kein Entwickler bin, erkläre es gut, als würdest du einem Anfänger etwas beibringen. 3. Markiere abgeschlossene Elemente mit einem Häkchen in ToDo.md. 4. Sage mir den Namen des Aufgaben-Branches und pushe mit einer einprägsamen Commit-Nachricht. 5. Wenn es unklare Teile gibt, rate nicht; frage mich.

7-5. Während der Entwicklung wiederholter Zyklus

① Web Claude Code implementiert ein Modul in einem Aufgaben-Branch → Push

↓

② Pullen Sie diesen Aufgaben-Branch auf meinen PC (VS Code) und führen Sie ihn direkt aus/testen Sie ihn

↓

③ Wenn es ein Problem gibt → Kopieren Sie die gesamte Fehlermeldung und fügen Sie sie in die Web-Sitzung ein

Wenn es kein Problem gibt → "Gut, mach mit der nächsten Entwicklung weiter"

↓

Zurück zu ① für das nächste Modul

↓

④ Sobald alle Funktionen abgeschlossen und Tests bestanden sind

→ Über einen Pull Request in den main-Branch mergen

→ Die Bereitstellung erfolgt immer basierend auf main

8. Branch — In Aufgaben-Branches testen und für die Bereitstellung in main mergen

8-1. Was ist ein Branch?

• main-Branch = Das Schaufenster des fertigen Produkts, das immer gut funktioniert. Die Bereitstellung erfolgt immer basierend auf main.
• Aufgaben-Branch (z. B. claude/feature-login) = Eine Baustelle, die durch Kopieren von main erstellt wurde. Sie können hier so viel bauen und kaputt machen, wie Sie möchten; main ist sicher.

Claude Code Web erstellt immer einen neuen Aufgaben-Branch und pusht die Ergebnisse. Sie müssen also nur drei Dinge wissen:

1. Wie Sie überprüfen, in welchem Branch sich mein Ordner gerade befindet.
2. Wie Sie den von Claude gepushten Aufgaben-Branch zum Testen auf meinen PC pullen.
3. Wie Sie in main mergen und bereitstellen, wenn Sie fertig sind.

8-2. Überprüfen, in welchem Branch Sie sich befinden

• Schauen Sie auf die Statusleiste ganz unten links im VS Code-Bildschirm. Der Branchname wird neben dem Branch-Symbol angezeigt. (z. B. main oder claude/feature-login).

8-3. Von Claude Code/Grok Build erstellte Aufgaben-Branches zum Testen auf meinen PC pullen

Wenn Web Claude Code sagt "Ich habe in den Branch OO gepusht", holen Sie diesen Branch auf meinen PC, um zu testen. Grok Build hat oben rechts auf dem Web-Bildschirm eine 'Push to Github'-Schaltfläche, drücken Sie diese, um zu pushen.

Mit VS Code (Nur mit der Maus):

1. Klicken Sie auf den Branchnamen unten links → Die Branch-Liste öffnet sich.
2. Wenn der neue Branch nicht sichtbar ist, führen Sie ... Menü → Fetch im Quellcodeverwaltungs-Tab aus und versuchen Sie es erneut.
3. Wählen Sie Claudes Aufgaben-Branch, der mit origin/claude/... beginnt, aus der Liste → Ihr Ordner wechselt in den Zustand dieses Branches.

8-4. In main mergen, wenn fertig — Pull Request

Wenn die Funktionen abgeschlossen sind und die Tests im Aufgaben-Branch bestanden wurden, mergen Sie über einen Pull Request (PR) auf der GitHub-Website in main.

1. Rufen Sie Ihr Repository auf GitHub auf → Klicken Sie auf den Pull requests-Tab.
2. Klicken Sie auf den PR, den Claude erstellt hat. Wenn keiner vorhanden ist, New pull request → base: main, compare: Aufgaben-Branch auswählen → Create pull request.
3. Klicken Sie auf Merge pull request → Confirm merge → In main übernommen!
4. Aktualisieren Sie den main-Branch Ihres PCs auf den neuesten Stand:
5. Klicken Sie unten links in VS Code auf den Branch → Wählen Sie main → Sync Changes im Quellcodeverwaltungs-Tab.

9. Tipps für Prompts (Allgemein)

Die Qualität von Vibe Coding ist proportional zur Qualität der Prompts.

1. Geben Sie an, was NICHT getan werden soll — "Ändere Code nicht willkürlich, bis ich zustimme", "Füge keine Bibliotheken hinzu, verwende nur den vorhandenen Stack."
2. Ein Modul nach dem anderen — Die Qualität sinkt, wenn Sie die gesamte App in einem Prompt anfordern. Fragen Sie in kleinen Teilen gemäß der ToDo.md-Reihenfolge.
3. Fehler so einfügen, wie sie sind — Fassen Sie Fehlermeldungen nicht zusammen; kopieren Sie die gesamte Terminalausgabe.
4. Lassen Sie Claude fragen, wenn es mehrdeutig ist — Fügen Sie "Wenn es unklare Teile gibt, rate nicht; frage mich" in den Prompt ein.
5. Kommunizieren Sie basierend auf Dokumenten — "Wie ich bereits sagte" ❌ → "Gemäß dem Design.md-Design" ✅. Dokumente im Repository sind viel stabiler als das Gedächtnis des Gesprächs.

Ende.

Wie der alte Morpheus sagte:

"Neo. Ich kann dir nur die Tür zeigen. Du bist derjenige, der hindurchgehen muss."