Zum Inhalt springen
Alle Levels ⏱ 35 Min. 🔨 claude

Dein erstes Browser-Spiel — mit Claude gebaut, ohne eine Zeile selbst zu schreiben

Dein Ziel nach diesem Tutorial:

Du baust heute noch dein erstes eigenes Browser-Spiel — nur mit Prompts

Tutorial teilen:

Du wirst heute ein Spiel bauen. Nicht mit Programmierkursen, nicht mit YouTube-Tutorials, nicht mit monatelangem Lernen. Sondern in 35 Minuten, mit einem Browser und einer KI, die den Code für dich schreibt.

Das klingt nach einem Trick — ist es aber nicht. Claude versteht natürliche Sprache so gut, dass du ein vollständiges, spielbares Browser-Spiel beschreiben kannst, und Claude liefert dir den fertigen Code. Deine Aufgabe: beschreiben, was du willst. Claudes Aufgabe: es bauen.


Stufe 1: Anfänger — Dein erster Prototyp in 10 Minuten

Du als Product Manager, Claude als Entwickler

Das Konzept ist einfach: Du bist der Product Manager, Claude ist der Entwickler. Dein Job ist es, zu beschreiben, was du willst. Claudes Job ist es, den Code zu schreiben. Du musst kein einziges Zeichen selbst programmieren.

Das Ergebnis: eine einzelne .html-Datei, die du im Browser öffnest — und dein Spiel läuft sofort. Kein Terminal, keine Installation, keine Abhängigkeiten.

Was du brauchst:

  • Einen kostenlosen Account auf claude.ai
  • Einen Browser (Chrome, Firefox, Safari — egal)
  • Einen Texteditor (Notepad unter Windows oder TextEdit auf dem Mac reicht)

Schritt für Schritt:

  1. Gehe auf claude.ai und melde dich an (der Google-Login reicht)
  2. Starte ein neues Gespräch
  3. Sende den Starter-Prompt unten
  4. Kopiere den gesamten HTML-Code aus Claudes Antwort
  5. Öffne Notepad (Windows) oder TextEdit (Mac) → einfügen → speichern als snake.html
  6. Doppelklick auf die Datei → sie öffnet sich im Browser → spiel los!
Starter-Prompt: Dein erstes Snake-Spiel
Erstelle ein vollständiges Snake-Spiel als einzelne HTML-Datei. Das Spiel soll: - Im Browser laufen ohne externe Abhängigkeiten - Mit den Pfeiltasten gesteuert werden - Die Schlange wächst, wenn sie das Futter frisst - Game Over bei Kollision mit der Wand oder sich selbst - Den Punktestand oben anzeigen - Einen Game-Over-Bildschirm mit "Nochmal spielen" Button haben - Dunkles Design mit Neon-Grün für die Schlange und Neon-Rot für das Futter Gib mir nur den HTML-Code, keine Erklärungen.
Funktioniert mit Claude

Eine gute Claude-Antwort sieht so aus: ein großer Code-Block, der mit <!DOCTYPE html> beginnt und mit </html> endet. Alles dazwischen ist dein Spiel.

Wenn es beim ersten Versuch nicht funktioniert: Das ist normal und kein Problem — lies weiter zu Stufe 2.


Du als PM, Claude als Entwickler

DuIdee &FeedbackClaudeschreibtden Code.htmlDateikopieren & speichernBrowser▶ Spielen

Stufe 2: Fortgeschritten — Debuggen und Verbessern

Was tun, wenn etwas nicht funktioniert?

Kein Code ist beim ersten Versuch perfekt — auch nicht der von Claude. Das ist kein Fehler, sondern der normale Prozess. Und hier lernst du die wichtigste Fähigkeit: Fehler zu kommunizieren, nicht zu lösen.

Der richtige Ansatz: Beschreibe genau, was du siehst. Nicht “es funktioniert nicht”, sondern:

  • “Das Spiel startet, aber die Schlange bewegt sich nicht auf Pfeiltasten”
  • “Der Game-Over-Bildschirm erscheint sofort beim Start”
  • “Das Spiel ist ein weißer leerer Bildschirm”

Claude kann aus dieser Beschreibung den Fehler finden — auch ohne den Code selbst ausführen zu können.

Die Entwicklertools (F12):

Drück F12 in deinem Browser → klick auf den Tab “Konsole”. Dort siehst du rote Fehlermeldungen, wenn JavaScript-Fehler auftreten. Diese kannst du einfach kopieren und in Claudes Chat einfügen — Claude interpretiert sie und korrigiert den Code.

Die “eine Änderung auf einmal”-Regel:

Wenn das Grundspiel läuft, verbessere es schrittweise. Nicht: “Mache das Design besser, füge Sound hinzu, optimiere die Performance und baue einen Multiplayer-Modus ein.” Sondern: eine Sache, testen, nächste Sache.

Verbesserungs-Prompt: Design und Highscore
Das Spiel funktioniert! Jetzt möchte ich folgende Verbesserungen: 1. Das Design soll professioneller wirken — füge einen Titel "SNAKE" oben hinzu, modernere Schriftart 2. Die Geschwindigkeit soll mit dem Score zunehmen (alle 5 Punkte etwas schneller) 3. Füge einen Highscore hinzu, der mit localStorage gespeichert wird und auch nach dem Schließen des Browsers erhalten bleibt Ändere nur diese drei Dinge und gib mir die komplette aktualisierte HTML-Datei.
Funktioniert mit Claude

Wenn ein Update etwas kaputt macht:

Sag Claude: “Das funktioniert nicht mehr, hier ist was passiert: [beschreibe]. Kannst du das rückgängig machen?” — Claude kann Änderungen zurücknehmen.

Tipp: Behalte die alte snake.html als Backup, bevor du die neue Version speicherst. Einfach die alte Datei in snake-v1.html umbenennen.


Stufe 3: Experte — Polishing und Teilen

Die finale Version

Ein spielbares Spiel ist gut. Ein poliertes Spiel, das du teilen kannst, ist besser. Claude kann mit einem weiteren Prompt Sound, mobile Steuerung und einen professionellen Game-Over-Bildschirm hinzufügen.

Finalisierungs-Prompt: Sound, Mobile und Game-Over-Screen
Füge folgende finale Features hinzu: - Beim Game Over: zeige den Score und Highscore, und ob ein neuer Highscore erreicht wurde - Füge einen kurzen Sound bei Futter-Fressen hinzu (mit Web Audio API, kein externes File nötig) - Mache das Spiel auch auf dem Handy spielbar mit Wisch-Gesten (Swipe) Gib mir die vollständige finale HTML-Datei.
Funktioniert mit Claude

Dein Spiel teilen

GitHub Pages (kostenlos):

  1. Erstelle einen kostenlosen Account auf github.com
  2. Neues Repository erstellen → “Create repository”
  3. Deine snake.html hochladen → “Add file” → “Upload files”
  4. Settings → Pages → Source: “main branch” → Save
  5. Nach ein paar Minuten: dein Spiel läuft unter https://dein-name.github.io/repository-name/snake.html

itch.io als Alternative:

itch.io ist eine Plattform für Indie-Spiele. Du kannst deine snake.html dort hochladen — inklusive optionalem “Pay what you want”-Modell. Kostenlos, keine Vorkenntnisse nötig.

Was als nächstes?

Das Snake-Workflow funktioniert genauso für Memory, Pong, ein Quiz-Spiel oder eine einfache To-Do-App. Du hast nicht nur ein Spiel gebaut — du hast gelernt, wie man mit KI iterativ Software entwickelt.


Lektion 1 abgeschlossen

Das war Lektion 1 — mit dem Browser und einem kostenlosen Account.

In Lektion 2 arbeitest du mit Claude Code lokal auf deinem Rechner. Claude liest deine Dateien, schreibt Code direkt hinein, führt Tests aus und behebt Fehler — alles ohne Copy-Paste. Das Ergebnis ist kein Spielzeug mehr.

Claude Code ist nicht kostenlos, aber es ist ein Game-Changer. (Kommt bald.)


Häufige Fragen

Brauche ich Programmierkenntnisse?

Nein — das ist der Kern dieses Tutorials. Du beschreibst auf Deutsch (oder Englisch), was du willst. Claude übersetzt das in Code. Wenn etwas nicht stimmt, beschreibst du das Problem in normaler Sprache, und Claude korrigiert.

Was, wenn Claudes Code nicht funktioniert?

Das passiert gelegentlich. Der richtige Weg: Beschreibe genau, was du siehst — öffne die Browser-Konsole (F12), kopiere eventuelle Fehlermeldungen, und schicke sie an Claude. Claude findet und behebt den Fehler.

Kann ich mit diesem Ansatz auch andere Dinge bauen?

Ja. Der gleiche Workflow funktioniert für Websites, einfache Web-Apps, Skripte zur Dateiverarbeitung, Formular-Tools und mehr. Das Grundprinzip — beschreiben, iterieren, testen — bleibt dasselbe.

Reicht der kostenlose claude.ai-Plan?

Ja, für dieses Tutorial vollständig. Der kostenlose Plan hat ein tägliches Nachrichtenlimit. Falls du es erreichst: Am nächsten Tag geht es weiter, oder du nutzt gemini.google.com als Alternative.

Wie bewahre ich mehrere Versionen meines Spiels auf?

Einfach kopieren und umbenennen: snake-v1.html, snake-v2.html usw. So kannst du jederzeit zu einer früheren Version zurück. Kein Git, kein Version Control — einfache Dateien reichen für den Anfang.

Ist mein Code sicher, wenn ich ihn mit Claude teile?

Der Code, den Claude schreibt, läuft nur in deinem Browser. Kein persönliche Daten werden gesendet. Wenn du echte private Daten in einem Spiel verarbeiten würdest (was bei Snake nicht der Fall ist), solltest du keinen öffentlichen KI-Dienst verwenden.


Dein nächster Schritt

Du hast heute gelernt, wie man mit KI iterativ Software entwickelt. Das ist mehr als ein Snake-Spiel — das ist ein Skill.

Beschreiben was du willst. Fehler kommunizieren, nicht lösen. Eine Verbesserung nach der anderen. Diese drei Prinzipien funktionieren für jedes Software-Projekt: eine persönliche Website, ein Buchungstool für dein Nebengewerbe, ein Skript das deine Fotos automatisch umbenennt.

Dein erstes Spiel ist 10 Minuten entfernt. Öffne claude.ai, kopiere den Starter-Prompt aus Stufe 1 — und leg los. Und wenn du wissen willst, wie viel hängengeblieben ist:


Wie gut kennst du KI-gestützte Spielentwicklung?

10 Fragen — von HTML-Grundlagen bis zum Debugging-Workflow. Wer alle schafft, bekommt ein Zertifikat zum Teilen.

Claude-Quiz
1 / 10

Warum ist ein einzelnes HTML-File das ideale Format für dein erstes KI-Spiel?