---
name: ui-ux-pro-max
description: Builds an end-to-end UI system for a product — design tokens (color scale, type scale, spacing, radii, shadows), a component inventory covering every interaction state, a layout grid, and WCAG contrast checks — emitted as CSS variables plus a component spec doc. Use when the user says "set up a design system", "create design tokens", "make my app consistent", "define the visual foundation", or before any build that spans more than one screen.
---

# UI UX Pro Max — Design Lead

> "Full UI/UX system"

## When to use

- A product is about to be built or rebuilt and needs its foundation first — "set up the design
  system for our app".
- Screens disagree on colors, sizes or spacing — "make everything consistent".
- Tokens are requested explicitly — "give me design tokens / CSS variables for this brand".
- A component library is planned — "spec our buttons, inputs and cards with all their states".
- Downstream skills (`frontend-design`, `web-artifacts`) need a system to consume.

## Workflow

1. **Interrogate the product.** Capture audience, platform (web/mobile/both), information density
   (dashboard-dense vs marketing-airy), three mood adjectives, and one product it must NOT
   resemble. If a BRAND.md exists, inherit its palette and type — never invent parallel ones.
2. **Build the color system.** From the brand hue derive a 10-step scale (50–900), plus
   temperature-tinted neutrals (never flat gray) and semantic sets for success, warning, danger,
   info. Then map role tokens onto steps: `--color-surface`, `--color-text`, `--color-accent`.
3. **Set the type scale.** Two families max (display + text). Pick a modular ratio — 1.2 for dense
   products, 1.25 for marketing — and define seven roles (display, h1–h3, body, small, mono),
   each with size, weight, line-height and letter-spacing.
4. **Define space, radius, elevation.** Spacing on a 4px base (4/8/12/16/24/32/48/64), three
   radius tokens (sm/md/full), three shadows tied to meaning: raised, overlay, modal.
5. **Inventory components.** List every component the product needs. For each interactive one,
   spec all seven states: default, hover, focus, disabled, error, loading, empty.
6. **Fix the layout grid.** 12 columns desktop, 4 mobile; container max-widths; gutter tokens;
   named breakpoints (sm 640, md 768, lg 1024, xl 1280).
7. **Run the contrast pass.** Every text/background pair must hit WCAG AA — 4.5:1 body, 3:1 large
   text and UI borders. Repair failures by shifting scale steps, never by one-off hex tweaks.
8. **Emit deliverables.** Write `tokens.css` and `COMPONENTS.md`. No token may exist in one file
   and not the other.

## Output format

```css
/* tokens.css — generated by ui-ux-pro-max */
:root {
  /* color scale */
  --teal-50: #f0fdfa;  /* ...steps 100-800... */  --teal-900: #134e4a;
  /* color roles — components reference ONLY these */
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-accent: var(--teal-600);
  --color-danger: var(--red-600);
  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Inter", system-ui, sans-serif;
  --text-h1: 600 2.44rem/1.15 var(--font-display);
  /* space / radius / shadow */
  --space-4: 1rem;
  --radius-md: 8px;
  --shadow-overlay: 0 8px 24px rgb(16 24 40 / 0.12);
}
```

```markdown
# COMPONENTS.md (excerpt)
## Text input — text | search | password
| State | Spec |
|---|---|
| default | border --gray-300, bg --color-surface, radius --radius-md |
| hover | border --gray-400 |
| focus | 2px ring --teal-400, border --teal-600 |
| disabled | bg --gray-100, text --gray-400, cursor not-allowed |
| error | border --red-600, 13px message in --red-700 below |
| loading | right-slot spinner during async validation |
| empty | placeholder in --gray-500 — a hint, never the label |
```

## Quality bar

- [ ] Every text/background pair passes WCAG AA (4.5:1 body, 3:1 large text and UI borders)
- [ ] Components reference role tokens only — no raw hex, no naked scale steps
- [ ] Every interactive component specs all seven states, including loading and empty
- [ ] Two type families max; every size sits on the declared modular scale
- [ ] All spacing divisible by 4 — zero magic numbers anywhere
- [ ] tokens.css and COMPONENTS.md agree perfectly — no orphan tokens in either direction

## Example

**Invocation:** "Set up the UI system for a B2B analytics dashboard — dense but calm, and it must
not look like Linear."

**Produces:** `tokens.css` (~70 variables: slate-tinted neutrals, a teal accent scale, 1.2-ratio
type on IBM Plex Sans + Plex Mono, 4px spacing, three shadows) and `COMPONENTS.md` speccing twelve
components — button, input, select, table, card, tabs, toast, modal, badge, tooltip, sidebar nav,
empty state — each with seven states and AA-verified contrast pairs.