Simon Willison 2小时前 · 2026-08-06 12:42:25 · 0 阅读

用Claude Fable 5一把搞定一个浣熊劫案游戏

用 Claude Fable 5 一把搞定一个浣熊劫案游戏

2026 年 8 月 5 日

2024 年的时候，我曾在推特上晒过一些截图，展示了一个用 GPT-3 生成的游戏概念，以及用 DALL-E 做的一些"概念美术"。四年后的今天，在那条推特发布四周年之际，我想看看 Claude Fable 5（运行在 Claude Code 网页版上）能不能仅凭那条推特的内容就把整个游戏做出来。结果还挺像样的！

你可以在这里玩这个游戏。这是GitHub 仓库，还有一段简短的演示视频：

你的浏览器不支持 HTML5 视频。

我是怎么做出来的

这就是那条 2022 年 8 月 5 日的推特：

当时我给 GPT-3 的提示是：

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

那时候还是文本补全的时代，你让 GPT-3 把后面的内容续写出来。它续写的内容是：

在《浣熊劫案》中，你和你的偷窃浣熊小队需要执行一系列大胆的抢劫任务。从抢劫银行到窃取无价艺术品，没有你们毛茸茸的团队搞不定的大案小案。你需要运用智慧和本领躲开警察，带着赃物干净利落地逃之夭夭。《浣熊劫案》玩法刺激，角色阵容讨喜，是一款轻松愉快的冒险类游戏，适合所有人。

我给 DALL-E 的提示也很简短：

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

今天的实验：我能不能把这些截图扔进 Fable 5，附上一段提示让它写个游戏，然后放手不管，最后得到一个能跑的游戏？

配置 Claude Code for web 以使用 GitHub Pages

Claude 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），选择“从分支部署”，选中该分支名称，然后点击保存。

就这么简单！每次推送后大约 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 作为一点额外的趣味——这是最终的文件，以及它添加狗时的那条记录：

新的升级：从第三夜开始，院子里会出现一只巡逻的护卫犬——一只低多边形棕色猎犬，戴着带尖刺的红色项圈，尾巴摇摆。它会在随机地点之间游荡，在 12 个单位范围内，它会嗅到你的气味并追踪你（视线无关紧要——全靠鼻子，头顶会显示一个 👃 并伴有吠叫声）。如果你拉开 17 个单位的距离，它就会放弃。被抓到的消息现在按来源区分：警卫 / 车灯 / 猎犬。已通过自动化测试验证了游荡 → 追踪 → 被抓的流程。

回顾对话记录

你可以访问 Claude Code 共享会话，同时我用自己的 claude-code-transcripts 工具导出了 HTML 版本，点此查看。

Fable 先创建了一个 index 页面，内嵌了 Three.js，然后自己写了一个 gen_textures.py 脚本（源码在此）。

它生成了贴图并抽样检查确保效果没问题。它为垃圾桶生成的 metal.jpg 文件效果如下，不过我觉得在游戏里贴得并不太对：

深蓝灰色铆钉金属面板的游戏贴图集，左上角是一个带把手的圆形舱盖，中间是带瓦楞的波纹板，左下角是一块普通圆形板，顶部和底部是扁平的条带。无文字。

接着它构建出游戏的第一版基础版本，然后决定用 Playwright 在预装的 Chromium 里做"冒烟测试"。这样它就能给自己的成果截图然后肉眼检查。桌面端和移动端宽度都跑了一遍后，它发现移动端宽度下浣熊看不见了，于是修复了这个问题：

浣熊、藏身处垃圾桶以及两个同伙浣熊在移动端都能完美显示了。提交这个关键修复。

它决定生成一个标题画面，并借助这个 gen_title.py 脚本完成了。以下是它使用的 gpt-image-2 提示词：

视频游戏主视觉图，低多边形3D渲染风格，夜间氛围：一只可爱的低多边形浣熊戴着黑色小面罩，后腿站立偷偷摸摸地叼着一枚发光的金币，旁边是一个翻倒的金属垃圾桶，背景是带有温暖灯光的郊区房屋，深蓝色夜空，满月，萤火虫，电影感轮廓光，充满魅力的抢劫氛围。无文字，无单词，无标志。

最终生成的图像（Claude 认为它“美极了”）——不过我注意到，在桌面端显示时，它被裁剪到只剩顶部三分之一，连浣熊都看不到了！

多边形风格的浣熊，旁边是翻倒的垃圾桶，它叼着一枚金币，背景是房屋和月亮。

然后是我最喜欢的改动：它加入了那只狗：

```javascript 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, 0.8, -0.62); tail.rotation.x = 0.8; g.add(tail); // 带尖刺的项圈 const collar = new THREE.Mesh(new THREE.TorusGeometry(0.22, 0.05, 6, 12), M(0xc0392b)); collar.position.set(0, 0.78, 0.5); collar.rotation.x = Math.PI / 2.4; g.add(collar); const legGeo = new THREE.CylinderGeometry(0.07, 0.09, 0.34, 6); const legs = []; for (const [x, z] of [[-0.22, 0.35], [0.22, 0.35], [-0.22, -0.35], [0.22, -0.35]]) { const leg = new THREE.Mesh(legGeo, M(DARK)); leg.position.set(x, 0.17, z); g.add(leg); legs.push(leg); } let phase = Math.random() * 10; return { group: g, animate(dt, speed) { phase += dt * (3 + speed * 10); const amp = Math.min(0.6, 0.1 + speed * 0.6); legs[0].rotation.x = Math.sin(phase) * amp; legs[3].rotation.x = Math.sin(phase) * amp; legs[1].rotation.x = -Math.sin(phase) * amp; legs[2].rotation.x = -Math.sin(phase) * amp; tail.rotation.z = Math.sin(phase * 1.5) * 0.4; body.position.y = 0.55 + Math.abs(Math.sin(phase)) * 0.04 * (0.3 + speed); }, }; } ```

