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'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'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.
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 upload profiling data, flame graphs, or performance metrics from your game engine and receive systematic analysis of bottlenecks. Claude identifies root causes by cross-referencing metrics against common engine patterns, reveals cascading performance issues, and delivers production-ready code solutions with clear trade-offs for each optimization approach.
You can input high-level design direction—like 'grimdark knight commander' or 'bioluminescent forest'—and receive comprehensive visual briefs that include mood references, silhouette guidelines, color palettes, pose suggestions, and thematic specifications. This skill generates structured design documentation that guides your concept art pipeline, reduces revision cycles, and ensures all team members work from the same artistic vision.
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 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.