关于 threejs-game-ui-designer
面向 Three.js 游戏开发者的界面设计技能，适用于 HUD、菜单、覆盖层和触控操作。它将界面连接到游戏状态，并检查实际状态、文本适配及不同视口下的表现。
主要功能
- 01HUD 与菜单设计流程
- 02界面状态盘点
- 03响应式布局检查
- 04连接游戏状态
- 05检查文本适配与重叠
适用场景
- 01改进游戏 HUD
- 02设计暂停和设置菜单
- 03为移动设备添加触控操作
- 04检查桌面与移动端界面
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/threejs-game-ui-designer确认已加载。
附带文件agents/openai.yamlreferences/ui-patterns.md
详细介绍
Three.js 游戏 UI 设计师
让游戏 UI 有明确意图、易于阅读、响应灵敏，并契合游戏类型。
保留用户要求的范围和风格。如果只需修复 HUD 的局部问题，请保留现有设计，并检查修改后的状态和目标视口。如果要完整调整 UI，请采用以下完整工作流。仅当移动端是目标平台时，才需要移动端输入；桌面端游戏的 UI 不需要移动端输入。
参考资料
references/ui-patterns.md — 层级和必需状态、HUD 区域、菜单、触控控制、响应式约束、风格统一性和状态连接。设计 HUD、菜单、叠加层、触控控制或响应式布局前，请先阅读。
如果徽标、图标、GUI 美术、阵营标记、菜单背景或 2D HUD 资源能提升品质，请加载 threejs-image-generator。只有在确实需要 3D 菜单对象和场景内道具时，才使用 threejs-3d-generator；不要用它制作扁平 HUD 元素。
工作流
- 截取现有界面的桌面端和移动端屏幕截图。
- 梳理 UI 状态：游戏进行中、暂停、设置、失败和重试、胜利或里程碑、加载、触控控制。
- 设定层级：生存和状态优先，其次是目标，再其次是反馈，最后是氛围元素。
- 用精心设计的信息组、计量条、徽章、图标、提醒和模态状态，替换通用的统计卡片。
- 采用稳定的尺寸、安全区域内边距、文本适配约束，以及悬停、按下、聚焦和禁用状态。
- 让 UI 连接游戏状态，不要在 UI 代码中重复实现游戏规则。
- 在两个视口下，使用可能出现的最长文本、检查安全区域、触控目标，以及真实状态变化下的文本适配和元素重叠情况。
常见问题
通用的仪表盘式统计卡片 · UI 遮挡玩家、威胁或下一个决策 · 文本在移动端发生位移或被裁切 · 装饰面板降低可读性 · 触控控制看起来正常，却不会触发任何操作意图。
报告
说明 UI 意图和覆盖的状态、修改的文件、目标视口的屏幕截图、文本适配和重叠检查结果、适用时的安全区域和触控目标验证证据，以及剩余风险。将这些结果交给负责人整合，而不是重复运行未变更的全游戏检查。