用Claude Fable 5一次生成完整浣熊抢劫游戏

使用Claude Fable 5一次生成完整浣熊抢劫游戏2026年8月5日早在2024年，我就在推特上发布了由GPT-3生成的游戏概念截图，以及用DALL-E创建的一些概念“艺术”。

今天，在那条推文发布四周年之际，我决定看看Claude Fable 5（在Claude Code for web中运行）能否仅凭那条推文的内容构建整个游戏。它完成得相当不错！你可以在这里试玩这个游戏。

以下是一段简短视频演示：我是如何构建这个的这是2022年8月5日的推文：我当时给GPT-3的提示词是：写一个电脑游戏的详细产品描述，游戏内容是一队浣熊去抢劫。那还是文本补全的时代，你需要让GPT-3补全剩余文本。

它补全的内容是：在《浣熊抢劫》中，你和你的浣熊小偷团队的任务是完成一系列大胆的抢劫。从抢银行到偷无价艺术品，对于你的毛茸茸团队来说，没有太大或太小的任务。你需要运用智慧和技能躲避警察，带着战利品干净利落地逃走。

凭借刺激的游戏玩法和迷人的角色阵容，《浣熊抢劫》是任何寻求轻松诙谐冒险的人的完美游戏。我给DALL-E的提示词很短：一队浣熊实施抢劫的视频游戏截图今天的实验：我能否将这些截图连同提示词一起扔给Fable 5，让它编写一个游戏，然后放手不管，最终得到一个可运行的游戏？

将Claude Code for web设置为使用GitHub PagesClaude Code for web的一个令人沮丧之处在于，当它还在工作时，很难测试它正在构建的内容。我一直在用GitHub Pages来绕过这个限制，发现效果非常好。

我的流程如下：- 在https://github.com/new为项目创建一个新仓库——可以是公开或私有，这个技巧对两者同样有效。

- 在Claude iPhone或桌面应用中，或在浏览器中打开https://claude.ai/code，启动Claude Code for web会话。- 告诉Claude要做什么，并鼓励它尽快提交一个index.html页面。

这会创建一个类似claude/3d-raccoon-heist-game-50n293的分支。

- 进入仓库的Settings -> Pages区域（我的例子是github.com/simonw/raccoon-heist/settings/pages），选择“Deploy from a branch”，选择分支名，然后点击保存。

就这么简单！每次推送后约30秒内，最新内容就会出现在yourname.github.io/your-repo/。如果你用私有仓库这样做，任何能猜到仓库名的人都能看到发布的内容。我自己对此不太担心。

Fable 5的提示词以下是我给Fable 5的提示词（写在我手机上的笔记应用里——整个项目都是在移动端进行的）。我附上了原始推文中的两张图片。为浏览器构建这个3D游戏。

这个仓库配置为提供静态文件，所以确保有一个index.html能加载所有其他内容。确保它适合移动端（触摸控制，在小屏幕上运行良好）。你有一个OpenAI API密钥，可以访问他们的图像生成模型API，用它来为你的3D模型生成纹理。

文档在这里：https://developers.openai.com/api/docs/guides/image-generation - 使用gpt-image-2。独立工作——不要让我做任何进一步的设计决策。

确保游戏有趣、有点惊喜、有良好的浣熊抢劫氛围，并且视觉上令人愉悦。尽可能频繁地提交和推送，以便我能预览你的工作——先从一个显示标题画面的index.html开始，然后在此基础上构建。工作时在notes.md文件中追加内容，并将对该文件的更改包含在每次提交中。

我没有做任何技术选择。我（正确地）猜测它可能会基于之前的实验使用Three.js。事实证明，让Claude访问OpenAI密钥能很好地填补其能力空白——在这个案例中，我们需要某种方式来生成用作纹理的图像。

Fable非常擅长提示图像生成器！我说“独立工作——不要让我做任何进一步的设计决策”，因为我想看看它能否在没有任何进一步输入的情况下制作一个完整、可运行的游戏。我还说“尽可能频繁地提交和推送，以便我能预览你的工作”。

