RoyalNoob

Game UI Design Skill — Design skill for Claude Code

Design community

A Claude skill to help with game UI design.

How to install Game UI Design Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open RoyalNoob/game-ui-design-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Game UI Design Skill does

A Claude skill to help with game UI design.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

game-gui-design

A Claude skill for game UI design. It makes mockups and a handoff spec through a fixed process:

Brief
References
Information architecture
Design system
Directions
Screens
Critique
Handoff

Motion is an optional phase.

The process is there to stop one-prompt, generic output. Every element has an address, every value comes from a token, and a validator checks the result before delivery.

**Status: beta (0.x).** Nobody has tested it on a real project yet. Expect changes.

What you get

A phased process. The skill asks before it builds, and it waits for your approval after each phase.
An addressing system. Tokens ($), components (@), screen paths (hud.bottom-left.health-bar), tags (#p1), and transitions (pause~open). You can change any level with one line: @bar.fill: thinner.
An inspector inside each mockup. You can:
- pick elements visually
- see and edit the selector
- write changes and copy them as edit commands
- test readability over bright, mid-gray, dark, and busy backgrounds
- preview motion at slow speed and with reduced motion
A validator (validate_ui.py). It checks:
- registry and mockup consistency
- the text size floor from Xbox Accessibility Guidelines 101
- focus styles
- hard-coded "Press A" prompts
- HUD visibility states
- navigation cost: gamepad presses and menu depth from gameplay to each common task
A navigation graph (nav_graph.py): an SVG of the screen graph, with task paths and their budget status.
Pattern cards (references/patterns.md). Each number is marked as a published standard [std] or a starting point [heur].

Install

claude.ai

Download game-gui-design-v.zip from Releases.
In Claude, go to Customize > Skills, click +, then Create skill > Upload a skill, and upload the ZIP.
Turn on code execution in your settings. The skill runs Python scripts.

To update, u