Zum Inhalt springen
Fortgeschritten ⏱ 45 Min. 🔨 claude-ai

Claude Code lokal — dein Snake-Spiel wird besser

Dein Ziel nach diesem Tutorial:

Du installierst Claude Code, verbindest es mit deinem Pro-Abo und upgradest dein Snake-Spiel mit Highscore, Leveln und einem cleanen Design

Tutorial teilen:

In Lektion 1 hast du Snake gebaut — copy-paste, Browser, kostenloser Account. Jetzt kommt der Game-Changer. Claude Code läuft im Terminal und schreibt Dateien direkt auf deinem Rechner. Kein Copy-Paste, kein manuelles Einfügen — Claude Code öffnet deine Datei, macht die Änderung, fertig. Das ist der Unterschied zwischen einem Prototypen-Workflow und einem echten Entwicklungsworkflow.


Stufe 1: Anfänger — Installation und erste Session (15 Min.)

Was kostet das?

Bevor du anfängst: ein ehrlicher Überblick über die Kosten.

Claude Pro: 20 $/Monat — Claude Code ist inklusive, keine Überraschungen. Du zahlst einen festen Betrag und kannst Claude Code so intensiv nutzen, wie das Nutzungsfenster erlaubt.

API-Key: vermeiden für Einsteiger — der API-Key rechnet pro Token ab. Ein entspannter Nachmittag Debuggen kann schnell 5–15 € kosten. Für gelegentliche Nutzung ist Pro die bessere Wahl.

⚠️ API-Key-Falle: Wenn du irgendwann einen API-Key für ein anderes Projekt gesetzt hast, greift Claude Code automatisch darauf zurück — auch wenn du ein Pro-Abo hast. Prüfe das jetzt:

echo $ANTHROPIC_API_KEY

Wenn der Befehl etwas ausgibt, entferne die Variable für die aktuelle Terminal-Session:

unset ANTHROPIC_API_KEY

Installation Schritt für Schritt

1. Node.js installieren — falls noch nicht vorhanden. Prüfen im Terminal:

node --version

Wenn du eine Versionsnummer siehst (z.B. v20.11.0), ist Node.js installiert. Andernfalls: nodejs.org → LTS-Version herunterladen und installieren.

2. Claude Code installieren:

npm install -g @anthropic-ai/claude-code

3. Erste Session starten:

claude

4. Ein Browser öffnet sich — melde dich mit deinem Claude Pro-Account an.

5. Zurück im Terminal: Claude Code ist bereit. Du siehst einen Eingabeprompt und kannst direkt loslegen.

Was du jetzt siehst: Im Terminal erscheint ein Prompt wie >. Dort schreibst du deine Nachrichten, Enter schickt sie ab. Claude Code antwortet direkt im Terminal — manchmal mit Text, manchmal mit der Ankündigung, welche Dateien es lesen oder schreiben will. Mit /exit beendest du die Session.

Erste Unterhaltung mit Claude Code
Was kannst du auf meinem Rechner tun, was du im Browser nicht kannst? Erkläre es kurz in 3 Punkten.
Funktioniert mit Claude Code im Terminal

Browser vs. Terminal im Vergleich

claude.ai BrowserClaude schreibtCode als TextDu kopierstund fügst einTesten → repeat3 Schrittepro ÄnderungSchleifeClaude Code TerminalClaude Codeliest Datei direktSchreibt direktin die DateiTesten → fertig

Stufe 2: Fortgeschritten — Dein Snake-Spiel upgraden (20 Min.)

Vorbereitung

Bevor du Claude Code startest, richte deinen Projektordner ein:

  1. Erstelle einen Ordner, z.B. snake-projekt
  2. Verschiebe deine snake.html aus Lektion 1 in diesen Ordner
  3. Öffne das Terminal und navigiere in den Ordner:
    cd ~/Desktop/snake-projekt
  4. Starte Claude Code aus diesem Ordner heraus:
    claude

