AI 游戏 开发实战｜我会先用这 4 个 Codex Skills

《旋灯残响》的组队页有个小问题。小队 ID 后面的复制图标像一张单页文件，和常见的双页复制图标差别很大。奖励图标和文字还挤在一起，底栏在短屏上贴得太低。

这次改动用到了几种不同的能力。ImageGen 做了一张可导入 Cocos 的双页图标，Impeccable 帮我们检查哪些位置需要调整，最后打开实际游戏，在两种尺寸下看截图并点击验证。以后换成活动页或排行榜，类似的检查还会再做。把重复的步骤写成自己的 Skill，下次只要给出页面和目标就能重新跑一遍。

这篇选 ImageGen、Impeccable、Playwright 和 Skill Creator，用现成案例演示怎么交代任务、拿到什么结果，以及怎么判断这一步做完了。

先找到 Skill，再交代一件具体的事

Skill 是给 Codex 的一份可复用工作说明。通常是一个目录，至少有一份 SKILL.md。里面可以写触发条件、操作步骤和交付要求，也可以附脚本、示例和素材。比如「活动页做完之后，按两个屏幕尺寸截图，并把无法验证的微信能力列出来」就适合做成一个 Skill。OpenAI 官方 Skill 文档

在支持 Skill 选择器的 Codex 界面里，先确认它是否已经可用，再选中它并写任务。下面示例用 $技能名 表示在 Codex 中显式调用，直接写进对话即可。如果 Playwright 尚未安装，可以在 Codex 中输入 $skill-installer playwright。Impeccable 是独立项目，按作者仓库的安装说明操作。OpenAI 官方安装说明 · Impeccable 官方仓库

图 1　四个 Skills 的配合示例。单独修一个排版问题时，可以直接从界面检查开始。

1. ImageGen｜做一张能导入 Cocos 的图标

组队页的复制图标只占一小块区域。它需要在紫色背景上看得见，缩到按钮尺寸还能看出是两张叠在一起的纸。我们最后导入的是一张 128 × 128 的透明 PNG，放进 Cocos 的 Sprite；复制动作仍由原来的按钮处理。图标负责显示，按钮负责响应点击。ImageGen Skill 源码

图 2　组队页修复时生成并导入工程的双页复制图标。

下次生成同类素材时，可以直接把这段发给 Codex，并附一张现有界面截图。

$imagegen 做一个用于 Cocos 组队页的复制图标。

参考附件里已有图标的暖白色和轻微发光效果。
只生成一枚正视图图标，画两张错开叠放的纸。
输出透明 PNG，边缘留空，图内不放文字、底板或背景图案。
我会把它缩到 24 像素左右放在小队 ID 右边，请给一张缩小后的预览。

拿到图片后，先放到深色背景上看有没有白边或棋盘格，再按实际显示尺寸看两张纸能否分辨。通过后把选中的图片放进工程，用现有按钮上的 Sprite 显示。把生成的尺寸和游戏里显示的尺寸写在任务里，可以减少来回调整。

2. Impeccable｜让 AI 指出界面哪里需要改

界面检查时，我会给 Codex 一张当前截图、一张已经确认的参考图，以及实际要看的设备尺寸。Impeccable 本身覆盖布局、层级和响应式检查。在 Cocos 项目里，可以把这套检查用到真实运行截图上，再把建议落到现有节点和预制体。Impeccable 官方项目说明

$impeccable 检查附件里的 Cocos 组队页，重点看奖励区和底栏。

对照已确认的参考图，在 390×844 和 360×780 下看三件事：
奖励图标有没有压住文字，小队 ID 和复制按钮是否成组，
底部入口有没有贴到安全区。

先给截图标注。每个问题写清楚涉及哪个控件、
建议调哪个位置或尺寸，以及改完后怎么验证。

《旋灯残响》当时的检查记录显示，奖励图标与文字框重叠了 20 个布局单位。调整后，图标和文字分列，标题与说明左边缘对齐。底栏也往上移，并用两种屏幕尺寸检查。图里的前后对比来自这次组队页修复，赛季日期和队员资料是当时的演示数据。

