1. 从“虚假广告”到可玩原型这套组合到底在做什么刷短视频时你大概率见过那种广告主角站在废墟里左右横跳一枪一个丧尸屏幕上方不断弹出“100”“暴击”看着特别爽。点进去才发现完全不是那么回事——真正的游戏是竖版割草靠卡牌构筑和枪械养成推进广告画面只是“氛围组”。这个反差本身就是个很好的练手题材用 Claude Code 负责前端逻辑和交互串联用 Holopix AI 负责角色、丧尸、背景、特效等美术素材最后拼出一个能本地跑起来的“虚假广告风”丧尸射击小游戏原型。这套流程适合谁适合已经会一点 HTML/JS、想体验 AI 协作开发完整小项目的前端同学也适合完全不想手写美术、只想验证玩法创意的独立开发者。核心思路是把“写代码”和“出素材”拆成两条并行线Claude Code 在终端里根据你的玩法文档持续迭代代码Holopix AI 在网页端按素材清单批量出图两边通过本地文件目录对接。整个过程不需要你从零画一张图也不需要你手写每一行逻辑但你需要会描述需求、会看报错、会做取舍。我试过把玩法文档先写清楚再让 Claude Code 动手比一上来就让它“写个丧尸游戏”效率高很多。下面按“前置准备 → 项目初始化 → 素材生成 → 交互串联 → 验证 → 排障”的顺序走一遍每一步都给可复制的命令和配置。2. TaoToken 前置给 Claude Code 配一个稳定的模型入口Claude Code CLI 本身是个终端工具它需要连接一个能调用 Claude 系列模型的 API 入口。如果你直接用官方额度跑这种需要反复对话、反复改代码的小项目很容易在关键节点被限流。TaoToken 在这里的角色是提供一个兼容 Anthropic 接口规范的调用入口让你在 Claude Code 里配置好 base_url 和 key 之后就能持续对话不用中途换工具。先拿到 API Key打开 https://taotoken.net/api-keys 登录后创建一个新 key复制保存。注意这个 key 只在创建时完整显示一次丢了就重新建。然后在终端里配置 Claude Code 的环境变量。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个变量你可以写进 shell 配置文件也可以每次启动前 export# 写入 ~/.zshrc 或 ~/.bashrc持久生效 export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你刚才复制的key # 让配置立即生效 source ~/.zshrc如果你不想改全局配置也可以只在当前终端会话里临时设置export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的key claude验证配置是否生效最直接的方式是启动 Claude Code 后问一句“你现在能正常响应吗”能返回内容就说明链路通了。如果报 401多半是 key 复制不完整如果报连接超时检查 base_url 有没有多写斜杠或少了/api。注意base_url 末尾不要带/v1之类的路径Claude Code 会自己拼接。写错路径是最常见的 404 来源。3. 项目初始化目录结构与玩法文档先建一个干净的项目目录把“代码”和“素材”分开后面 Claude Code 改代码、Holopix AI 出图互不干扰mkdir zombie-ad-game cd zombie-ad-game mkdir -p src/assets/{characters,zombies,backgrounds,effects,ui} touch src/index.html src/game.js src/style.css touch 玩法文档.md 素材清单.md目录长这样zombie-ad-game/ ├── src/ │ ├── index.html │ ├── game.js │ ├── style.css │ └── assets/ │ ├── characters/ # 主角、枪械 │ ├── zombies/ # 丧尸 │ ├── backgrounds/ # 竖版场景 │ ├── effects/ # 子弹、击中、宝箱 │ └── ui/ # 按钮、血条 ├── 玩法文档.md └── 素材清单.md接下来写玩法文档.md这是 Claude Code 的“需求说明书”。不要写得太抽象越具体它越不容易跑偏。参考结构# 虚假广告风丧尸射击 - 玩法文档 ## 核心循环 - 竖版画面主角固定在屏幕下方 1/3 处 - 丧尸从上方随机 x 坐标向下移动 - 玩家点击/触摸屏幕发射子弹子弹向上飞行 - 子弹命中丧尸丧尸扣血播放击中特效 - 丧尸到达底部玩家扣血 - 玩家血量归零游戏结束显示得分 ## 数值初版 - 玩家血量100 - 丧尸血量30移动速度 1px/帧 - 子弹伤害10飞行速度 8px/帧 - 击杀得分100 ## 技术约束 - 纯前端HTML Canvas 2D不引入框架 - 所有素材从 src/assets/ 读取 - 用 requestAnimationFrame 驱动主循环写完后让 Claude Code 读一遍并提问题这一步很关键。它会问“丧尸生成频率是多少”“子弹有没有冷却”“得分怎么显示”之类你回答完让它更新文档再开始写代码。这样能避免它自作主张加一堆你用不上的功能。4. 可复制配置让 Claude Code 按文档生成代码在项目根目录启动 Claude Codecd zombie-ad-game claude第一句 prompt 建议这样写把文档路径和约束都带上请阅读 玩法文档.md在 src/ 下生成一个纯前端 Canvas 2D 的丧尸射击小游戏。 要求 1. index.html 引入 game.js 和 style.css 2. game.js 用 requestAnimationFrame 实现主循环包含玩家、丧尸、子弹三个实体数组 3. 素材路径统一走 src/assets/先用占位色块代替图片方便后续替换 4. 代码里加中文注释方便我理解每一段在做什么Claude Code 会开始生成文件。生成完后你本地起一个静态服务器看效果# Python 3 自带 python3 -m http.server 8080 # 或者用 npx npx serve src -l 8080浏览器打开http://localhost:8080应该能看到一个竖版画布点击能发射方块子弹上方有方块丧尸往下走。这一步不追求好看只验证逻辑通不通。如果画面全黑或没反应打开浏览器控制台看报错把报错原文贴回 Claude Code让它修。常见的是 canvas 尺寸没设对、事件监听绑在了错误的元素上。5. 素材生成Holopix AI 出图与目录对接代码骨架跑通后让 Claude Code 生成素材清单.md明确每个素材的文件名、尺寸、用途# 素材清单 | 文件名 | 尺寸 | 用途 | |--------|------|------| | backgrounds/ruins_9x16.png | 1080x1920 | 竖版废墟背景 | | characters/hero.png | 256x256 | 主角持枪站立 | | zombies/zombie_walk.png | 256x256 | 丧尸行走帧 | | effects/bullet.png | 64x64 | 子弹 | | effects/hit.png | 128x128 | 击中特效 | | effects/chest.png | 128x128 | 死亡宝箱 | | ui/btn_start.png | 256x128 | 开始按钮 |然后打开 Holopix AI 首页点「一键成稿」选模型 → 场景 → 搜“竖版”选「竖版空白场景模型 | HOLO-V1」。在正向描述词里写清楚你要的画面比如“废墟城市街道竖版构图黄昏色调远处有破损建筑地面有碎石和废弃车辆游戏背景无人物”。点“智能优化”让 AI 润色描述词再点“确认使用”生成。生成后如果比例不对鼠标移到图片上点“用作参考图”选“智能扩图”选 9:16 再生成。这样出来的背景就是标准竖版直接丢进src/assets/backgrounds/。角色和丧尸用“图片推词 创意草图”或“相似图裂变”两种方式复刻。前者适合你有参考图、想保留动作姿势后者适合你只有一张喜欢的风格图、想批量出同系列。生成后如果细节不够用“超清放大”处理一遍再导出到对应目录。素材全部就位后回到 Claude Code让它把占位色块替换成真实图片src/assets/ 下的素材已经准备好了请把 game.js 里的占位绘制逻辑改成加载对应图片 路径按 素材清单.md 来。加载失败时保留色块兜底方便排查。6. 验证请求与成功结果替换素材后刷新页面你应该能看到竖版废墟背景铺满画布主角在下方丧尸从上方出现并向下移动点击发射子弹命中后播放击中特效击杀后掉落宝箱。如果某个素材没显示先看控制台是不是 404再检查文件名大小写是否和代码里一致。验证模型链路是否正常可以在 Claude Code 里直接问一句“帮我解释一下 game.js 里子弹和丧尸的碰撞检测是怎么写的”能正常返回说明 API 调用没问题。如果你想在网页端直接对话验证可以打开 https://taotoken.net/api 对应的模型对话入口选 Claude 系列模型发一条测试消息看响应。长期做这类小项目建议用 Coding Plan额度更稳不用每次担心对话到一半被限。配置方式和单次 key 一样只是套餐层面更划算。7. 本篇常见错排查报错一Failed to load resource: 404素材路径写错或文件名大小写不匹配。Linux 和 macOS 默认大小写敏感Hero.png和hero.png是两个文件。统一用小写加下划线命名。报错二Uncaught TypeError: Cannot read properties of undefined多半是实体数组在遍历时被修改了。比如子弹命中后从数组里删除但循环还在继续。让 Claude Code 改成倒序遍历或先标记再统一清理。报错三画面卡顿、帧率低每帧都在创建新对象或重复加载图片。把图片加载放到初始化阶段主循环里只做绘制和位置更新。让 Claude Code 检查有没有在requestAnimationFrame回调里new Image()。报错四Claude Code 返回 401 或 403API Key 失效或没配置。重新执行export ANTHROPIC_API_KEY...确认当前终端会话里echo $ANTHROPIC_API_KEY有值。如果用的是新开的终端窗口之前的 export 不会继承。报错五点击没反应事件监听绑在了 canvas 上但 canvas 被其他元素遮挡或者触摸事件和鼠标事件重复触发。让 Claude Code 统一用 pointer 事件并在回调里加e.preventDefault()。报错六丧尸生成太密或太稀调整生成间隔参数。在玩法文档.md里补一句“丧尸每 1.5 秒生成一只随得分提高逐渐缩短到 0.6 秒”让 Claude Code 按这个改。8. 继续打磨与接入入口基础版本跑通后下一步通常是加枪械切换、卡牌构筑、数值平衡。这些都可以继续用同一套流程先改玩法文档.md再让 Claude Code 按文档改代码素材不够就回 Holopix AI 补图。整个项目不需要你手写一行绘图代码但你需要持续做“需求翻译”和“效果验收”。如果你在配置 Claude Code 或调用模型时遇到问题先去 https://taotoken.net/api-keys 确认 key 状态再看 https://taotoken.net/api 的接入文档核对 base_url 和参数格式。需要长期跑编码类任务的话Coding Plan 的额度模型更适合这种反复对话的场景。