mcpField
G
game-ui-frontend

game-ui-frontend

github.com/openai设计与 UI7.6k107 次安装3 周前更新
代码仓库

关于 game-ui-frontend

一项用于设计和实现浏览器游戏界面的技能，涵盖视觉方向、易读 HUD 以及桌面和移动布局；重点是保持场景可见，并协调界面与游戏操作。

主要功能

  1. 01确定视觉方向与主题
  2. 02构建清晰、低密度 HUD
  3. 03避免覆盖游戏场景的界面
  4. 04适配桌面和移动布局
  5. 05协调菜单与摄像机控制
  6. 06有选择地使用动效

适用场景

  1. 01设计浏览器游戏的 HUD
  2. 02规划覆盖 3D 场景的菜单
  3. 03适配不同屏幕尺寸的游戏界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/openai/plugins --skill game-ui-frontend

安装后在 Claude Code 中输入/game-ui-frontend确认已加载。

附带文件agents/openai.yaml

详细介绍

游戏 UI 前端

概述

只要游戏需要可见的界面层，就使用此技能。目标不是制作通用仪表盘 UI，而是打造清晰易读、风格鲜明的浏览器游戏界面，为游玩体验提供支持。

默认假设：使用 canvas 或 WebGL 构建游戏世界，使用 DOM 构建文本密集型 UI。

前端规范

  1. 编码前先确立视觉方向。
    • 类型与幻想设定
    • 材质语言
    • 字体排印
    • 调色板
    • 动态效果的基调
  2. 使用 CSS 变量定义 UI 主题。
  3. 建立清晰的层级。
    • 优先呈现关键战斗或生存信息
    • 其次呈现辅助工具
    • 很少使用的设置放入菜单或抽屉
  4. 优先保护游玩区域，尤其是在 3D 游戏中。
    • 首屏应让玩家几秒内就能开始游玩。
    • 默认只设置一个主要的常驻 HUD 区域，最多再加一个小型辅助区域。
    • 正常游玩时保持游玩区域中心清晰。
    • 正常游玩时尽量保持游玩区域中下部清晰。
    • 将背景设定、野外笔记、任务详情和长篇操作列表放入抽屉、切换面板或暂停界面。
    • 优先使用情境提示和短暂提示，而非永久显示的带框面板。
  5. 确保叠加层在动态画面上清晰易读。
    • 需要时使用背景面板、边缘装饰、对比度和适度的模糊效果。
  6. 从一开始就兼顾桌面端和移动端。
  7. 围绕摄像机与输入控制边界设计 3D UI。
    • 菜单、对话框或指针驱动的 UI 激活时，暂停或限制摄像机控制输入。
    • 明确指针锁定、拖动视角和菜单交互状态。

3D 入门默认方案

对于探索、移动或第三人称入门脚手架，建议采用以下 UI 预算：

  • 边缘处放置一个紧凑的目标提示或状态条
  • 一个短暂显示的操作提示或交互提示
  • 一个可选的可折叠辅助界面，例如日志、地图或任务日志

首次加载时不要打开所有信息界面。用户打开更深层的 UI 前，场景应保持清晰易读。

作为 3D 浏览器游戏的默认实现约束：

  • 不采用始终显示的全宽页眉、由多张卡片组成的主体内容以及全宽页脚布局
  • 正常移动时，不在屏幕中央或中下部显示大型叠加层
  • 除非用户明确要求更密集的布局，否则桌面端常驻 HUD 覆盖的视口面积不应超过约 20-25%
  • 在移动端，优先折叠为窄列或情境提示，避免用更大的面板遮挡游玩区域

提示词规则

要求模型设计或实现游戏 UI 时，请包含：

  • 游戏幻想设定
  • 摄像机或视角
  • 玩家可执行的动作
  • HUD 层级
  • 游戏为 3D 时的摄像机或控制模式
  • 动态效果的基调
  • 桌面端和移动端的预期
  • 游玩区域的保护与信息展示策略
  • 明确指出应避免的反模式

请使用 ../../references/frontend-prompts.md 查看具体提示词格式。

动态效果规则

  • 优先采用少量有意义的过渡效果，避免持续的微动画。
  • 将强烈的动态效果用于状态变化、奖励、危险和新手引导。
  • 非必要动画应遵循减少动态效果设置。
  • 避免 3D HUD 的动态效果与摄像机运动相互干扰。

优秀设计的特征

  • HUD 元素清晰易读，同时不会让场景显得平板。
  • 菜单与游戏世界浑然一体，而非 SaaS 管理面板。
  • 布局能在不同断点间整齐适配。
  • 指针、键盘和游戏状态的反馈一目了然。
  • 在 3D 游戏中，菜单和 HUD 状态不会与摄像机控制或指针锁定冲突。
  • 在 3D 游戏中，首次可游玩的画面会为移动、瞄准和空间感知保留大部分视口空间。
  • 常驻信息的密度足够低，确保截图呈现的仍是游戏场景，而非 UI 效果图。

反模式

  • 通用应用仪表盘布局
  • 缺乏主题的扁平占位样式
  • 未经设计考量的默认字体栈
  • 遮挡游戏场景的密集覆盖层
  • 在实时可玩场景上叠加大型标题卡片或多段说明文字
  • 在视口四周边缘分布权重相同的方框面板
  • 首次加载时，同时展开控件、目标、说明和背景故事
  • 在 3D 游戏中使用占据全宽的顶部和底部界面，并始终显示大型中央或主体面板
  • 让每个元素都过度运动
  • 明明 DOM 更清晰、更省资源，却只使用 Canvas 界面
  • 明明标准 DOM 更清晰，却强行将 HUD 控件放进 3D 场景
  • 在模态框或物品栏面板打开时，仍允许摄像机输入

参考资料

  • 共享架构：../web-game-foundations/SKILL.md
  • 提示词范例：../../references/frontend-prompts.md
  • 低界面占用的 3D 布局模式：../../references/three-hud-layout-patterns.md
  • 由 React 承载的 3D UI 上下文：../react-three-fiber-game/SKILL.md
  • 游戏测试评审：../../references/playtest-checklist.md

评论

支持 Markdown