关于 design-game
用于对现有游戏执行 UI/UX 设计改进的命令，先审查视觉效果并评分，再按用户选择实施改动。它调用 game-designer 技能，并要求验证构建且不调整玩法参数。
主要功能
- 01审查游戏场景与实体
- 02按领域评分并生成报告
- 03按影响排序改进建议
- 04依用户选择实施视觉改动
- 05运行构建验证
适用场景
- 01为现有游戏开展视觉设计检查
- 02确定背景、粒子或排版的优先改进项
- 03按需实施游戏手感和氛围调整
- 04构建检查设计改动是否有效
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/design-game确认已加载。
详细介绍
性能说明
- 请花时间彻底完成
- 质量比速度更重要
- 不要跳过验证步骤
游戏设计
对现有游戏进行 UI/UX 设计优化，提升视觉效果、氛围和游戏手感。无需设计经验——此命令会分析你的游戏并应用经过验证的视觉模式。
说明
分析 $ARGUMENTS 中的游戏（如果未提供路径，则分析当前目录）。
首先，加载 game-designer 技能，了解完整的设计术语和模式。
步骤 1：审查
- 阅读
package.json，确定使用的引擎 - 阅读
src/core/Constants.js，了解当前配色方案和配置 - 阅读所有场景文件，了解当前视觉效果
- 阅读实体文件，查看游戏对象的绘制方式
- 阅读
src/core/EventBus.js，了解现有事件
步骤 2：设计报告
为每个方面打 1–5 分，并以表格形式展示：
| 方面 | 分数 | 备注 |
|---|---|---|
| 背景与氛围 | ||
| 配色方案 | ||
| 动画与补间 | ||
| 粒子效果 | ||
| 屏幕过渡 | ||
| 字体排版 | ||
| 游戏手感／反馈 | ||
| 游戏结束 | ||
| 表情使用 | 如果存在个性化角色，评估其表情是否会根据游戏事件灵活变化。如果表情从不变化，则打 1 分。 |
然后按视觉影响从高到低列出最值得改进的项目，并用通俗易懂的语言说明每项的作用（例如：“添加天空渐变，让背景看起来像真实的天空，而不是一块纯色”）。
步骤 3：实现
询问用户希望实现哪些改进；如果用户表示全部实现，则全部完成。遵循 game-designer 技能中的模式：
- 所有新值都放在
Constants.js中 - 使用 EventBus 触发效果
- 不要改动游戏玩法（物理、计分、控制、生成时机）
- 优先使用程序化图形
- 将新文件放在合适的目录中
步骤 4：验证
- 运行
npm run build，确认没有错误 - 用通俗易懂的语言总结所有更改
使用示例
完整设计优化
/design-game examples/asteroid-dodge
结果：审查视觉效果 → 为背景打 2/5 分、粒子效果打 1/5 分、字体排版打 3/5 分 → 添加天空渐变背景、星空视差效果、小行星摧毁时的爆炸粒子、受击时的屏幕震动、平滑的场景过渡。所有值均放在 Constants.js 中。
故障排除
视觉效果更改导致性能下降
原因： 每帧的粒子发射器或渐变填充过多。 解决方法： 限制活跃粒子的数量（使用对象池并重复利用）。使用缓存的渐变纹理，而不是每帧重新创建。
设计更改导致不同屏幕尺寸下的布局错乱
原因： 使用硬编码像素位置，而不是 PX 缩放因子。 解决方法： 所有位置和尺寸都应使用 Constants.js 中基于 PX 的相对值。
下一步
告诉用户：
你的游戏现在好看多了！接下来，运行
/game-creator:add-audio，添加芯片音乐背景音乐和复古音效——全部通过程序生成，无需音频文件。流程进度：
/viral-game→/design-game→/add-audio→/qa-game→/review-game(这是
/viral-game的单次执行流程，不是/make-game的多会话、里程碑驱动工作流。)