Simon Willison a tweetje negyedik évfordulóján megpróbálta megismételni egy korábbi játékötletét úgy, hogy Claude Fable 5-öt (Claude Code for web környezetben) kérte meg: hozzon létre egy teljes, böngészőben futó 3D játékot az eredeti tweet szövegéből és két korábbi képernyőképből. A kísérlet sikeres volt: a rendszer egy működő, játszható demót állított össze.
Kiindulópont és cél
Willison korábbi, 2022. augusztus 5-i tweetje egy GPT-3 által generált játékleírást és DALL·E-vel készített fogalmi képeket tartalmazott, amelyek egy „Raccoon Heist” nevű játékötletet mutattak be — tolvaj mosómedvékből álló csapat, amely fosztogatásokat hajt végre. A kísérlet célja az volt, hogy a 2026. augusztus 5-én (a tweet negyedik évfordulóján) induló Claude Fable 5-ből kihozza teljesen automatikusan a játékot: „Build this 3D game, for the browser” jellegű utasítással, a mobilon írt prompttal és a két képpel.
Munkamódszer: Claude Code for web + GitHub Pages
Willison a Claude Code for web munkamenetet GitHub-tárhellyel párosította, és GitHub Pages-sel tette gyorsan elérhetővé a folyamat alatt létrejövő változtatásokat. Röviden a folyamat:
- Új repository létrehozása (publikus vagy privát egyaránt működik).
- Claude Code for web indítása és a Claude-nak adni egy célt: minél hamarabb commitoljon egy index.html-t, majd építse tovább a játékot.
- A Claude által létrehozott branch (például claude/3d-raccoon-heist-game-50n293) beállítása GitHub Pages „Deploy from a branch” opcióval.
Ezzel minden push után körülbelül 30 másodpercen belül a változások elérhetők lettek a pages URL-en. Willison megjegyzi, hogy privát repo esetén is megtekinthetővé válik a publikált tartalom annak, aki kitalálja a repo nevét.
A Fable 5 prompt és technológiai döntések
A prompt egyetlen, mobilon írt szöveg volt, amelyhez a korábbi tweet képeit is csatolta. Instrukciók között szerepelt többek között: legyen mobilbarát (érintésvezérlés), használjon OpenAI API kulcsot a text-to-image gpt-image-2 modelljéhez textúrák generálásához, dolgozzon önállóan és commitáljon gyakran, valamint készítsen notes.md naplót minden commit mellé. Willison nem adott meg konkrét technológiákat — a Claude magától választotta a korábbi tapasztalatok alapján valószínűsíthető Three.js-t.
Claude hozzáférést kapott egy OpenAI kulcshoz, így képeket tudott generálni textúráknak és fő artworknek. A munkafolyamat során a rendszer:
- létrehozott egy index.html-t és beágyazott egy helyi (vendored) Three.js másolatot,
- írt egy gen_textures.py scriptet a textúrák generálásához,
- ellenőrizte a generált képeket,
- készített címlap artworket gen_title.py-vel a gpt-image-2 felhívásával (a prompt leírása szerepel a naplóban),
- és gyakori commitokkal dolgozott a claude/3d-raccoon-heist-game-50n293 branchen.
Automatikus tesztelés és hibajavítások
Claude rögtön a fejlesztés kezdetén Playwright alapú „smoke-testeket” futtatott a preinstalled Chromiumon, hogy asztali és mobil nézetekről képernyőképeket készítsen. A tesztek alapján talált és kijavított hibák közül kettő érdemel említést:
- Egy CSS-eredetű probléma miatt a canvas telefonon 2× méretben renderelődött (a desktopon a DPR-1 álkörnyezet elfedte a hibát).
- A win screen csillagozását megjelenítő .stars CSS öröklődés elnyelte a „next night” gomb érintését — ez is javítva lett.
A naplóban (notes.md) Claude rögzítette a változtatásokat, például egy későbbi „hound” (őrzőkutya) hozzáadásának leírását és az automatizált tesztek által ellenőrzött viselkedést (kutya barangol → szimatol → elkap).
Mi készült: a játék tartalma és felépítése
A kész játék jellemzői:
- Teljesen 3D, Three.js-sel, procedurális low-poly karakterekkel és procedurális WebAudio soundtrackdel (séta-basszus jazz és minden hanghatás fájlok nélkül).
- Minden fő textúra és a címlapkép a gpt-image-2-vel generált statikus asset, így a telepített demo nem hajt végre API-hívásokat futtatás közben.
- Mobilon dinamikus érintőjoystick jelenik meg ahol érintesz, plusz DASH gomb; desktopon WASD/nyilak és Space.
Játékmenet röviden:
- A játékos egy álarcos mosómedve, aki a csapat kukájából lopakodik ki holdfényes zsákutcába. Feladat: érmek, drágakövek, gyűrűk, fánkok és halak begyűjtése — a cargo láthatóan felhalmozódik a hátadon és lassít.
- Minden éjjel nő a cél és a veszély: 1. éj egy lámpás őrrel, 2. éj két őrrel, 3. éjtől egy szagkövető ebbel, amely nem támaszkodik látásra. Van rendőrautó fényszóróval, alkalmi háztulajdonos kinézéssel, sirály, amely lebukik a fel nem vett zsákmányra, és pizza felvétele 6 másodperces sebesség-FRENZY-t ad. Egy ritka arany televízió 120 pontot ér.
- Rangok: TRASH PANDA ⭐ → CAT BURGLAR ⭐⭐ → MASTER OF DISGUISE ⭐⭐⭐; a legjobb futás localStorage-be mentődik.
A Claude összesen 7 commitot tolta fel a claude/3d-raccoon-heist-game-50n293 branchre, mindegyiket automata Playwright playthroughokkal ellenőrizve asztali és mobil (portré és tájolás) nézetekben.
Mennyire jó a játék?
Willison szerint a végeredmény technikailag lenyűgöző, de játékmenet szempontjából nem „jó” játék. Részletek:
- A játék működik, mobilbarát, van hang és koherens vizuális stílus.
- Hiányoznak a csapatdinamika mechanikák: a két további mosómedve a kukánál dekorációs elem marad, semmilyen együttműködést nem hoznak.
- A nehézség és változatosság csekély: az éjszakák fix hosszúságúak, miután összegyűjtötted a tárgyakat, nincs sok dolgod a hajnalig.
- A kutya a legérdekesebb új mechanika, de az egész játék nagyon könnyen legyőzhető és viszonylag unalmas.
Összegzésként Willison azt írja: mint befejezett projekt közepes; mint egyetlen promptból kiinduló kezdőpontra viszont lenyűgöző. Tapasztalata szerint a játéktervezés, különösen a „szórakoztató” játékok megalkotása, továbbra is erősen emberi készséget igényel.
Záró gondolatok
Willison ajánlja, hogy az ügynökökkel végzett játékkísérletezés jó módja az agent-képességek feltérképezésének: alacsony kockázatú, gyors módszer új ötletek kipróbálására. Ha kitartasz a fejlesztés mellett, elképzelhető, hogy a kiinduló demóból játszhatóbb, élvezetesebb játék lesz.
A demonstrációban szereplő repository és a Claude Code munkamenet elérhetőségeit Willison közzétette a saját naplójában; a branch gyökér index.html-je szolgáltatható, hogy a demót helyben is megnézhessük.
