Claude软件写代码交付AI 评分 · 76/100AI 辅助编辑·未发现明显提示词注入风险X

用 Claude Code + three.js 做零外部素材的猫咪餐厅游戏

设计文档先行 → 代码逐块搭建 → 关卡编辑器 → 自动试玩反馈

有一点经验步骤流程贴士
给谁
有前端基础、想用 AI 编码助手做浏览器小游戏的开发者
你会得到
零外部素材的 three.js 猫咪餐厅，含完整玩法循环、可拖拽关卡编辑器和自动回归测试
你需要
Claude Code

硬约束

前置条件：Claude Code 可用；具备 three.js 或 WebGL 基础；无外部美术素材，全部用代码生成几何体与材质。流程核心：先写设计文档（CLAUDE.md + 经济/美术/音效/事件文档），再让 Claude Code 按文档逐块实现；每新增一个玩法循环就测试；最后用自动试玩脚本做回归测试。

他们做了什么

作者 anulagarwal 使用 Claude Code 和 three.js 开发了一款零外部素材的猫咪餐厅网页游戏。项目从视觉参考简报开始，建立 CLAUDE.md 和四份设计文档作为单一真相源；所有猫咪、碗、池塘、树木均用代码生成的几何体实现；玩法按单个循环逐步添加；Claude Code 还实现了一个可拖拽的关卡编辑器；每次构建都埋设漏斗事件并做真人试玩；同时维护一个 15 分钟的自动试玩脚本做回归测试。

效果如何

作者报告称，真人试玩发现了首次购买引导的缺口，据此重新设计了引导流程；15 分钟自动试玩脚本发现了卡住的订单和猫咪无法到达的座位——这些问题都没有抛出错误，仅靠自动测试暴露。（来源：作者自述）

值得知道

作者总结两条关键规则：1）构建的代理永远不是批准的代理，需分离角色；2）每次裁决都写入文件，形成 playbook，下一个项目从零开始。建议从最小闭环开始：先跑通「胡萝卜→汤→硬币」这一个循环，再扩展其余内容。本案例未提供 CLAUDE.md 原文、关卡编辑器代码或自动试玩脚本，读者需自行实现对应部分。

步骤

  1. 写视觉参考简报

    收集参考图并写一句话风格定位。例如：「Cats & Soup 氛围 + Monkey Mart 可读性」，附上喜欢的截图。把这份简报作为后续所有美术决策的锚点。

  2. 建立 CLAUDE.md 与设计文档

    在项目根目录创建 CLAUDE.md，写入编码规则；再建立经济、美术、音效、事件四份设计文档，作为单一真相源。Claude Code 在实现时不猜测，只按文档执行。

  3. 代码逐块搭建美术资产

    不用任何导入素材，全部用 three.js 基础几何体代码生成：大头猫咪（四足奔跑）、胡萝卜、汤锅、厨师猫搅拌动画等。每完成一个资产就本地预览确认风格一致。

  4. 逐个实现玩法循环

    一次只做一个闭环：搬运胡萝卜 → 煮汤 → 上桌 → 收钱 → 雇佣帮手 → 钓鱼 → 解锁第二道菜谱。每个循环跑通后再加下一个，避免同时维护多条未验证逻辑。

  5. 让 Claude Code 做关卡编辑器

    要求 Claude Code 实现一个可视化关卡编辑器：拖拽调整各工作站位置，生成布局数据，粘贴回项目即可生效。作者描述「拖完贴回去，它就能原样发布」。

  6. 每次构建都埋点并做真人试玩

    在关键漏斗步骤埋事件。真人试玩发现首次购买引导存在缺口，据此重新设计新手引导。用真实行为数据而非假设驱动迭代。

  7. 跑 15 分钟自动试玩脚本

    每次测试运行启动一个 15 分钟的 autopilot，自动走完完整游戏流程。它曾发现：卡住的订单、猫咪无法到达的座位——这些问题都没有抛错，仅靠自动测试暴露。

  8. 带原因的精确反馈

    向 Claude Code 提修改时给出具体理由，例如：「相机抖动，加个死区」「这个缩放要能看清猫脸」。有上下文的反馈比模糊描述更容易得到正确改动。

可复制提示词

参考提示词 · 本站建议版本。使用前确认粘贴位置、输入变量及输出格式。

这一段是提示词，页面不会在这里插入广告。

无提示词，按步骤操作即可。

本案例无可复制主提示词。核心是可复用的流程：先写文档再编码、逐循环验证、自动回归测试。

来源

用 Claude Code + three.js 做零外部素材的猫咪餐厅游戏：先写设计文档再建、逐个玩法循环、自建关卡编辑器、15 分钟自动试玩测试 · anulagarwal · X · 2026-10-15T05:11:31.000Z

留言与反馈

试过这个方法吗？分享效果、遇到的问题或改进建议。留言审核后公开，请勿填写敏感信息。

正在加载…

    相关用例