Diese Skill bringt Claude Code bei, spielbare 3D-Actionspiele für den Browser zu bauen

Der chinesische KI-Blogger 歸藏 (Guizang) hat seine Erfahrungen aus einem KI-Spieleprojekt in eine „Skill“ für Claude Code und Codex gepackt. Damit sollen KI-Programmierassistenten ein 3D-Actionspiel bauen können, das im Browser läuft. Die Demo „雾锁山门“ kann man direkt auf dem Handy oder am PC spielen.

Tools 11. Nov. 2026 7 Min. Lesezeit Quelle: GitHub (neue Projekte)
Symbolbild, KI-generiert

Worum es geht

Der chinesische KI-Autor und Blogger 歸藏 (Guizang, auf X als op7418 bekannt) hat auf GitHub ein Projekt namens guizang-game-skill veröffentlicht. Dabei handelt es sich um eine sogenannte Skill, also ein Paket aus Anleitungen, Checklisten und Skripten, das ein KI-Programmierassistent wie Claude Code oder Codex bei Bedarf einliest und dann wie eine Arbeitsanweisung befolgt. Diese Skill soll der KI beibringen, ein komplettes 3D-Actionspiel aus der Draufsicht zu bauen, das direkt im Browser läuft, mit Figuren, Kampfsystem, Effekten, Musik und Sprachausgabe.

Als Beleg dient das Demospiel „雾锁山门“ (etwa: „Nebel verschließt das Bergtor“), ein Spiel im Stil chinesischer Fantasy, auf Chinesisch Xianxia genannt. Ausprobieren kannst du es ohne Installation auf dem PC oder dem Smartphone unter op7418.github.io/guizang-game-skill. Das Repository selbst findest du unter github.com/op7418/guizang-game-skill.

Das Demospiel: was die KI gebaut hat

„雾锁山门“ ist klein, aber vollständig: eine Szene, ein Kampf gegen eine Gruppe einfacher Gegner und ein Bosskampf, dazu Story und Sprachausgabe. Der Autor schreibt, er habe nur „chinesischer Stil, Xianxia“ vorgegeben, alle kreativen Entscheidungen habe die KI selbst getroffen.

  • Grafik: Wiesen, die sich im Wind bewegen, mehrere Nebelschichten, Schnee, Berge im Hintergrund und Spiegelungen auf überfluteten Steinplattformen. Die Darstellung läuft über eine selbst gebaute Render-Pipeline auf Basis von three.js, einer verbreiteten JavaScript-Bibliothek für 3D im Browser. Dabei kommt nur WebGL zum Einsatz, die Browser-Grafikschnittstelle mit der breitesten Unterstützung. Deshalb läuft das Spiel auf Handys, PCs und in eingebetteten Mini-App-Umgebungen.
  • Figuren und Objekte: 5 Charaktere mit Skelett (damit sie sich animieren lassen), 2 Waffen, 12 Requisiten und 5 Arten von Gegenständen, die Gegner fallen lassen. Zuerst entstanden mit Jimeng, dem Bildgenerator von ByteDance, Konzeptzeichnungen. Diese wurden dann mit Tripo in 3D-Modelle umgewandelt. Die Prompts dafür hat die KI selbst geschrieben.
  • Kampf: eine Kombo aus drei Schlägen, Ausweichen, Blocken, Parieren und Finisher-Angriffe, außerdem Heiltränke, Reiten auf einem fliegenden Schwert und eine Spezialattacke namens „万剑归宗“ (sinngemäß „Zehntausend Schwerter kehren zurück“). Der Boss hat zwei Phasen, eine Zwischensequenz und eigene Dialogzeilen.
  • Ton: 8 vertonte Sätze, Musik, Umgebungsgeräusche und Soundeffekte.

Das Rohmaterial war fast 100 MB groß. Am Ende steckt alles in einer einzigen HTML-Datei von rund 33 MB, inklusive Modellen, Texturen, Musik und Sprachausgabe.

Variante Beschreibung
Online-Version Zeigt zuerst die Szene und lädt den Rest im Hintergrund nach; virtueller Joystick auf dem Handy; Grafikqualität, HD-Texturen und Tastenbelegung einstellbar
Einzeldatei eine HTML-Datei mit ca. 33 MB, kommt ohne Internetverbindung aus
Mini-App-Version gebaut für die Grenzen der Mini-Tools in der App Xiaohongshu (kein Netz, kein WASM, maximal 10 MiB), ca. 8 MiB groß

