Claude Code Tutorial: Von Null auf produktiv an einem Tag

Was dieses Tutorial abdeckt

Das ist die Anleitung, die ich mir gewünscht hätte, als ich mit Claude Code angefangen habe. Nicht die Dokumentation — Anthropics Docs sind solide — sondern der praktische Workflow, der den Unterschied macht zwischen "interessantes Experiment" und "tägliches Produktionswerkzeug".

Ich nutze Claude Code jeden Tag für Kundenprojekte. Shopify-Shops, Next.js-Anwendungen, API-Integrationen. Der Produktivitätsunterschied im Vergleich zu meinem früheren Workflow ist deutlich genug, dass ich meine gesamte Projektstruktur umgestellt habe.

Dieses Tutorial bringt dich von der Installation bis zur ersten produktiven Session — inklusive des Kontext-Setups, das die meisten Tutorials überspringen, das aber alles Weitere erst effektiv macht.

---

Installation: Drei Minuten

Voraussetzungen

• Node.js 18+ (prüfen mit node --version)
• Git im Projekt initialisiert (Claude Code nutzt Git zur Änderungsverfolgung)
• Ein Anthropic-Account mit aktivem Abonnement

Installieren und starten

# Global installieren
npm install -g @anthropic-ai/claude-code

# Ins Projekt wechseln
cd dein-projekt/

# Claude Code starten
claude

Beim ersten Start öffnet sich der Browser zur Authentifizierung. Danach bist du in einer interaktiven Session. Claude Code sieht dein gesamtes Projektverzeichnis — jede Datei, jeden Ordner.

Test: Gib what files are in this project? ein und drücke Enter. Claude Code sollte deine Projektstruktur auflisten. Wenn ja, bist du startklar.

---

Erste Session: Die Grundlagen

Claude Code ist eine Konversation im Terminal. Du beschreibst, was passieren soll, und das System liest Dateien, schreibt Code, führt Befehle aus und berichtet zurück.

Die wichtigsten Befehle

Eingabe	Was passiert
Eine Aufgabenbeschreibung	Claude Code plant und führt die Arbeit aus
/help	Zeigt verfügbare Befehle
/compact	Komprimiert die Konversation für mehr Kontext
Ctrl+C	Bricht die aktuelle Operation ab

Fang einfach an

Starte nicht mit "refactore mein gesamtes Auth-System." Beginne mit etwas Konkretem und Überprüfbarem:

> Read the README and summarize this project's architecture.

Das macht zwei Dinge: Es zeigt dir, wie Claude Code deinen Code interpretiert, und es verrät, ob der Projektkontext klar genug für effektive Arbeit ist.

Dann eine echte Aufgabe

> Find all TODO comments in the codebase and list them
  with file paths and line numbers.

Oder etwas Nützlicheres:

> The login form doesn't validate email format before submission.
  Add client-side email validation to the login component.

Beobachte, was passiert. Claude Code schlägt nicht nur eine Änderung vor — es liest die Komponente, versteht das bestehende Validierungsmuster, schreibt den Code und kann den Linter oder Tests laufen lassen, um das Ergebnis zu verifizieren.

---

Die Erkenntnis, die die meisten Tutorials auslassen: Projektkontext

Hier wird Claude Code von mittelmäßig zu exzellent.

Ohne Kontext ist Claude Code ein intelligenter Assistent, der dein Projekt in jeder Session von Grund auf neu verstehen muss. Mit Kontext ist es ein Teammitglied, das die Codebasis, die Konventionen und die Entscheidungen dahinter bereits kennt.

CLAUDE.md: Das Gedächtnis deines Projekts

Erstelle eine CLAUDE.md-Datei im Projektstamm. Das ist die einzelne wirkungsvollste Maßnahme.

# CLAUDE.md — Projektname

## Überblick
- Was: E-Commerce-Shop auf Next.js + Shopify
- Stack: Next.js 14, TypeScript, Tailwind CSS, Shopify Storefront API
- Hosting: Vercel, Auto-Deploy vom main-Branch

## Konventionen
- Alle Komponenten nutzen TypeScript Strict Mode
- CSS über Tailwind Utility-Klassen, keine eigenen CSS-Dateien
- API-Routes folgen REST-Benennung: /api/resource/[id]
- Tests mit Vitest, ausführen mit `npm test`

