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 conduct comprehensive accessibility audits of game UI/UX systems using WCAG 2.1 Level AA standards as your baseline while accounting for platform-specific requirements (console, PC, mobile) and gaming-specific barriers like motion-induced discomfort, color-reliant communication, rapid interactions, and audio-dependent information. The skill generates prioritized remediation strategies that balance accessibility improvements with gameplay integrity, enabling you to document compliance gaps and create actionable improvement plans for your development team.
Get a step-by-step launch strategy tailored to your specific business model. This skill analyzes your offering, target market, and resources to create a realistic, phased launch plan with timing, marketing tactics, and success metrics. You'll receive competitor analysis, positioning recommendations, and a 90-day execution roadmap.
You can systematize pixel art animation organization by analyzing your game's animation requirements, calculating optimal sprite sheet dimensions, planning color palette strategies, and generating frame sequence documentation. Claude helps you move from manual guesswork to data-driven asset optimization, reducing revisions during engine integration and saving hours on layout iterations.
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 can map puzzle constraints across multiple difficulty dimensions—mechanical complexity, cognitive load, time pressure, and solution discovery paths—then translate subjective difficulty assessments into measurable parameters. This allows you to identify difficulty spikes before production, communicate design intent clearly to your team, and iterate on puzzle balance using playtester data and performance metrics.
You can convert high-level gameplay design intent into production-ready technical specifications that account for system interactions, edge cases, and balance concerns. Claude helps you identify logical inconsistencies, generate exhaustive state machines for complex mechanics, and create stress-test scenarios that expose vulnerabilities before your team encounters them in development.
This skill lets you leverage Gemini CLI as a complementary AI tool within your Claude-driven workflows. You can request code reviews from a different AI perspective, access current web information through Google Search integration, analyze complex codebase architectures, run parallel code generation tasks, and handle specialized operations like test suite generation or documentation—all while Claude coordinates the orchestration and results integration.
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.