Alle drei Varianten stammen aus demselben Quellcode.

Aufwand: 6 Stunden und 450 Millionen Tokens

Laut README entstand das Spiel an einem Nachmittag, gebaut mit einem Modell, das der Autor „Fable 5.2“ nennt. Das hat etwa 6 Stunden und rund 450 Millionen Tokens gekostet. Tokens sind die Textstücke, nach denen KI-Anbieter abrechnen. Ein Teil davon ging auf Tests mit Claude Opus 5.5. Viel davon sei für Nacharbeit und Ausprobieren draufgegangen. Die Skill soll genau diese Umwege einsparen: Sie hält fest, was sich bewährt hat und welche Fehler aufgetreten sind.

Was die Skill konkret ändert

Der Autor beschreibt das Problem so: Wer eine KI einfach bittet, „ein 3D-Spiel zu bauen“, bekommt meist graue Klötze, eine schwammige Steuerung und ein Projekt, für das man erst selbst eine Entwicklungsumgebung einrichten muss. Die Skill setzt an fünf Stellen an:

  1. Erst fragen, dann bauen. Die KI klärt zuerst Vorbilder, Kameraperspektive, Atmosphäre und Umfang. Außerdem fragt sie, welche Tools zur Erstellung von Grafiken und Modellen du hast und wie viel Guthaben du darauf hast.
  2. Selbst prüfen. Gleich am ersten Tag richtet die KI Testwerkzeuge ein: Sie kann das Spiel Bild für Bild weiterlaufen lassen, über URL-Parameter direkt zu einem bestimmten Abschnitt springen und ein Diagnosefenster mit F3 öffnen. Sie macht selbst Screenshots und sagt anschließend, was sie tatsächlich angesehen hat und was nur „ohne Fehlermeldung“ lief.
  3. Regeln für die Spielmechanik im Kampf. Gemeint sind Ausholbewegung und Nachlauf eines Angriffs, ein kurzes Einfrieren beim Treffer (Hitstop), Rückstoß in Stufen, Blocken und Parieren, Gegner, die nacheinander statt alle gleichzeitig angreifen, und Ausweichen, das eine laufende Aktion abbricht. Kurz: woher das Gefühl kommt, dass Treffer wirklich sitzen.
  4. Eine Fehlerliste. Dazu gehören hängende Pfeiltasten, vorgefertigte Animationen, die Figuren von ihrem Platz schleudern, überstrahlende Leuchteffekte (Bloom), Dächer, die die Kamera verdecken, und Figuren, die nach dem Verpacken nur noch halb so groß sind. Zu jedem Punkt nennt die Liste Symptom, Ursache und Lösung.
  5. Drei Arten, das Spiel zu verpacken. Große Modelle und Dateien werden stark komprimiert: als einzelne HTML-Datei, als statische Webseite, die zuerst das Bild zeigt und dann nachlädt, oder als Offline-Paket für eingeschränkte Umgebungen.

Der Ablauf gliedert sich in fünf Phasen: Recherche und Planung, Spielwelt und Grafiken, Animation, Kampfgefühl und Effekte, schließlich Ton und Verpacken. Die Plattformen liefern nur wenige fertige Animationen. Die übrigen Posen berechnet die Skill per Programm, indem sie die Position von Händen und Füßen bestimmt. Effekte entstehen aus Modellen mit Shadern, also kleinen Grafikprogrammen auf der Grafikkarte, statt aus Massen von Partikeln.

Installation und was du brauchst

Am einfachsten gibst du der KI den Link zum Repository und lässt sie die Skill selbst installieren. Für Claude Code geht es auch von Hand:

git clone https://github.com/op7418/guizang-game-skill ~/.claude/skills/guizang-game-skill

Bei Codex und anderen Tools kommt das Repository in deren jeweiligen Skills-Ordner. Danach reicht eine Anfrage wie: „Bau ein Top-down-3D-Actionspiel im Wuxia-Stil für den Browser, eine Szene, eine Gegnerwelle, ein Boss. Ich kann Tripo und Jimeng nutzen.“

