HUD Design System Architect
Design cohesive, accessible HUD systems with design tokens and developer specs
What You Can Do
You'll architect complete HUD design systems that establish consistency across multi-screen game interfaces. This skill generates design tokens, component hierarchies, responsive behavior specifications, and accessibility compliance matrices—bridging the gap between design intent and developer implementation. You'll produce unambiguous handoff documentation that reduces designer-developer friction and ensures WCAG 2.1 AA accessibility compliance.
Features
color systems, typography scales, spacing rhythms, and semantic naming conventions for HUD components
organize buttons, panels, text displays, and interactive elements into reusable architectural patterns
define constraints for aspect ratios, safe zones, notch/cutout handling, and split-screen configurations
colorblind mode guidance, text scaling strategies, and keyboard/controller navigation patterns
interaction states, animation triggers, and state transition behaviors for complex HUD elements
production specs with measurement grids, margin/padding rules, and implementation checklists
specifications for mobile, console, and PC HUD adaptation with device-specific considerations
standardized behaviors for menus, tooltips, notifications, and UI state feedback systems
Example Output
Design Token System Output:
Color Tokens:
- hud-primary: #00D9FF (interactive elements, CTA buttons)
- hud-neutral-bg: #1A1A2E (panel backgrounds, contrast ratio 12.5:1)
- hud-status-success: #4ECB71 (colorblind-safe green)
Typography:
- hud-header: 32px, 700 weight, 1.2 line-height
- hud-body: 16px, 400 weight, 1.5 line-height (min 14px mobile)
Spacing Scale: 4px, 8px, 12px, 16px, 24px, 32px
Component Specification Example:
StatusBar Component
- Width: 100% - 32px (safe margin)
- Height: 48px (touch-target minimum: 44px)
- States: active, depleted, critical (color + motion variation)
- Accessibility: aria-label updates on value change, keyboard accessible
- Responsive: stacks vertically below 480px width
Accessibility Compliance Checklist:
- ✓ Contrast ratios exceed WCAG AA (4.5:1 small text, 3:1 graphics)
- ✓ Colorblind mode includes pattern overlays (not color-only differentiation)
- ✓ Controller support: D-pad/analog stick navigation with clear focus states
- ✓ Text scaling: supports 125%-200% without overflow or truncation
What's Included
- SKILL.md instruction file: complete framework for prompting Claude to generate HUD systems
- Design Token Template: color, typography, spacing, and motion token worksheets
- Component Specification Framework: structure for documenting interactive states and responsive behaviors
- Accessibility Compliance Checklist: WCAG 2.1 AA verification matrix with colorblind and input method guidance
- Developer Handoff Checklist: implementation readiness verification and measurement grid export specifications
Who It's For
- Game UI/UX Designers — architecting HUD systems for new projects or major redesigns across multiple screen types
- Lead Game Designers — establishing consistent interaction patterns and visual hierarchies across game experiences
- Technical Game Designers — documenting responsive behavior, state machines, and platform-specific HUD constraints
- Game Design Teams — creating shared design language documentation for distributed or cross-functional teams
- Game Studios — establishing accessibility standards and reducing designer-developer handoff friction at scale
Best For
- Creating design systems for games with complex multi-screen HUDs (RPGs, strategy games, simulators)
- Establishing accessibility-first HUD architecture with colorblind mode and scaling support
- Defining responsive layouts that adapt across aspect ratios and platform targets (mobile-to-console)
- Generating component specifications and interaction pattern libraries for distributed development teams
- Documenting design tokens, safe zones, and layout constraint systems for cross-platform consistency
You might also like
You can systematically design menu hierarchies and interaction flows that feel responsive and intuitive for game players. This skill helps you map complete player journeys through nested menus, define state transitions for complex scenarios (like pause-while-paused), establish consistent interaction patterns across your UI, and identify edge cases before implementation. You'll document specifications that programmers and junior designers can follow, ensuring accessible navigation that respects controller/keyboard constraints and 100ms feedback expectations.
You'll convert game design briefs into comprehensive visual direction documents that guide concept artists and 3D modelers through pre-production. This skill generates aesthetic frameworks, curates style references, specifies character and environment requirements, documents technical constraints, and produces mood board descriptions—all formatted for immediate team alignment and reference during production. Instead of iterating through clarifying questions, you'll have structured documentation that translates vague creative intent into actionable visual guidelines.
You can model complex in-game economies by describing currency flows, progression curves, and monetization systems in natural language, then have Claude validate the math, simulate outcomes across player cohorts (free players, mid-tier spenders, whales), identify inflation breakpoints, and stress-test against exploits. This lets you iterate on balance rapidly without building spreadsheets, catching economy-breaking issues before they damage retention.
You can rapidly categorize network issues (latency vs. sync vs. bandwidth), instrument networked game systems for visibility, identify common netcode anti-patterns by their telltale signatures, generate reproducible test cases for various network conditions, debug server-client state reconciliation failures, and profile network code paths to optimize bandwidth. This skill transforms vague player reports into actionable diagnosis data that pinpoints whether desynchronization, rubber-banding, packet loss, or authority violations are the root cause.
You'll develop dynamic music systems using layered composition, state mapping, and parameter control. This skill teaches you to design vertical remixing (adding/removing musical layers) and horizontal sequencing (transitioning between musical sequences) based on game conditions. You'll create clear technical specifications that bridge creative composition and programmer implementation, enabling music that adapts seamlessly to player actions, environmental shifts, and gameplay intensity.
You can analyze shader compilation logs across multiple graphics APIs, automatically detect common shader errors and cross-platform compatibility issues, and receive actionable optimization recommendations for your studio's shader build infrastructure. Claude helps you identify performance regressions, validate that new shader code meets performance targets, and document compilation requirements for team onboarding—turning complex multi-API shader validation into a systematic, repeatable process.
You can conduct rigorous multiplayer balance audits by analyzing win-rate metrics, pick rates, and play-pattern data against competitive design benchmarks. The framework helps you pinpoint whether imbalance stems from hero/character design, map asymmetries, economy systems, or meta-game health—then propose prioritized, data-backed solutions that resonate with producers, engineers, and community managers.
You can deconstruct complex game environments into implementable audio layers—base drones, environmental textures, dynamic elements, and spatial effects—each with detailed technical specifications. Claude helps you generate mixing parameters (EQ, dynamics, spatial placement), map emotional intent to audio characteristics, and create ambience variation systems that respond to game state changes like time of day, weather, or player progression.