Designing Elite UI

Overview

The design bar is the standard; the QA loop is the enforcement (see orchestrating-elite-agent-qa). A critic with no encoded bar finds nothing — "looks fine." This skill is the bar: the transferable taste an agent designs to and critiques against. Encode it explicitly (a tokens file + a short design-system doc) so both builders and the critic share one source of truth.

The Principles

1. One semantic role → one meaning → one variation axis. Give each role a band where exactly one dimension varies and the rest lock; it reads deliberate, not random. Reserve a color for ONE meaning only. (Example below: status fills vary hue at locked L/C; pending/warning badges vary hue in a warm band, never red; destructive actions are red, reserved.)
2. Contrast is gated, not eyeballed. APCA-check every text-on-fill. A theme flip needs its own ramp (a dark draw ramp, derived dark reds) — never reuse the light values on a dark surface.
3. Restraint beats richness. Distinguish by hue-in-band + shape + label, not a rainbow. Plain text labels with a subtle active state, not boxy segmented controls. Tinted/outline active states over heavy solid fills. Retire decoration that doesn't carry meaning.
4. Type: one family + its mono. Mono for data, codes, and labels; optical centering (text-box-trim); restrained weights. Consistency over variety.
5. The canvas is stable; chrome floats. The work surface NEVER reflows or rescales on selection (lock px-per-unit). Panels float over it; the toolbar morphs smoothly; one icon language; a per-context accent. Infinite/dotted background beats a white card on a page.
6. Interaction feels alive before the click. Cursor affordances (resize cursors on handles, grab/grabbing on pan), hover highlights, valid/invalid ghost tints, smooth transitions, unmistakable active states.
7. Light and dark are BOTH primary. Design and verify in both; neither is an afterthought.
8. Optical, not metric, alignment. Center to the eye (text trim, icon nudge); balance a frame so no element reads as an afterthought; never ship a clipped focus ring.

Gotchas That Quietly Break the Bar