Was Wofür Ohne
Node.js 18+ lokaler Server und Verpacken Pflicht
Tripo Bild zu 3D-Modell, Skelett kostenlose Modelle und Geometrie aus Code, sichtbar schlechtere Grafik
Jimeng oder ein anderer Bildgenerator Konzeptbilder, Icons, Schriftzüge, Sprachausgabe kostenlose Assets
Suno Musik Die Skill schreibt Prompts oder erzeugt Musik per Code

Der Autor betont, wie wichtig diese Tools sind. Ganz am Anfang ließ er Modelle direkt aus Text erzeugen, das Ergebnis war schwach. Der Umweg „erst ein Konzeptbild, dann daraus 3D“ habe die Qualität deutlich verbessert.

Was die Skill nicht kann

Der Autor ist auffällig offen:

Es ist kein fertiges Spiel aus einem einzigen Satz.

Er hat „雾锁山门“ in sieben Runden getestet und jedes Mal 5 bis 10 Probleme gemeldet. Selbst kann er keine Spiele entwickeln. Er sagt nur Dinge wie „die Bewegungen sind steif“ oder „Treffer fühlen sich schlecht an“, und die KI übersetzt das in Fachbegriffe, recherchiert und bessert nach. Er rät, der KI Referenzvideos zu geben, auf „erst recherchieren, dann bauen“ zu bestehen und sie fertige Tools anbinden zu lassen, statt alles selbst zu programmieren. Die Skill wurde bisher nur an einem einzigen Projekt komplett durchlaufen, dazu kam ein Vergleichstest auf der Planungsebene. Sie helfe, die Richtung zu finden, garantiere aber keine Qualität.

Zur Lizenz: Die Skill selbst (Dokumente und Skripte im main-Branch) steht unter AGPL-3.0. Die Inhalte des Demospiels, also Grafik, Modelle, Stimmen, Musik und Texte, unterliegen dem Urheberrecht des Autors. Spielen und Teilen des Links ist erlaubt, Weiterverbreiten, Umbenennen und kommerzielle Nutzung nicht.

Einordnung

Das Projekt zeigt anschaulich, wohin sich KI-Programmierassistenten entwickeln. Entscheidend ist nicht mehr nur das Modell, sondern dokumentiertes Fachwissen in Form von Skills, das die KI durch einen erprobten Ablauf führt. Bemerkenswert ist vor allem der Schwerpunkt auf Selbstkontrolle: Die KI soll Screenshots prüfen und offen sagen, was sie nicht verifiziert hat. Genau daran scheitern viele KI-Projekte.

Einschränkungen gibt es trotzdem. 450 Millionen Tokens sind selbst bei günstigen Tarifen ein spürbarer Kostenfaktor, und dazu kommen kostenpflichtige Dienste wie Tripo und Suno. Die Skill beruht auf einem einzigen Projekt. Ob sie auch bei anderen Genres oder bei einem anderen Nutzer ähnlich gut funktioniert, ist unbelegt. Und auch mit der Skill muss ein Mensch das Spiel mehrfach testen und Rückmeldung geben. Für Hobbyisten, die schon immer ein kleines Spiel bauen wollten, ist das trotzdem ein konkreter, nachvollziehbarer Einstieg, und die Demo kannst du dir in einer Minute selbst ansehen.

Quellen

#claude code#spieleentwicklung#three.js#agent skills#browser-spiele
Originalquelle lesen

Frag den KI-Assistenten

Fragen zu diesem Artikel, zur Installation oder zu Hintergründen? Unser Assistent kennt diese Seite und läuft auf unserem eigenen Rechner, nicht in einer fremden Cloud.

Verbinde …

Der Assistent ist eine KI (Gemma 4) und kann sich irren – wichtige Angaben bitte in der Quelle prüfen. Fragen werden nur zum Beantworten genutzt und nach einer Stunde gelöscht. Bitte keine persönlichen Daten eingeben.

Kommentare

Was meinst du dazu? Schon ausprobiert? Schreib es hier, ohne Anmeldung.

  1. Kommentare werden geladen …

Kommentare sind öffentlich. Links sind nicht erlaubt, beleidigende Beiträge löschen wir. Deinen eigenen Kommentar kannst du in diesem Browser jederzeit wieder löschen. Mehr dazu in der Datenschutzerklärung.