ui-design

Run the audit mode against the built surface. It scores six dimensions — hierarchy, color, typography, spacing, states, and dark mode — and reports findings as Blocker, High, or Medium, each citing the specific visual rule violated and a concrete fix.

Provide the Figma URL and the handoff mode extracts raw values like hex colors, font sizes, and spacing, then maps each to a semantic token name. Values with no token equivalent are flagged as open questions rather than inlined as raw values.

Body text requires at least 4.5:1 against its background, large or bold UI text at least 3:1, and non-text elements like icons and focus rings at least 3:1 against neighbors. Contrast must be verified in both light and dark themes.

No. Wireframes, user flows, information architecture, and interaction patterns are explicitly out of scope as UX work. The skill only handles visual treatment — color, typography, spacing, states, illustration, and iconography — after UX structure is settled.

Dark mode failures usually come from colors that pass contrast in light theme but fail in dark, or adjacent surfaces losing relative contrast so edges disappear. Every color token needs a dark counterpart that preserves relative contrast and warmth.