企业官网建设流程全解析

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_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你刚才复制的key" # 让配置立即生效 source ~/.zshrc

如果你不想改全局配置，也可以只在当前终端会话里临时设置：

export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的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 Code：

cd 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 的额度模型更适合这种反复对话的场景。