Das ist die Lektion, in der es spannend wird. Du lernst gleich das Tool kennen, das Vibe Coding moeglich macht -- Claude Code.
Was ist Claude Code?
Claude Code ist Anthropics Terminal-nativer KI-Coding-Assistent. Anders als beim Chatten mit Claude in einem Browserfenster laeuft Claude Code direkt auf deinem Computer. Es kann deine Projektdateien lesen, deine Codebasis verstehen und echten Code in dein Dateisystem schreiben.
Konzept
Stell dir Claude Code als einen erfahrenen Entwickler vor, der neben dir sitzt -- einen, der sich nie ueber einfache Fragen aergert, so schnell arbeitet wie du tippen kannst und die Dokumentation fuer jedes populaere Framework gelesen hat. Du beschreibst, was du willst; es baut es.Der wesentliche Unterschied zum browserbasierten KI-Chat:
- Es sieht dein Projekt -- es weiss, welche Dateien du hast, welcher Code geschrieben ist, welche Tools installiert sind
- Es schreibt echte Dateien -- keinen Code in einem Chat-Fenster, den du kopieren musst, sondern tatsaechliche Dateien auf deinem Computer
- Es fuehrt Befehle aus -- es kann Pakete installieren, Server starten, Tests ausfuehren
- Es fragt um Erlaubnis -- du ueberpruefst und genehmigst Aenderungen immer, bevor sie vorgenommen werden
Claude Code installieren
Schritt 1: Installation ueber dein Terminal
Oeffne dein Terminal und fuehre aus:
npm install -g @anthropic-ai/claude-code
Dies installiert Claude Code global auf deinem Rechner.
Schritt 2: Authentifizierung
Navigiere zu deinem Projektordner und fuehre aus:
cd waitlist-wizard
claude
Beim ersten Ausfuehren oeffnet Claude Code deinen Browser, um dich mit deinem Claude Pro Konto zu authentifizieren. Melde dich an und autorisiere die Verbindung.
Schritt 3: Ueberpruefen
Nach der Authentifizierung solltest du den Claude Code Prompt in deinem Terminal sehen. Tippe eine Nachricht zum Testen:
What's in this folder?
Claude sollte antworten, indem es die Dateien in deinem waitlist-wizard-Verzeichnis auflistet (nur die README.md aus der letzten Lektion).
Probier es aus
Fuehreclaude in deinem Terminal aus und tippe dann: "Create a file called index.html with a simple hello world page". Beobachte, wie Claude die Datei erstellt, und oeffne sie dann in VS Code -- sie ist wirklich da!
Das Berechtigungssystem verstehen
Claude Code arbeitet mit einem Review-und-Genehmigung-Workflow. Wenn es eine Datei erstellen oder aendern moechte, wird es:
- Dir genau zeigen, was es vorhat
- Auf deine Genehmigung warten, bevor Aenderungen vorgenommen werden
- Erst fortfahren, wenn du zustimmst
Das bedeutet: Du hast immer die Kontrolle. Claude aendert deine Dateien nicht ohne deine ausdrueckliche Erlaubnis.
Fuer einfache Aufgaben, bei denen du dem Vorgang vertraust, kannst du den "Accept all"-Modus waehlen -- aber als Anfaenger ist es gute Praxis, jede Aenderung zu ueberpruefen, damit du lernst, was gebaut wird.
Die CLAUDE.md-Datei
Jedes Projekt kann eine CLAUDE.md-Datei haben -- eine Art "Projektgedaechtnis", das Claude ueber deine Praeferenzen, deinen Tech Stack und deine bevorzugte Arbeitsweise informiert.
Probier es aus
Tippe in deiner Claude Code Sitzung: /initDas erstellt eine CLAUDE.md-Datei. Bearbeite sie dann (in VS Code oder ueber Claude), um Folgendes einzufuegen:
This is a beginner project. Explain changes simply. Use Next.js with TypeScript and Tailwind CSS.
Claude liest diese Datei zu Beginn jeder Konversation, sodass es immer den Kontext deines Projekts kennt.
Plan Mode: Erst denken, dann bauen
Eines der maechtigsten Features von Claude Code ist der Plan Mode. Anstatt direkt in den Code zu springen, bittet der Plan Mode Claude, das Problem zu analysieren und zuerst Schritte zu skizzieren.
Wann du den Plan Mode nutzen solltest:
- Komplexe Features, die mehrere Dateien betreffen
- Alles, worueber du unsicher bist
- Wenn du den Ansatz verstehen willst, bevor du dich festlegst
Wann du ihn ueberspringen kannst:
- Einfache Aenderungen in einer Datei
- Schnelle Fixes und kleine Anpassungen
Um den Plan Mode zu starten, tippe /plan gefolgt von deiner Anfrage:
/plan Add an email signup form to the landing page that validates the email and shows a success message
Claude antwortet mit einem Schritt-fuer-Schritt-Plan. Du kannst den Plan diskutieren, aendern oder genehmigen, bevor Code geschrieben wird.
Wichtige Befehle -- Spickzettel
| Befehl | Was er tut |
|---|---|
/help |
Alle verfuegbaren Befehle anzeigen |
/clear |
Neue Konversation starten |
/compact |
Konversation zusammenfassen, um Kontext zu sparen |
/plan |
Plan Mode starten -- erst denken, dann bauen |
/model |
Zwischen Sonnet (schnell) und Opus (gruendlich) wechseln |
Pro-Tipp
Nutze Sonnet fuer schnelle Aufgaben wie einen Tippfehler beheben oder ein einfaches Element hinzufuegen. Nutze Opus fuer komplexe Features, knifflige Debugging-Probleme oder wenn Sonnets Ausgabe nicht ganz passt. Sonnet ist schneller und guenstiger; Opus ist intelligenter und gruendlicher.Deine erste echte Interaktion
Lass uns etwas Echtes machen. Probiere in deiner Claude Code Sitzung diesen Prompt:
Delete the index.html file and replace it with a proper Next.js project.
We'll set that up in the next lesson, so for now, just clean up.
Claude wird die Testdatei entfernen und dein Projekt fuer den naechsten Schritt vorbereiten.
Ehrlicher Hinweis
Claude Code ist dein Co-Pilot, nicht dein Autopilot. Je besser du kommunizierst, was du willst, desto besser sind die Ergebnisse. Vage Prompts liefern vagen Code. Spezifische, beschreibende Prompts liefern genau das, was du brauchst. Wir ueben diese Faehigkeit im gesamten Kurs.Wichtigste Erkenntnis
Claude Code ist installiert, authentifiziert und einsatzbereit. Du hattest dein erstes Gespraech, hast deine erste Datei erstellt und die wichtigsten Befehle gelernt. Ab jetzt ist Claude dein Partner beim Bau von Waitlist Wizard.