用 AI agent 做游戏 UI：血条、技能冷却、魔法阵和烟花
让 coding agent 做出手机上也好读的游戏 UI 的检查清单，外加一个现成组件的免费 skill。
跟 agent 说"做个血条"，通常拿到的是一个从 100 直接跳到 60 的普通 div。玩家是扫一眼就读游戏 UI 的，细节很关键：残血延迟、冷却扇形、能跳过的对话框。
好的游戏 UI 是什么样
| 组件 | 关键细节 |
|---|---|
| 血条 | 前景立刻掉，黄色残血层随后追上，低血量时脉动 |
| 技能按钮 | 扇形冷却、倒计时数字、就绪光圈、键盘快捷键 |
| 对话框 | 打字机效果，标点处停顿；第一次点击补全，第二次翻页 |
| 通知 | 成就滑入，最多叠 4 条，到时消失 |
| 魔法阵 | 倾斜展开，几层圆环反向旋转，符文逐个点亮 |
| 烟花 | 弹体升空后炸成菊花、圆环、垂柳或心形；弱设备自动减粒子 |
用 game-ui-kit
免费的 game-ui-kit skill 把这些都做成了零依赖模块（game-ui.js、game-ui.css、game-fx.js）。装好后对 agent 说：
用 game-ui-kit。HUD 加血条和两个技能按钮（Q、E），施法时在角色脚下放魔法阵，通关时放烟花。
魔法阵和烟花画在一块透明的全屏画布上，没有特效时会停掉动画循环：
import { createFxLayer, magicCircle, fireworkShow } from './game-fx.js';
const fx = createFxLayer();
const circle = magicCircle(fx, { x: player.x, y: player.y, radius: 120 });
// 施法结束
circle.dismiss();
// 通关
await fireworkShow(fx, { n: 6 });
切下一关时可以配合 screen-transition-kit。
在手机上检查
- 390×844 下不遮挡主要操作区。
- 技能按钮至少 56 像素，方便点。
- 反复打开、关闭魔法阵，没有 console 报错。
在 game-ui-kit 在线演示里可以直接看效果。