当你在Claude iPhone应用中使用Claude Code时，你给它一个GitHub仓库，它在一个分支中工作。告诉它“尽可能频繁地推送”意味着提交会立即开始进入该分支。

我喜欢要求notes.md作为一点额外的风味——这是完成的文件，以及它添加狗时做的记录：新的升级：从第3晚开始，院子里会出现一只巡逻的看门狗——一只低多边形棕色猎犬，戴着带尖刺的红色项圈，尾巴摇摆。

它在随机地点之间游荡，在12个单位内，它会闻到你的气味并通过嗅觉追踪你（视线无关紧要——全靠鼻子，头顶显示👃并吠叫）。如果你拉开17个单位的距离，它就会放弃。被抓的消息现在按来源区分：守卫/车灯/猎犬。

已通过自动化测试验证游荡→追踪→被抓。查看记录你可以访问Claude Code的共享会话，我还用我的claude-code-transcripts工具导出了我自己的HTML版本，你可以在这里找到。

Fable从一个索引页面开始，内置了一份Three.js副本，然后编写了自己的gen_textures.py脚本（副本在此）。它生成了纹理并抽查以确保它们看起来正常。

它为垃圾桶生成的metal.jpg文件看起来像这样，不过我认为它在游戏本身中并没有完全正确应用：然后它构建了游戏的第一个基本版本，接着决定用Playwright“在预装的Chromium中进行冒烟测试”。

这意味着它可以截取自己工作的截图并目视检查。它对页面的桌面和移动宽度都这样做了，然后注意到浣熊在移动宽度下不可见，于是修复了这个问题：浣熊、垃圾箱藏身处和两个浣熊队员现在在移动端完全可见。提交这个关键修复。

它决定生成一个标题画面，使用了这个gen_title.py脚本。

以下是它使用的gpt-image-2提示词：电子游戏关键艺术，低多边形3D渲染风格，情绪化的夜间场景：一只可爱的低多边形浣熊戴着黑色小窃贼面具，用后腿偷偷行走，拿着一枚发光的金币，旁边是一个翻倒的金属垃圾桶，背景是郊区房屋，窗户透出温暖的光，深蓝色夜晚，满月，萤火虫，

电影般的轮廓光，迷人的抢劫冒险氛围。无文字，无标志。生成的图像（Claude认为“华丽”）——不过我注意到，在桌面上显示时，它会被裁剪到只有顶部三分之一，没有浣熊！

然后是我最喜欢的改动：它添加了狗：export function makeDog() {const g = new THREE.Group();const BROWN = 0x8a6440, DARK = 0x5e4128;

const body = new THREE.Mesh(new THREE.SphereGeometry(0.42, 10, 8), M(BROWN));body.scale.set(0.9, 0.8, 1.5);

body.position.y = 0.55;body.castShadow = true;g.add(body);const head = new THREE.Mesh(new THREE.SphereGeometry(0.3, 10, 8), M(BROWN));

head.position.set(0, 0.85, 0.62);g.

add(head);const snout = new THREE.Mesh(new THREE.SphereGeometry(0.16, 8, 6), M(DARK));snout.scale.set(0.9, 0.7, 1.3);

snout.position.set(0, 0.76, 0.9);g.add(snout);const nose = new THREE.Mesh(new THREE.SphereGeometry(0.06, 6, 6), M(BLACK));

nose.position.set(0, 0.78, 1.08);g.add(nose);

for (const s of [-1, 1]) {const ear = new THREE.Mesh(new THREE.SphereGeometry(0.12, 6, 6), M(DARK));

ear.scale.set(0.7, 1.3, 0.5);ear.position.set(0.2 * s, 1.08, 0.55);g.add(ear);

const eye = new THREE.Mesh(new THREE.SphereGeometry(0.05, 6, 6), M(0x1a1a1a, { emissive: 0x331111 }));

eye.position.set(0.13 * s, 0.92, 0.86);g.add(eye);}const tail = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.09, 0.5, 6), M(DARK));

tail.position.set(0,