## Architekturentscheidungen
- SSG für Produktseiten (Revalidierung alle 60s)
- Client-seitiger Warenkorb mit Shopify Buy SDK
- i18n über next-intl (EN Standard, DE sekundär)

## Befehle
- `npm run dev` — Dev-Server starten
- `npm run build` — Produktions-Build
- `npm run lint` — ESLint-Check

## Bekannte Probleme
- Shopify API Rate Limit: max 2 Requests/Sekunde auf Storefront API
- Bildoptimierung: Shopify CDN-URLs verwenden, keine lokalen Imports
- Cart API erfordert gültige Checkout-Session — mit echten Produkten testen

Die Qualität dieser Datei bestimmt direkt die Qualität von Claude Codes Output. Jede Konvention, die du dokumentierst, wird automatisch eingehalten.

Was gehört in CLAUDE.md?

Aufnehmen	Weglassen
Tech-Stack und Versionen	Offensichtliches aus package.json
Architekturentscheidungen und warum	Generische Best Practices
Projektspezifische Konventionen	Standard-Sprachkonventionen
Wichtige Befehle	Universell bekannte Befehle
Bekannte Fallstricke	Bereits behobene Bugs
Externe Integrationen und deren Eigenheiten	Vollständige API-Dokumentation

Das "Warum" ist wichtiger als das "Was." Claude Code kann deinen Code lesen und sehen, was du nutzt. Es kann nicht deine Gedanken lesen und verstehen, warum du es gewählt hast. "Wir nutzen SSG, weil sich Produktseiten seltener als stündlich ändern und SSR 200ms Latenz hinzufügt" ist nützlicher als "Wir nutzen SSG."

---

Echter Workflow: So sieht eine produktive Session aus

Hier ein realistisches Beispiel, kein Demo-Szenario:

Aufgabe: Newsletter-Anmeldung im Footer

> Add a newsletter signup form to the footer.
  It should collect email addresses and send them to our
  /api/newsletter endpoint.
  Match the existing form styling from the contact page.
  Add loading and success states.

Claude Code wird:

1. Die bestehende Footer-Komponente lesen
2. Das Kontaktformular als Styling-Referenz lesen
3. Die API-Endpunkt-Struktur prüfen
4. Die Newsletter-Komponente erstellen
5. Sie in den Footer einbauen
6. Loading-, Erfolgs- und Fehlerzustände implementieren

Ein Prompt. Mehrere Dateien. Konsistent mit bestehenden Patterns, weil es sie vorher gelesen hat.

Aufgabe: Produktionsfehler debuggen

> Users report that the cart total sometimes shows the wrong
  currency on the checkout page. The store supports EUR and USD.
  Find the bug and fix it.

Claude Code liest die Warenkorb-Logik, verfolgt die Währungsbehandlung durch die Komponenten, identifiziert, wo der Währungskontext verloren geht, und implementiert einen Fix. Danach kann es die Tests laufen lassen, um sicherzustellen, dass nichts anderes kaputt ist.

Aufgabe: Dateiübergreifendes Refactoring

> Rename the "ProductCard" component to "ProductTile" everywhere.
  Update all imports, all references in tests, and the
  component's own file name.

Hier zeigt sich die Stärke des Agenten-Ansatzes. Ein Suchen-und-Ersetzen erwischt die einfachen Fälle, übersieht aber dynamische Imports, Testbeschreibungen, Kommentare und Dokumentationsverweise. Claude Code liest die tatsächliche Verwendung und behandelt jeden Fall korrekt.

---

MCP: Verbindung zum Ökosystem

MCP-Server (Model Context Protocol) erweitern, worauf Claude Code zugreifen kann. Sie sind wie Plugins, die Claude Code Einblick in externe Systeme geben.

Nützliche MCP-Integrationen

MCP-Server	Funktion	Beispiel
GitHub	Issues, PRs, Repository-Daten lesen	"Lies die letzten 5 Issues und fasse sie zusammen"
Figma	Zugriff auf Designdateien und Komponenten	"Implementiere diesen Figma-Frame als React-Komponente"
Context7	Aktuelle Library-Dokumentation abrufen	"Wie funktionieren Parallel Routes im Next.js App Router?"
Shopify Dev	Shopify API-Docs und GraphQL-Schema	"Welche Felder hat das Product-Objekt?"

MCP-Server einrichten

MCP-Server werden in der Claude-Code-Konfiguration definiert. Beispiel für einen Dokumentationsserver:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/context7-mcp"]
    }
  }
}

Nach der Konfiguration kann Claude Code aktuelle Dokumentation während einer Session abrufen — kein Arbeiten mehr mit veralteten Trainingsdaten, wenn das Framework gerade eine neue Version veröffentlicht hat.

---

Häufige Fehler und wie man sie vermeidet

Fehler 1: Vage Aufgabenbeschreibungen

Schlecht:

> Mach die Homepage besser.

Gut:

> The homepage hero section loads slowly on mobile.
  Optimize the hero image loading and reduce the
  initial JavaScript bundle for above-the-fold content.

Spezifität ist kein Mikromanagement. Es gibt Claude Code die Einschränkungen, die es braucht, um gute Entscheidungen zu treffen.

Fehler 2: CLAUDE.md überspringen

Ohne Projektkontext macht Claude Code vernünftige Annahmen über deine Konventionen. Mit einer gut geschriebenen CLAUDE.md hält es deine Konventionen exakt ein. Die 30 Minuten für diese Datei sparen Stunden an Korrekturen.

Fehler 3: Diffs nicht reviewen

Claude Code ist nicht unfehlbar. Nach jeder Aufgabe:

# Prüfen, was sich geändert hat
git diff

# Wenn es gut aussieht
git add -A && git commit -m "Add newsletter signup component"

# Wenn etwas nicht stimmt
git checkout -- .

Vertrauen ist gut, Kontrolle ist besser. Der Git-Workflow ist dein Sicherheitsnetz.

Fehler 4: Alles in einem Prompt erledigen wollen

Teile komplexe Arbeit in logische Schritte. Nicht weil Claude Code keine Komplexität bewältigen kann — das kann es — sondern weil kleinere Schritte leichter zu reviewen und zu korrigieren sind.

# Schritt 1
> Add the database schema for user preferences.

# Reviewen, dann Schritt 2
> Add the API endpoint for updating preferences.

# Reviewen, dann Schritt 3
> Add the settings UI that calls the preferences API.

Jeder Schritt baut auf verifizierter Arbeit auf.

---

Tipps für den täglichen Einsatz

Starte jede Session mit Kontext. Wenn du Arbeit von gestern fortsetzt, beschreibe kurz, was erledigt wurde und was ansteht. Claude Code mit einer CLAUDE.md weiß schon viel, aber Session-Level-Kontext hilft.

Nutze /compact proaktiv. Lange Sessions sammeln Kontext an. Wenn die Antworten ungenauer werden, komprimiere die Konversation, um das Kontextfenster freizuräumen.

Committe nach Meilensteinen. Nach jeder erfolgreichen Aufgabe committen. Das gibt dir saubere Rollback-Punkte und hilft Claude Code zu verstehen, was bereits erledigt ist.

Lass Claude Code seine eigene Arbeit verifizieren. Baue Verifikation in die Aufgabenbeschreibung ein:

> Add input validation to the registration form.
  Run the existing tests afterward to make sure nothing broke.

Lies den Diff vor dem Commit. Das dauert 30 Sekunden und fängt gelegentliche Grenzfälle ab. Die wichtigste Gewohnheit für produktives Arbeiten mit Claude Code.

---

Vom Tutorial zum täglichen Werkzeug

Der Sprung von "Claude Code ausprobieren" zu "produktiv damit arbeiten" kommt auf drei Dinge an:

1. Eine gute CLAUDE.md, die Konventionen und Entscheidungen des Projekts festhält
2. Klare Aufgabenbeschreibungen, die die richtigen Rahmenbedingungen setzen
3. Eine Review-Gewohnheit, die Probleme früh über Git-Diffs erkennt

Wenn du diesem Tutorial gefolgt bist, hast du alle drei. Der Rest ist Übung — je mehr Sessions du fährst, desto besser wirst du im Formulieren von Aufgaben und im Pflegen des Kontexts.

Für den Vergleich zwischen Claude Code und anderen KI-Coding-Tools siehe Cursor vs Claude Code: Ehrlicher Vergleich. Für einen tieferen Blick auf den Paradigmenwechsel hinter Tools wie Claude Code lies Was ist Agentic Coding?.