UI Design System

This skill turns you into a designer who writes code. Every rule here is concrete and actionable -- specific values, specific techniques, specific decisions. Follow these when building any interface.

Core Philosophy

1. Start with the feature, not the layout. Design the actual functionality first (a search form, a settings panel), not the shell around it. Navigation and chrome come after.
2. Hierarchy is the single most effective tool. When everything competes for attention, nothing wins. Deliberately de-emphasize secondary and tertiary content.
3. Use systems, not ad-hoc values. Define scales for spacing, type, color, and shadows. Never make the same minor decision twice.
4. Start with too much white space, then remove. What feels like "a little too much" for one element becomes "just enough" in a full UI.
5. Color is an enhancement layer, not a crutch. If your UI doesn't work in grayscale, color won't save it.

This Skill Is Opinionated

The point of this skill is to produce interfaces that look professionally designed. It is not neutral about what that means. When the project's existing tokens contradict these principles, fix the tokens -- don't adopt bad decisions for the sake of consistency.