Warum das Arbeitsverzeichnis wichtig ist: Claude Code liest und schreibt nur Dateien im aktuellen Verzeichnis und seinen Unterordnern. Wenn du Claude Code aus dem falschen Ordner startest, findet es deine snake.html nicht. Starte Claude Code immer aus dem Projektordner heraus.

Snake-Datei upgraden lassen
Ich habe eine Datei snake.html in diesem Verzeichnis. Öffne sie und mache folgende Verbesserungen: 1. Füge einen persistenten Highscore hinzu (mit localStorage, bleibt nach Browser-Schließen erhalten) 2. Füge Level hinzu: nach jeweils 5 gefressenen Äpfeln steigt das Level und die Geschwindigkeit erhöht sich um 20% 3. Verbessere das Design: dunkler Hintergrund (#1a1a2e), Schlange in Neon-Grün (#00ff88), Äpfel in Rot (#ff4757) 4. Zeige oben: Punkte | Level | Highscore Behalte die Spielmechanik identisch — nur diese Verbesserungen.
Funktioniert mit Claude Code im Terminal

Was Claude Code jetzt tut

Das ist der Moment, der den Unterschied macht: Claude Code zeigt dir an, welche Dateien es lesen oder schreiben möchte, und wartet auf deine Bestätigung. Du siehst etwas wie:

Read file: snake.html
Write file: snake.html

Du bestätigst mit Enter. Claude Code liest die Datei, analysiert den Code, macht alle vier Änderungen und speichert die aktualisierte Version — ohne dass du auch nur eine Zeile kopieren musst. Öffne snake.html im Browser und du siehst sofort das Ergebnis.

Wenn etwas nicht stimmt

Du beschreibst, was du siehst — nicht, was im Code falsch ist. Das ist der entscheidende Punkt: Claude Code liest die Datei und findet den Fehler selbst.

Fehler beschreiben und korrigieren lassen
Das Level erhöht sich korrekt, aber die Geschwindigkeit ändert sich nicht. Die Schlange bleibt immer gleich schnell. Bitte überprüfe die Geschwindigkeitslogik in snake.html und korrigiere das.
Funktioniert mit Claude Code im Terminal

Claude Code öffnet snake.html erneut, findet die fehlerhafte Logik und korrigiert sie direkt. Kein Copy-Paste, kein manuelles Einfügen.


Stufe 3: Experte — Teilen und nächste Projekte (10 Min.)

Dein Spiel online stellen mit GitHub Pages

Dein upgegradetes Snake-Spiel verdient ein Publikum. GitHub Pages hostet es kostenlos:

  1. Erstelle einen kostenlosen Account auf github.com
  2. Lege ein neues Repository an: “New repository” → Name vergeben → “Create repository”
  3. Lade snake.html hoch: “Add file” → “Upload files” → Datei hochladen → “Commit changes”
  4. Settings → Pages → Branch: main → Save
  5. Nach wenigen Minuten ist dein Spiel online unter https://[deinname].github.io/[reponame]/snake.html

Auch dabei kann dir Claude Code helfen. Starte claude im Projektordner und frag:

Erkläre mir Schritt für Schritt, wie ich meine snake.html auf GitHub Pages veröffentliche.

Was Claude Code noch kann

Das Snake-Projekt ist der Einstieg. Claude Code kann deutlich mehr:

  • Neue Dateien anlegen — CSS, JavaScript, HTML — alles direkt in deinem Projektordner
  • Mehrere Dateien gleichzeitig refactorn — z.B. Farben in allen HTML-Dateien auf einmal ändern
  • Bugs in bestehendem Code finden — auch Code, den du nicht selbst geschrieben hast
  • Einfache Web-Apps mit mehreren Seiten bauen — Startseite, Spielseite, Highscore-Seite

Von der Idee zum Online-Spiel

Terminalöffnen &Ordner wählenclaudestarten &einloggenÄnderungbeschreiben→ bestätigenClaude Codeschreibt DateidirektBrowsertesten → GitHubPages online

Nutzungslimits verstehen

Claude Pro verwendet ein 5-Stunden-Rollfenster: Ab der ersten Nachricht in einer Session läuft ein 5-Stunden-Timer. Für ein Tutorial-Projekt wie dieses reicht das locker — du schickst ein paar Prompts, keine Tausende. Wenn du das Limit erreichst: einfach warten, bis das 5-Stunden-Fenster abgelaufen ist und es sich zurücksetzt.


Lektion 3

Claude Code mit MCP-Servern

In Lektion 3 verbindest du Claude Code mit externen Tools — Web-Suche, GitHub, Datenbanken. Claude Code greift dann nicht nur auf lokale Dateien zu, sondern direkt auf das Internet. Das ist der Schritt vom lokalen Werkzeug zum vollständigen KI-Entwicklungspartner. (Kommt bald.)


Häufige Fragen

Funktioniert Claude Code auch auf Windows?

Ja — aber das Terminal-Setup ist anders. Statt der Windows-Eingabeaufforderung (cmd.exe) empfehlen wir Git Bash oder WSL (Windows Subsystem for Linux). Beides ist kostenlos. Git Bash ist der einfachere Einstieg: git-scm.com herunterladen, installieren, und du hast ein Unix-kompatibles Terminal unter Windows.

Brauche ich Programmierkenntnisse?

Nein — wie in Lektion 1, du beschreibst was du willst. Claude Code liest die Datei, versteht den Code und macht die Änderung. Du musst kein JavaScript verstehen, um dein Snake-Spiel zu verbessern.

Was passiert wenn Claude Code meine Datei kaputt macht?

Claude Code zeigt dir vor jeder Änderung an, was es schreiben will. Du kannst ablehnen. Falls doch etwas schiefgeht: Strg+Z im Texteditor macht die letzten Änderungen rückgängig. Oder du benennst vor wichtigen Änderungen einfach eine Sicherungskopie: snake-backup.html.

Kann ich Claude Code auch für andere Projekte als Spiele nutzen?

Ja — alles, was aus Textdateien besteht. Websites, Python-Skripte, Datenanalyse mit CSV-Dateien, einfache APIs. Das Prinzip ist dasselbe: du beschreibst, Claude Code liest, schreibt und speichert.

Lohnt sich das Pro-Abo für gelegentliche Nutzung?

Pro kostet 20 $/Monat. Wenn du 1–2 Projekte im Monat baust: ja, klar. Weniger als das: Ein API-Key mit einem strikt gesetzten Kostenlimit ist eine Alternative — aber das Tutorial dafür kommt separat, denn der API-Key-Workflow erfordert etwas mehr Setup.

Was ist der Unterschied zwischen Claude Pro und Claude Max?

Claude Max kostet 100–200 $/Monat und hat 5× bzw. 20× höhere Nutzungslimits. Das lohnt sich nur bei täglicher intensiver Nutzung — als Entwickler, der Claude Code 8 Stunden täglich verwendet. Für Tutorial-Projekte und gelegentliche Nutzung ist Pro völlig ausreichend.


Dein nächster Schritt

Du hast jetzt Claude Code installiert, verbunden und ein echtes Projekt damit gebaut. Der Unterschied zu Lektion 1 ist spürbar: keine Copy-Paste-Schleife, kein manuelles Einfügen — Claude Code schreibt direkt. Das ist der Workflow, mit dem professionelle Entwickler 2026 arbeiten.

Der nächste Schritt: Claude Code ausprobieren — installieren, claude tippen, und deiner snake.html aus Lektion 1 sagen, was sie besser machen soll. Und wenn du wissen willst, wie viel hängengeblieben ist:


Wie gut kennst du Claude Code?

10 Fragen — von der Installation bis zu Nutzungslimits und GitHub Pages. Wer alle schafft, bekommt ein Zertifikat zum Teilen.

Claude Code-Quiz
1 / 10

Mit welchem Befehl installierst du Claude Code auf deinem Rechner?