用Claude Fable 5从旧推文一键生成完整3D游戏

Back in 2024 I tweeted screenshots of a game concept generated by GPT-3 and some concept "art" created using DALL-E. Today, on the fourth anniversary of that tweet, I decided to see if Claude Fable 5 (running in Claude Code for web) could build the entire game from the content of that tweet. It did a pretty good job of it!

You can play the game here. Here's a short video demo:

Your browser does not support HTML5 video.

How I built this

This is the August 5th, 2022 tweet:

My GPT-3 prompt back then was:

Write a detailed product description of a computer game where a team of raccoons go on heists.

This was in the text completion days, where you asked GPT-3 to complete the rest of the text. It completed:

In "Raccoon Heist", you and your team of thieving raccoons are tasked with pulling off a series of daring heists. From robbing banks to stealing priceless art, no job is too big or too small for your furry crew. You'll need to use your wits and your skills to avoid the police and make a clean getaway with the loot. With exciting gameplay and a charming cast of characters, "Raccoon Heist" is the perfect game for anyone looking for a light-hearted caper.

My prompt to DALL-E was short:

Screenshot from a video game where a team of raccoons go on a heist

Today's experiment: can I dump those screenshots into Fable 5 with a prompt telling it to write a game, then leave it to its own devices and get a working game at the end?

Setting Claude Code for web up to use GitHub Pages

A frustrating thing about Claude Code for web is that it can be hard to test what it's working on while it's still working.

I've been using GitHub Pages to work around that limitation, and found it to work really well.

Here's my process:

• Create a new repository for the project at https://github.com/new - this can be public or private, the trick works equally well for both.
• Start a Claude Code for web session, in the Claude iPhone or Desktop apps or in the browser at https://claude.ai/code
• Tell Claude what to work on, and encourage it to commit an index.html page as quickly as possible. This will create a branch with a name like claude/3d-raccoon-heist-game-50n293
• Navigate to the Settings -> Pages area for the repository (github.com/simonw/raccoon-heist/settings/pages in my case), select "Deploy from a branch", pick the branch name, and hit Save.

That's all it takes! Within about 30 seconds of each push the latest content will be visible at yourname.github.io/your-repo/.

If you do this with a private repo, anyone who can guess the name of the repo will be able to view the published content. I don't worry much about this myself.

The Fable 5 prompt

Here's the prompt I gave Fable 5 (written in the notes app on my phone - this entire project was conducted on mobile). I accompanied it with the two images from the original tweet.

Build this 3D game, for the browser.

This repo is configured to serve static files so make sure there is an index.html that loads everything else.

Make sure it is mobile-friendly (touch controls, works well on small screens).

You have an OpenAI API key and access to their image generation model APIs, use that for textures to use with your 3D models. Docs here: https://developers.openai.com/api/docs/guides/image-generation - use gpt-image-2

Work independently - do not ask me to make any further design decisions. Make sure the game is fun, a little surprising, has good raccoon heist vibes, and is visually pleasing.

Commit and push as often as possible so I can preview your work - start with an index.html that presents a title screen, then build from there.

Append to a notes.md file as you work, including your changes to that as part of every commit.

I didn't make any technology choices. I assumed (correctly) that it would probably use Three.js based on previous experiments.

Giving Claude access to an OpenAI key turns out to work really well for filling in gaps in its capabilities - in this case we needed some way to generate images to use as textures. Fable is very good at prompting image generators!

I said "Work independently - do not ask me to make any further design decisions" because I wanted to see if it could produce a full, working game without any further input from me.

I also said "Commit and push as often as possible so I can preview your work". When you use Claude Code in the Claude iPhone app you give it a GitHub repository and it works in a branch. Telling it to "push as often as possible" means commits start landing in that branch straight away.

I like asking for notes.md as a bit of added flavor - here's that finished file, and the entry it made when it added the dog:

New escalation: from night 3 the yards get a patrolling guard dog — a low-poly brown hound with a spiked red collar and a wagging tail. It wanders between random spots, and within 12 units it catches your scent and tracks you by smell (line of sight is irrelevant — it's all nose, shown by a 👃 over its head and barking). It gives up if you open a 17-unit gap. Getting caught messages are now source-specific: guard / headlights / hound. Verified wander → track → caught with an automated test.

Reviewing the transcript

You can access the Claude Code shared session, and I also used my claude-code-transcripts tool to export my own HTML version which you can find here.

Fable started with an index page, vendored a copy of Three.js, then wrote its own gen_textures.py script (copy here).

It generated the textures and spot-checked them to make sure they looked OK. The metal.jpg file it generated for the trash can looks like this, though I don't think it was applied exactly right in the game itself:

Then it built out the first basic version of the game, then decided to "smoke-test in the pre-installed Chromium" using Playwright. This meant it could take screenshots of its own work and eyeball them. It did that for both desktop and mobile widths of the page, then noticed that the raccoon was invisible at mobile widths, so it fixed that:

The raccoon, dumpster hideout, and both crew raccoons are now perfectly visible on mobile. Committing this critical fix.

It decided to generate a title screen, which it did using this gen_title.py script. Here's the gpt-image-2 prompt it used for that:

Video game key art, low-poly 3D render style, moody nighttime scene: a cute low-poly raccoon wearing a tiny black burglar mask sneaking on its hind legs carrying a glowing gold coin, next to a tipped-over metal trash can, suburban house with warm glowing windows in the background, deep blue night, full moon, fireflies, cinematic rim lighting, charming heist caper mood. No text, no words, no logos.

And the resulting image (which Claude thought was "gorgeous") - though I note that when it's shown on desktop it gets cropped to just the top third without the raccoon!

Then my favorite change: it added the dog: