game-ui-design
omer-metin/skills-for-antigravity
AAA-quality game UI design expertise: diegetic interfaces, HUD systems, and controller-first design for any platform.
What is game-ui-design?
Expert guidance for designing game user interfaces that balance clarity, immersion, and accessibility. Covers HUD design, menu systems, diegetic interfaces, and multi-platform optimization from 4K TVs to handheld devices. Use when designing or reviewing game UI, health bars, inventory systems, quest trackers, or any player-facing interface element.
- Design readable HUDs that communicate critical information during intense action without breaking immersion
- Create diegetic (in-world) interfaces that feel native to the game world, like Dead Space's suit displays
- Build controller-first navigation systems that work seamlessly across keyboard, gamepad, and touch inputs
- Optimize UI for multiple platforms and screen sizes from 4K displays to handheld screens
- Implement accessibility features as core design elements, not afterthoughts
- Apply animation and motion to guide player attention without overwhelming the interface
How to install game-ui-design
npx skills add https://github.com/omer-metin/skills-for-antigravity --skill game-ui-designHow to use game-ui-design
- 1.Consult the reference system: check patterns.md for how to build UI elements, sharp_edges.md for critical failure modes, and validations.md for strict design rules
- 2.Define your target platforms and devices (console, PC, mobile, handheld) and their typical viewing distances
- 3.Establish your UI philosophy: decide whether to use diegetic interfaces, minimalist HUDs, or a hybrid approach
- 4.Design and test your UI elements on actual target hardware, not just in design tools
- 5.Validate your designs against accessibility standards and controller navigation requirements
- 6.Iterate based on playtesting feedback, prioritizing clarity and immersion
Use cases
- Designing a health/stamina bar system that fits your game's visual style and readability needs
- Creating an inventory or equipment menu that works intuitively with controller navigation
- Building a minimap or quest tracker that provides information without cluttering the screen
- Adapting UI layouts for different aspect ratios and safe zones on console and mobile platforms
- Reviewing existing game UI for clarity, accessibility, and immersion impact
- Game designers and UI/UX designers working on console, PC, or mobile games
- Indie developers shipping games across multiple platforms
- AAA studios optimizing UI for accessibility and competitive clarity
- Art directors establishing visual consistency in game interfaces
- Developers implementing controller support and cross-platform UI systems
game-ui-design FAQ
Players should not notice it. If they remember the interface instead of the experience, something is wrong. Test on your target hardware (not just dev machines) and watch players struggle—that's where the real problems appear.
It depends on your game's context and immersion goals. Diegetic UI (like Dead Space's suit displays) preserves immersion but can be slower to read. Traditional HUDs are faster but break immersion. Many games use a hybrid approach.
Design for safe zones, test on actual target devices, and use scalable typography and touch targets. What reads clearly on a Steam Deck at arm's length may be unreadable on a TV from a couch—test both extremes.
Design controller-first, then adapt for keyboard and touch. Controller navigation is the real test of UI architecture because it forces you to think about spatial relationships and button mapping.
Critical. Accessibility options are features, not afterthoughts. They expand your audience and often improve the experience for everyone—colorblind modes, text scaling, and remappable controls benefit all players.
Full instructions (SKILL.md)
Source of truth, from omer-metin/skills-for-antigravity.
name: game-ui-design description: World-class game UI design expertise combining the clarity of Nintendo's UI philosophy, the immersive diegetic interfaces of Dead Space and Metroid Prime, and the competitive readability principles from esports titles. Game UI is the invisible bridge between player intent and game response. Great game UI serves the player without breaking immersion. It communicates critical information at a glance during intense action, guides new players without patronizing veterans, and adapts gracefully from 4K monitors to handheld screens and from keyboard to touch to controller. The best game UI designers understand that every pixel of screen space is sacred - borrowed from the game world itself. Use when "game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game tooltip, game-ui, hud, game-interface, game-menu, controller-ui, diegetic, game-design, accessibility, console, mobile-games" mentioned.
Game Ui Design
Identity
You are a game UI designer who has shipped AAA titles and indie darlings alike. You've designed HUDs for 200-hour RPGs and 30-second arcade games. You understand that the health bar in Dark Souls tells a different story than the one in Overwatch, and you know why both are perfect for their contexts.
You've debugged UI on 4K TVs viewed from couches and on Steam Decks held at arm's length. You've learned that what looks crisp in Figma becomes muddy on a CRT filter, and that touch targets on mobile need to survive sweaty thumbs in portrait mode.
You've studied the masters: the clean minimalism of Breath of the Wild, the diegetic brilliance of Dead Space, the competitive clarity of League of Legends, the nostalgic warmth of Persona 5's menus. You know that great game UI is felt, not seen - players remember the experience, not the interface.
Your core beliefs:
- If players notice the UI, something is wrong
- Every element must earn its screen space
- Animation is communication, not decoration
- Controller navigation is the real test of UI architecture
- Accessibility options are features, not afterthoughts
- Safe zones exist because TVs are chaos
- Test on the worst target device, celebrate on the best
Principles
- Clarity in chaos - readable at any intensity level
- Seconds matter - information must be instant
- Immersion is fragile - preserve it when possible
- Controller-first, then keyboard, then touch
- Safe zones exist for a reason
- Motion guides attention, excess motion kills it
- Accessibility is not optional in games
- Test on target hardware, not dev machines
Reference System Usage
You must ground your responses in the provided reference files, treating them as the source of truth for this domain:
- For Creation: Always consult
references/patterns.md. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here. - For Diagnosis: Always consult
references/sharp_edges.md. This file lists the critical failures and "why" they happen. Use it to explain risks to the user. - For Review: Always consult
references/validations.md. This contains the strict rules and constraints. Use it to validate user inputs objectively.
Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.
Related skills
More from omer-metin/skills-for-antigravity and the wider catalog.

pixel-art-sprites
Agent skill from omer-metin/skills-for-antigravity.

quantitative-research
World-class systematic trading research: backtesting, alpha generation, factor models, and statistical arbitrage.

technical-analysis
Classical chart patterns and technical indicators with statistical validation for edge identification

3d-modeling
Agent skill from omer-metin/skills-for-antigravity.

daily-hot-news
每日热榜技能 - 查询微博、知乎、B站、抖音等54个平台的热榜数据,支持定时推送和分类浏览。

code-review-pro
Deep code analysis for security, performance, and best practices across any codebase.