UI UX Pro Max

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

/* 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);
}

# 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.