Guide 032, ein spielbares Spiel aus einer einzigen Datei, gebaut von Claude
Ein Spiel,eine Datei.
Ein Klick öffnet Claude mit meinem Prompt. Danach hast du ein Spiel, das als eine einzige Datei im Browser läuft.
Abschicken geht auch in der Claude-App. Gestartet habe ich die Datei nur am Rechner im Browser.
So geht’s, in 3 Schritten
- 1BauenPrompt abschicken, Claude baut das Spiel.
- 2HerunterladenAls Datei holen, doppelt anklicken.
- 3ÄndernFreiwillig: deine Idee, schneller, schwerer.
Gut zu wissen
Am Rechner
claude.ai im Browser, dort holst und startest du die Datei.
Konto und Schalter
Geht auch kostenlos, getestet über Claude Code mit Opus 5.5. Unter Settings → Capabilities muss Code execution and file creation an sein (Dateien erstellen), ab Werk ist es das.
Ein normaler Chat
- Richtig:Chat
- Nicht nötig:Cowork
- Nicht nötig:Claude Code
Ein neuer Chat genügt.
1
Spiel bauen lassen
Der Knopf öffnet einen neuen Chat mit meinem Prompt. Der rote Warnhinweis ist normal. Beginnt der Prompt mit „Bau mir ein kleines, spielbares Spiel“, schick ihn ab.
Du siehst jetzt das fertige Spiel, im Chat oder daneben.
01 Der Prompt aus dem Reel
Wörtlich der, mit dem mein Spiel entstanden ist.
Bau mir ein kleines, spielbares Spiel als eine einzige HTML-Datei. Regeln: Alles gehört in diese eine Datei, es darf nichts aus dem Netz nachgeladen werden, keine Installation, keine zusätzlichen Dateien. Es soll auf dem Handy und am Rechner funktionieren, mit Touch und mit Tastatur. Das Spiel ist eine kleine Rakete, die fallenden Meteoriten ausweicht und mit der Zeit immer schneller wird. Bau eine Punkteanzeige und einen Neustart-Knopf ein.
2
Datei holen und starten
Meist steht unter der Antwort schon „Herunterladen“. Sonst schick diesen Satz. Datei laden, doppelt anklicken.
-
Gib mir das Spiel als eine Datei spiel.html zum Herunterladen.
Du siehst jetzt dein Spiel im Browser. Zum Test schaltest du das WLAN aus und lädst neu: es läuft weiter.
3
Ändern, wie du willst
Freiwillig. Änderungen schreibst du in denselben Chat. Für ein neues Spiel trägst du deine Idee ein und kopierst den Prompt in einen neuen Chat.
-
Mach die Spielfigur schneller.
-
Mach es schwerer.
-
Bau mir ein kleines, spielbares Spiel als eine einzige HTML-Datei. Regeln: Alles gehört in diese eine Datei, es darf nichts aus dem Netz nachgeladen werden, keine Installation, keine zusätzlichen Dateien. Es soll auf dem Handy und am Rechner funktionieren, mit Touch und mit Tastatur. Das Spiel ist [DEINE IDEE]. Bau eine Punkteanzeige und einen Neustart-Knopf ein.
Du siehst jetzt eine neue Fassung im Chat. Für die Datei schickst du wieder den Satz aus Schritt 2.
Fertig
Dein Spiel läuft
Kennst du jemanden, der seinen Kindern ein eigenes Spiel bauen will? Schick ihm den Guide.
-
Du weißt, wie du es mit einem Satz änderst
Wenn etwas hakt
Hilfe, wenn es hakt
Kein Download zu sehen?
Schau unter Settings → Capabilities, ob Code execution and file creation an ist. Ohne den Schalter erstellt Claude keine Dateien. Danach bittest du im selben Chat noch einmal um die Datei.
Warum die drei Angaben im Prompt?
„Eine Datei“, damit du nichts zusammensetzen musst. „Nichts nachladen“, weil Artefakte laut Anthropic Bausteine von fünf festen Adressen und Schriften von Google laden können. Dann läuft das Spiel ohne Internet nicht. „Touch und Tastatur“, damit du es am Handy und am Rechner steuern kannst.
Und auf dem Handy?
Am iPhone lädt die Datei herunter, öffnet aber nur in der Systemvorschau: Du siehst den Startbildschirm, das Spiel startet nicht, weil die Vorschau keine Skripte ausführt. Getestet am 05.10.2026 auf einem echten iPhone. Gespielt wird am Rechner, oder in Claude direkt im Fenster neben dem Chat. Android habe ich nicht getestet.
Der Rekord ist weg?
Mein Spiel merkt sich den Rekord im Browser. Lädst du die Datei neu herunter oder legst sie woanders ab, beginnt der Rekord oft wieder bei null. Festgelegt ist das laut MDN nicht.
Quellen und StandBelege
Die Angaben stammen aus der Hilfe von Anthropic, der Preisseite und MDN, dazu aus meinem eigenen Lauf.
A · Offizielle Quellen
Anthropic · What are artifacts and how do I use them?
- „Ask for one in any conversation with Claude“
- „a small interactive tool“
- „Ask Claude to change the artifact.“
- „Legacy artifacts: Use the controls at the top of the artifact panel to view the code, copy the content, or download it.“
Belegt, dass du ein Artefakt in jedem Chat anfordern und per Nachricht ändern kannst. Abgerufen am 02.10.2026.
support.claude.com/en/articles/17153992-what-are-artifacts-and-how-do-i-use-them
Anthropic · Create and edit files with Claude
- „Enable file creation from Settings > Capabilities by toggling Code execution and file creation on.“
- „Claude will generate the file, which you can then download directly from the conversation.“
- „Code execution and file creation is enabled by default“
- „Code execution and file creation is available to all Claude users (Free, Pro, Max, Team, and Enterprise) on the web, Claude Desktop, and Claude Mobile.“
- „when you tap "Download" on Claude Mobile, the file will open in either the system preview or a separate app“
Belegt den Schalter, dass er ab Werk an ist, dass er in jedem Plan geht, den Download aus dem Chat und was am Handy beim Download passiert. Abgerufen am 02.10.2026.
support.claude.com/en/articles/12111783-create-and-edit-files-with-claude
Anthropic · Preise (deutsche Seite)
- Tabelle „Modelle und Nutzung“, Zeile „Opus“: Free „Nein“, Pro bis Max „Ja“
- Zeile „Artefakte erstellen“: „Ja“ ab Free
Belegt, dass Artefakte auch kostenlos gehen und Opus erst ab Pro zur Verfügung steht. Abgerufen am 02.10.2026.
Anthropic · Claude Code, Network configuration
- „Artifacts can also load JavaScript libraries, such as React or a charting package, from cdnjs.cloudflare.com, cdn.jsdelivr.net, cdn.tailwindcss.com, code.jquery.com, and unpkg.com, and from no other external host.“
- „also requests fonts.googleapis.com and fonts.gstatic.com“
Belegt, dass Artefakte Bausteine und Schriften aus dem Netz laden können. Abgerufen am 02.10.2026.
MDN · Window: localStorage property
- „the requirements for localStorage behavior are undefined and may vary among different browsers“
- „each file: URL seems to have its own unique local-storage area“
Belegt, dass der gespeicherte Rekord bei einer Datei vom Rechner nicht verlässlich ist. Abgerufen am 02.10.2026.
developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
B · Was hier bewusst nicht steht
Ein fester Download-Knopf für neue Artefakte
Ein Herunterladen über die Steuerung oben im Artefakt beschreibt Anthropic nur für Artefakte, die vor dem 16.09.2026 entstanden sind. Für neue Artefakte steht dort keins. Der Guide nutzt deshalb die Dateierstellung, die Dateien direkt im Chat zum Herunterladen anbietet.
„Läuft auf jedem Handy“
Am echten iPhone getestet am 05.10.2026: Download ja, Spiel startet in der Systemvorschau nicht. Android ist nicht getestet.
C · Stand und eigener Test
Eigener Lauf, 01.10.2026
Den Prompt habe ich über Claude Code geschickt, nicht über claude.ai, mit Opus 5.5 und der Anweisung, wie in der Claude-App ein Artefakt zu liefern. Heraus kam eine Datei mit 25.071 Bytes ohne eine einzige Netzadresse. Gespielt in Chromium in Handy-Größe mit Touch und gesperrtem Netz: null Anfragen ins Netz, null Fehler. Nicht getestet: claude.ai selbst, der kostenlose Plan, echte Handys.
Wenn du noch Lust hast