我用 Playwright 做了一轮测试，还截了张图。

  // 靠近狗
  await page.evaluate(() => { const d = window.__rh.dog; window.__rh.teleport(d.x + 6, d.z); });
  await page.waitForTimeout(2000);
  info = await page.evaluate(() => JSON.stringify({ dog: window.__rh.dog, state: window.__rh.state, player: window.__rh.debug().player }));
  console.log('靠近后:', info);
  await page.waitForTimeout(3000);
  info = await page.evaluate(() => JSON.stringify({ dog: window.__rh.dog, state: window.__rh.state }));
  console.log('追逐后:', info);
  await page.screenshot({ path: __dirname + '/shot-dog.png' });

游戏截图。第三夜，浣熊在画面中间与狗相遇。显示文字：被逮住了！警卫把你赶走了！屏幕边缘泛红。

它又做了几处调整，然后宣布完工：

《浣熊大劫案》已构建、测试并推送——在 claude/3d-raccoon-heist-game-50n293 分支上提交了 7 次，全部通过 Playwright 在桌面端、竖屏手机和横屏手机视口上的自动化游玩验证。

游戏内容：你是一只戴着面具的浣熊，从同伴的垃圾箱藏身处溜进月光下的死胡同。收集硬币、宝石、戒指、甜甜圈和鱼（它们会堆叠在你背上，让你速度变慢），然后在天亮前蹒跚回家存好。每晚目标提高，危险也升级：第一夜有一个手电筒巡逻的警卫，第二夜有两个，第三夜增加一只完全无视视线的嗅觉追踪猎犬。一辆警车用前灯扫射街道，房主会随机从窗户探出头来，海鸥会不时俯冲偷走你未上缴的战利品，披萨片能触发 6 秒的速度狂飙，稀有的金色电视值 120 分——前提是你扛得动。获胜等级：垃圾熊猫 ⭐ → 飞贼 ⭐⭐ → 伪装大师 ⭐⭐⭐，最佳成绩会保存在 localStorage 中。

构建方式： 内嵌了 Three.js（不使用 CDN），角色采用程序化低多边形风格，配乐也是程序化生成的 WebAudio 音轨（鬼鬼祟祟的行走贝斯爵士乐加所有音效——零音频文件）。全部七张地面/墙壁纹理以及标题画面的主角美术图均由 gpt-image-2 生成，并作为静态资源提交，因此部署后的游戏不会发起任何 API 调用。移动端配备动态触控摇杆（触碰任意位置即出现）外加一个 DASH 按钮；桌面端使用 WASD/方向键和空格键。

测试中发现了两个值得一提的真实 Bug： 画布在真实手机上会以 2 倍尺寸渲染（一次 cssText 赋值清除了 Three.js 的内联尺寸——桌面端 DPR-1 测试完全掩盖了这个问题）；胜利画面的星级评分 div 继承了标题画面的全屏 .stars CSS，导致“下一夜”按钮上的每次点击都被静默吞掉。这两个问题都已修复并进行了回归测试，同时测试的还有拾取、存钱、追逐/被抓、黎明、夜晚推进以及失败/重试流程。

notes.md 中有完整的构建日志。游戏已在分支上上线——只需提供仓库根目录并打开 index.html 即可。

这游戏好玩吗？

它是一个令人印象深刻的起点，但算不上一个好游戏。

你操控浣熊在院子里移动，收集物品——甜甜圈、鱼、金币、珠宝——同时要避开拿着手电筒的守卫，后期关卡还要躲避一条狗。你的携带能力有限，一旦装满就需要把东西扔到垃圾箱里。如果捡到一块披萨，你会获得暂时的速度提升。

完全没有团队机制——垃圾箱旁边有两只静止的浣熊，但它们纯粹是装饰。

随着关卡推进，游戏会稍微增加一些挑战性——第 3 关引入的狗是最有趣的新机制——但通关非常非常容易。而且相当无聊——每个夜晚有固定时长，你可以收集完所有物品，然后在等待黎明时无事可做。

我对实现方式印象深刻。它是全 3D 的，有垃圾桶，手电筒的光锥效果很有趣，并且拥有相当一致的视觉风格。在移动端也能运行。音乐（根据 Claude 的说法，“程序化生成的 WebAudio 音轨（鬼鬼祟祟的行走贝斯爵士乐加所有音效——零音频文件）”）虽然简单，但感觉恰到好处。

作为一个完整的游戏项目，它只能算平庸。但作为仅凭一句提示词生成的起点，我认为它已经相当惊艳了。

我用 vibe coding 方式做过不少游戏了。从可玩性来看，它们都令人大失所望——事实证明，设计出有趣的游戏依然是人类独有的天赋，而且需要比 Claude 或我所能提供的多得多的技巧和经验。

话虽如此，我还是强烈推荐通过捣鼓游戏开发项目来探索智能体的能力边界。这是一种有趣且低风险的新尝试方式。如果你能坚持足够久，说不定真能做出值得一玩的作品！

原始来源： Simon Willison

用Claude Fable 5一把搞定一个浣熊劫案游戏