Kurzfazit: Für alle, die ein eigenes Spiel bauen wollen, ohne programmieren zu können: Du beschreibst Snake in einem Prompt, Claude schreibt eine einzige HTML-Datei, und nach 10 Minuten spielst du im Browser. Claude Free reicht dafür und kostet 0 USD. Die ehrliche Grenze: Das kostenlose Kontingent setzt sich erst im nächsten Fünf-Stunden-Fenster zurück, und der erste Code läuft nicht immer fehlerfrei, deshalb planst du eine Korrekturrunde ein.
Du wirst heute ein Spiel bauen. Nicht mit Programmierkursen, nicht mit YouTube-Tutorials, nicht mit monatelangem Lernen. Sondern mit einem Browser und einer KI, die den Code für dich schreibt. Die 10 Minuten sind Stufe 1, die 35 Minuten die ganze Anleitung mit Verbesserungen und Veröffentlichung.
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.
Was das kostet
| Baustein | Preis | Ehrliche Grenze |
|---|---|---|
| Claude Free | 0 USD, keine Kreditkarte | Kontingent, das sich in einem rollierenden Fenster von fünf Stunden zurücksetzt, eine feste Nachrichtenzahl nennt Anthropic nicht |
| Browser und Texteditor | 0 USD | Notepad oder TextEdit sind auf deinem Rechner schon installiert |
| GitHub Pages (optional, Stufe 3) | 0 USD | im Free-Plan nur für öffentliche Repositories, veröffentlichte Seite höchstens 1 GB |
Quellen: claude.com/pricing, Anthropics Hilfeartikel zum kostenlosen Plan und die GitHub-Dokumentation zu Pages-Limits, abgerufen am 17. September 2026. Für ein Snake-Spiel zählt nur das Claude-Kontingent: Laut Anthropic hängt die Zahl der Nachrichten auch von der Auslastung ab. Deshalb arbeitet diese Anleitung mit wenigen, präzisen Prompts.
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:
- Gehe auf claude.ai und melde dich an (der Google-Login reicht)
- Starte ein neues Gespräch
- Sende den Starter-Prompt unten
- Kopiere den gesamten HTML-Code aus Claudes Antwort
- Öffne Notepad (Windows) oder TextEdit (Mac) → einfügen → speichern als
snake.html - Doppelklick auf die Datei → sie öffnet sich im Browser → spiel los!
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.
Bewegt sich die Schlange über das Spielfeld, ist das dein erstes Ergebnis: ein eigenes Spiel in einer einzigen Datei, ohne eine Zeile selbst geschrieben zu haben.
Wenn es beim ersten Versuch nicht funktioniert: Das ist normal und kein Problem. Die drei Fehler, die fast allen begegnen, und ihre Lösung stehen gleich zu Beginn von Stufe 2.
Du als PM, Claude als Entwickler
Akademie-Training Platz vormerkbar
KI-Agenten bauen, ohne Entwicklerin zu sein
Du hast gerade etwas gebaut, ohne eine Zeile Code selbst zu schreiben. Im Training nimmst du dir als Nächstes eine Aufgabe aus deinem Betrieb vor.
1.200 € pro Platz, netto zzgl. USt. Fortgeschritten · 8 Wochen, online, im eigenen Tempo
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”
Mit so einer Beschreibung findet Claude den Fehler meistens, 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 drei Fehler, die dir garantiert begegnen
- Weißer Bildschirm. Ursache ist fast immer ein unvollständig kopierter Code: Die Datei endet nicht mit
</html>, weil die Antwort abgeschnitten war oder beim Markieren ein Stück fehlte. Lösung: Prüf das Dateiende. Fehlt es, schreib Claude: “Deine Antwort ist abgeschnitten. Gib mir die komplette Datei noch einmal in einem Block.” - Der Browser zeigt Code statt Spiel. Die Datei ist nicht als reiner Text gespeichert oder heißt in Wahrheit
snake.html.txt. Lösung: Auf dem Mac in TextEdit vor dem Einfügen im Menü Format “In reinen Text umwandeln” wählen, unter Windows beim Speichern den Dateityp auf “Alle Dateien” stellen. - Die Schlange reagiert nicht auf die Pfeiltasten, oder die Seite scrollt. Das Spielfeld hat keinen Fokus, oder die Pfeiltasten bewegen die Seite statt der Schlange. Lösung: Klick einmal ins Spielfeld. Hilft das nicht, schreib Claude: “Die Pfeiltasten scrollen die Seite, statt die Schlange zu steuern. Korrigiere nur die Tastatursteuerung und gib mir die komplette Datei.”
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.
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.
Dein Spiel teilen
GitHub Pages (kostenlos):
- Erstelle einen kostenlosen Account auf github.com
- Neues Repository erstellen, Sichtbarkeit auf Public stellen, dann “Create repository”. Im Free-Plan funktioniert Pages nur mit öffentlichen Repositories
- Deine
snake.htmlhochladen: “Add file” → “Upload files” → “Commit changes” - Settings → Pages, unter “Build and deployment” bei Source die Option Deploy from a branch wählen, deinen Hauptzweig und den Ordner
/(root)setzen, dann Save - Nach ein paar Minuten: dein Spiel läuft unter
https://dein-name.github.io/repository-name/snake.html
Die Bezeichnungen stammen aus der GitHub-Dokumentation zur Veröffentlichungsquelle, je nach Version sitzen die Felder etwas anders.
itch.io als Alternative:
itch.io ist eine Plattform für Indie-Spiele. Laut itch.io-Dokumentation kannst du ein Spiel auch als einzelne HTML-Datei hochladen, deine snake.html passt also direkt. Wer mag, stellt dort einen freiwilligen Preis ein.
Was als nächstes?
Der 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.
Häufige Fragen zu Browser-Spielen mit Claude
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?
Dann beschreibst du den Fehler, statt ihn selbst zu suchen. Der richtige Weg: Beschreibe genau, was du siehst, öffne die Browser-Konsole (F12), kopiere eventuelle Fehlermeldungen, und schicke sie an Claude. In den meisten Fällen reicht das, damit Claude den Fehler findet, sonst hilft einer der drei Fixes aus Stufe 2.
Geht das auch mit ChatGPT oder Gemini statt Claude?
Ja, der Starter-Prompt funktioniert dort genauso. Entscheidend ist nicht das Modell, sondern die Vorgabe “eine einzige HTML-Datei, nur der Code”. Die Schritte in diesem Tutorial, das Kontingent und die Fehlerbilder beschreiben aber Claude, bei einem anderen Anbieter sitzen Schaltflächen und Limits anders.
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, und er kostet 0 USD. Eine feste Nachrichtenzahl nennt Anthropic nicht: Das Kontingent setzt sich in einem rollierenden Fenster von fünf Stunden zurück. Falls du es erreichst, machst du nach der Pause 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?
Für ein Spiel wie Snake ja: Der fertige Code läuft in deinem Browser, und solange du keine externen Dienste einbauen lässt, sendet das Spiel selbst keine Daten. Was du in den Chat schreibst, landet dagegen bei Anthropic. 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.
Danach geht es mit sechs Anleitungen weiter, die an dieses Tutorial anschließen:
- Dein erstes lokales Projekt mit Claude Code, wenn du genau diese
snake.htmlohne Kopieren weiterbauen willst. Claude Code schreibt Highscore und Level direkt in die Datei, dafür brauchst du das Terminal und einen bezahlten Claude-Plan. - Deine erste eigene Website mit Claude, weil du dort denselben Ablauf auf eine Seite anwendest, die du per Link verschickst, kostenlos und ohne Terminal.
- Dein Wetter-Dashboard mit Claude und Open-Meteo, wenn deine nächste Datei echte Live-Daten anzeigen soll, ebenfalls kostenlos und ohne API-Schlüssel.
- Dein erstes Jump-and-Run fürs Handy mit Claude, wenn nach Snake ein Spiel mit drei Level, Gegnern und Touch-Knöpfen kommen soll, wieder mit Claude Free für 0 USD.
- Deine erste Minecraft-Erweiterung mit Claude, wenn das nächste Spiel nicht bei Null anfangen, sondern eines sein soll, das ihr ohnehin spielt. Claude schreibt die JSON-Dateien des Datapacks, du brauchst dafür die Java Edition.
- Deine erste App mit Google AI Studio, wenn aus deinem Prompt-Workflow eine Web-App mit öffentlichem Link werden soll, ebenfalls für 0 €.
Was Claude sonst kann und was die Pläne kosten, steht in unserer Übersicht zu Claude. 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 mindestens 8 richtig beantwortet, bekommt ein Zertifikat zum Teilen.