Codex Subagents 实战：从零开发一个浏览器小游戏

前两篇讲的是让 AI 处理已有代码，这篇升级一档：从零开发一个产品。你会看到怎么用多个 agent 分工协作，开发一款可以在浏览器里直接跑的太空射击游戏，从设计文档，视觉资产，到测试验证，全程走一遍。

开始前：两个配置文件

PLAN.md：先把游戏"写清楚"，再让 AI 动手

在项目根目录创建 PLAN.md，把游戏的核心逻辑、控制方式、胜负条件全部写进去。下面是一个完整的示例：

# 太空射击游戏 PLAN.md

## 玩家目标
消灭所有敌机，保护飞船血量不归零。

## 主循环
敌机从屏幕顶部持续刷新，玩家飞船在底部横向移动射击。
击落敌机得分，敌机子弹打中玩家扣血。每隔30秒增加一波更快的敌机。

## 输入控制
- 键盘：方向键移动，空格键射击
- 触屏：左右滑动移动，点击射击

## 胜负条件
- 胜：通过5关，每关消灭规定数量敌机
- 败：血量归零

## 难度递进
关卡越高，敌机速度越快、子弹越密、血量上限略增

## 视觉风格
像素风，深色太空背景，霓虹色飞船和敌机

## 技术栈
Next.js + Phaser.js，纯前端，部署到 Vercel

## 里程碑顺序
1. 基础场景：背景 + 玩家飞船移动
2. 射击和碰撞检测
3. 敌机生成和 AI 移动
4. 血量/得分/关卡 UI
5. 视觉资产替换（精灵图）
6. 音效
7. 发布

PLAN.md 写得越具体，AI 生成的第一版越接近你想要的结果，后期迭代次数越少。 不用追求文学性，把玩法逻辑说清楚就够了。

AGENTS.md：告诉各个 agent 怎么工作

AGENTS.md 放在项目根目录，定义技术栈、开发规范和工具使用方式。它是所有 agent 的共同行动准则：

# 太空射击游戏

2D 横版射击游戏，Phaser.js 渲染，Next.js 托管。

## 技术栈
- Next.js（前端框架，部署 Vercel）
- Phaser.js（游戏渲染引擎）
- 无后端（纯前端游戏）

## Skills
- $imagegen：生成游戏视觉资产（精灵图、背景、UI）
- $playwright-interactive：在真实浏览器里运行游戏并截图验证
- $openai-docs：获取最新 OpenAI API 文档

## 开发规范
- 每完成一个里程碑，用 build 命令验证能跑通
- 参考 PLAN.md 决定下一步要做什么
- 用 $playwright-interactive 在真实浏览器里测试每一个新功能，截图记录效果
- 用 $imagegen 生成所有精灵图和背景，每次生成后把 prompt 存到 .prompts/ 文件夹，方便复用
- 工作日志记录到 .logs/ 目录

两个文件准备好之后，就可以启动了。

启动游戏开发

用下面这个 starter prompt 发出指令，让各 agent 并行开始工作：

使用 $playwright-interactive 和 $imagegen 按照 PLAN.md 开发这个游戏。

分工如下：
1. 先用 explorer 读取 PLAN.md，输出第一个里程碑的具体任务清单
2. 同时用 $imagegen 生成第一批视觉资产：

- 玩家飞船精灵图（像素风，霓虹蓝）
- 3种敌机精灵图（像素风，红/橙/紫）
- 深色星空背景
   把每张图的生成 prompt 存到 .prompts/ 文件夹
3. worker 实现里程碑1：基础场景搭建 + 玩家移动
4. 里程碑1完成后，用 $playwright-interactive 在浏览器里跑一遍，截图确认效果
5. 把工作记录写到 .logs/milestone-1.md

完成后告诉我里程碑1的状态和截图。

不要一口气让 AI 把所有7个里程碑一次开发完。 按里程碑推进，每个里程碑看一下效果，确认没问题再继续下一个，出问题也好定位。

小贴士：启动前确认以下工具已准备好——

• $imagegen、$playwright-interactive、$openai-docs 是 OpenAI 官方提供的 Skill，需要在 AGENTS.md 里声明启用后 Codex 才会加载，不会自动可用。

• explorer 是 Codex 内置的只读 agent，开箱即用，无需任何配置，专门负责读取和分析代码，不做修改。

迭代的方法

开发过程不是一次就完美的。下面是三种最常用的迭代方式。

1. 用截图反馈

拿到截图之后，直接描述你看到的问题：

这是当前效果截图：[截图]
敌机移动太快了，难度太高。
飞船精灵图太小，看起来不显眼。
请调整这两点，再截图给我看。

截图是最直接的反馈载体，比文字描述"感觉哪里不对"要精确得多。

2. 视觉风格调整

背景太暗，看不清飞船。
用 $imagegen 重新生成背景，要求：深蓝星空，加一些星云效果，亮度提高20%。
把新 prompt 更新到 .prompts/background.md。

每次调整视觉资产，都让 agent 同步更新 .prompts/ 里的记录，原因在下一节说明。

3. 加新功能

在第3关加一个 Boss 敌机：
- 体积是普通敌机的3倍
- 有独立血条 UI
- 被击中时有闪烁效果
先更新 PLAN.md，再实现，用 Playwright 验证。

加新功能时，先让 agent 更新 PLAN.md，再开始实现。这样设计文档和代码始终保持同步。

一个实用技巧

把图片生成的 prompt 存起来。

用 $imagegen 生成资产时，一定要让 agent 把 prompt 存到 .prompts/ 文件夹。原因很直接：游戏迭代时需要追加新资产，如果 prompt 丢了，新图和旧图风格对不上——飞船是像素风，新加的 Boss 变成写实风，画面会很割裂。

小贴士：.prompts/ 文件夹可以按资产类型组织，比如 .prompts/ships.md、.prompts/backgrounds.md，方便后期统一风格检查。

有了存档的 prompt，重新生成或微调时只需要在原 prompt 上加一两个修饰词，而不是从头描述。

最后

这个系列三篇到这里，从最简单的日常改 bug，到批量自动化，再到多 agent 协作开发完整游戏，难度是递进的。Subagents 的核心用法其实就一句话：把任务拆成多块，每块交给一个专职 agent，让它们并行干。无论是分析代码还是开发产品，这个思路都通用。

下一次打开编辑器，试着先写一份 PLAN.md。