Mobile Game UI Responsive Design System Creator
Design scalable mobile game UI systems across devices with Claude validation
What You Can Do
You can build device-aware UI design systems that automatically scale across fragmented mobile ecosystems without redesigning for each screen size. Claude helps you define parametric design tokens, validate safe zones and touch target sizes, document aspect ratio handling strategies, and iterate on layouts for iOS and Android simultaneously—reducing rework and ensuring visual consistency across platform variants.
Features
Define target phones, tablets, and aspect ratios with Claude-assisted breakpoint calculation
Claude checks that UI elements scale proportionally while maintaining gameplay visibility and touch usability
Generate and validate status bar, notch, and home indicator boundaries for iOS and Android edge cases
Validate that buttons and interactive elements meet minimum size requirements (44-48pt) across all devices
Create systematic spacing, typography, and color scales that Claude helps you organize and validate
Produce developer-ready specifications with margins, anchoring rules, and responsive constraints
Claude assesses UI adaptation complexity when expanding from mobile to tablet or vice versa
Refine layouts across multiple screen sizes with Claude feedback on visual hierarchy and readability
Example Output
Device Matrix Output:
- iPhone SE (4.7" 16:9): 375px width, 667px height
- iPhone 14 Pro Max (6.7" 19.5:9): 430px width, 932px height
- iPad Air (10.9" 4:3): 820px width, 1180px height
Safe Zone Specification:
Status Bar: 44pt (iPhone), 20pt (Android)
Dynamic Island: 30pt × 12pt rounded cutout at (192, 0)
Home Indicator: 34pt bottom safe area
Touch Target Validation Checklist: ✓ Primary buttons: 48pt minimum (exceeded at 56pt) ✓ Icon buttons: 44pt hit area with 8pt padding ✓ Text links: 44pt tap zone with minimum 14pt font ✓ Slider handles: 48pt diameter confirmed across 3 device classes
What's Included
- SKILL.md: Complete instruction file with Core Workflow phases for device definition, layout specification, and validation
- Device Matrix Template: Spreadsheet structure for documenting target devices, screen sizes, and breakpoint calculations
- Safe Zone Reference: Platform-specific specifications for status bars, notches, home indicators, and landscape safe areas
- Design Token Framework: Systematic guide for spacing scales, typography hierarchies, and color token organization
- Responsive Layout Checklist: Validation criteria for touch targets, visibility, aspect ratio handling, and developer handoff readiness
Who It's For
- Mobile game UI/UX designers — Building responsive design systems for multi-device game launches
- Game art directors — Establishing visual consistency rules across phone and tablet variants
- Game developers — Implementing responsive UI from design specifications with confidence
- Game studio leads — Planning UI scope and rework reduction for new mobile game projects
- Indie game developers — Creating professional UI systems without extensive device testing budgets
Best For
- Designing UI systems for simultaneous iOS and Android launches
- Creating port plans when expanding games from mobile to tablet
- Validating existing UI layouts for responsiveness before launch
- Documenting parametric scaling rules and design tokens for development teams
- Auditing touch target sizes and safe zones across device classes
- Establishing responsive design standards for mobile game studios
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.
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.
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 analyze pixel art assets for game engine compatibility, generate optimal color palette recommendations, organize sprite sheets with proper naming conventions and frame sequences, and create technical documentation that game programmers need for asset handoff. This skill ensures your pixel art meets performance constraints, follows industry standards, and integrates smoothly into Unity, Godot, or Unreal without iteration delays.
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'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.
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.