图 3　10 月 31 日组队页修复记录。看奖励区的图文间距，以及左下角的小队 ID 和复制按钮。

3. Playwright｜打开实际游戏，做一次操作再截图

Playwright 可以打开 Web 预览、调整浏览器窗口、按键、点击和截图。Cocos 的格子大多画在 Canvas 里，浏览器的页面结构里通常只有 Canvas；要验证某一格，可以从已知起始状态按键，或者按画面位置点击，然后从游戏状态或截图核对结果。OpenAI Playwright Skill 源码

拿《旋灯残响》的桌面键盘测试举例。进入第 32 关，用方向键选格，截图显示剩余 273 步。再按一次空格，选中的线路旋转，步数变成 272。这组图来自 11 月 12 日运行 Playwright 脚本的记录。装了 Playwright Skill 后，可以把同样的验收步骤交给 Codex。跟做时先启动你自己的 Web 预览，把实际地址和可进入的关卡发给它。

$playwright 打开我提供的本地 Web 预览，进入第 32 关。

使用 1280×760 的窗口，让游戏接收键盘输入。
按方向键选格，记录高亮位置和剩余步数，并截图。
再按一次空格，等旋转动画结束，记录同一格的方向和步数，并截图。
最后把窗口缩到 660×760，检查棋盘和底部工具是否仍然完整。
报告实际看到的结果和页面错误。

图 4　11 月 12 日 Web 构建。方向键选格后仍为 273 步，按一次空格后为 272 步。

这套方法也能拿来检查活动按钮、弹窗返回和短屏布局。换成微信广告、开放数据域或微信 PC 客户端时，再到对应微信环境走一遍，记录宿主里的实际结果。

4. Skill Creator｜把验收步骤存进项目

当「打开页面、截两种尺寸、点主要按钮、记控制台错误」已经跑顺，就可以请 $skill-creator 把它写成项目 Skill。把刚才跑通的对话、可用的预览入口和一份验收结果一起交给它，比让它从零猜项目怎么启动更省事。OpenAI 官方复用工作流教程

图 5　验收复用示意。把截图、操作和结果的记录要求写进 SKILL.md，下次换个页面也能照这套步骤检查。

$skill-creator 把上面已经跑通的浏览器验收步骤做成 game-ui-check。

验收时由我提供预览地址、页面名和要验证的操作。
沿用项目现有预览方式。默认检查 390×844 和 360×780。
结果要写明每个操作的预期、实际结果、截图路径和页面错误。
保存到本仓库的 .agents/skills/game-ui-check/SKILL.md。

也可以从下面这份完整的文件开始。在项目根目录下创建 .agents/skills/game-ui-check/SKILL.md，粘贴保存。

---
name: game-ui-check
description: 按指定步骤验收 Cocos 游戏的本地 Web 预览，适用于界面排版、按钮操作和弹窗回归。
---

1. 读取项目约定。确认预览地址、目标页面和用户指定的验收动作。
2. 以 390×844 和 360×780 打开页面。桌面操作按任务指定窗口尺寸。
3. 等主要内容可见，按要求执行点击、按键或返回。给关键状态截图。
4. 对每项记录预期、实际结果、截图路径和页面错误。
5. 将只能在微信宿主中验证的功能标为待验收，并列出操作步骤。

保存后，在同一仓库发一条实际任务。比如输入「$game-ui-check 用这个本地预览地址检查活动页。两种尺寸都点开活动规则，再返回活动页，检查主按钮是否可见」。第一次运行时，核对预览地址、操作后的截图和待验收项目。漏了一步就改 SKILL.md，再用同一个页面跑一次。OpenAI 官方 Skill 存放位置与调用方式

如果手上已经有个能跑的小游戏，可以从自己的活动页做一遍。先拿到两张不同尺寸的截图，再让 Codex 实际点开和关闭一次规则弹窗。等结果能对照着看清楚，把这套步骤保存下来，下次改版就能用同一套方式检查。