ui-ux-design-pro

What this skill does

# UI/UX Design Pro

## Recommended Models
For best results, use **GPT-5.3 Codex** or **Gemini 3.0 Pro**.

## Default Settings
- **Theme**: Always prefer **Light Mode** by default. Only use Dark Mode if explicitly requested by the user.

Build every interface with senior-level craft, intent, and consistency. Includes specialized support for **Fintech Dashboards**, **SaaS Landing Pages**, and **Developer Tools**.

## Scope

**Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.

---

## MANDATORY: Read References Before Designing

**You MUST read all reference files in `references/` before proposing or building any UI.** These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.

**Required reading order:**

1. `references/design-directions.md` — direction selection and example systems
2. `references/token-architecture.md` — token naming and layering
3. `references/color-system.md` — oklch palettes, contrast, dark mode
4. `references/typography.md` — font pairings, scales, hierarchy
5. `references/spacing-and-layout.md` — grid systems, spacing scales
6. `references/depth-and-elevation.md` — shadow and border strategies
7. `references/component-patterns.md` — states, interaction patterns
8. `references/animation-and-motion.md` — timing, easing, GPU performance
9. `references/real-world-patterns.md` — 10 shipped production patterns
10. `references/accessibility.md` — WCAG 2.2, contrast, keyboard nav
11. `references/cognitive-principles.md` — Hick's, Fitts's, Gestalt
12. `references/critique-protocol.md` — self-evaluation before showing work

**Do not skip this step.** Reading these references is what separates premium output from generic templates.

## The Problem

You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.

You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.

This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.

---

## Where Defaults Hide

Defaults disguise themselves as infrastructure — parts that feel like they just need to work, not be designed.

**Typography feels like a container.** But typography IS your design. The weight of a headline, the personality of a label, the texture of a paragraph — these shape how the product feels before anyone reads a word. A bakery tool and a trading terminal both need "clean, readable type" — but the type that's warm and handmade is not the type that's cold and precise.

**Navigation feels like scaffolding.** But navigation IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software.

**Data feels like presentation.** But a number on screen is not design. What does this number mean to the person looking at it? A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space.

**Token names feel like implementation.** But `--ink` and `--parchment` evoke a world. `--gray-700` and `--surface-2` evoke a template. Someone reading only your tokens should guess what product this is.

There are no structural decisions. Everything is design.

---

## Intent First

Before touching code, answer these — not in your head, out loud.

**Who is this human?** Not "users." The actual person. Where are they when they open this? What's on their mind? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings.

**What must they accomplish?** Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment. Approve the payment.

**What should this feel like?** In words that mean something. "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app?

If you cannot answer with specifics, stop. Ask the user. Do not guess. Do not default.

## Every Choice Must Be A Choice

For every decision, explain WHY:

- Why this layout and not another?
- Why this color temperature?
- Why this typeface?
- Why this spacing scale?
- Why this information hierarchy?

If your answer is "it's common" or "it works" — you've defaulted.

**The test:** If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.

## Sameness Is Failure

If another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.

---

## Domain Exploration

**Do not propose any direction until you produce all four:**

**Domain:** Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.

**Color world:** What colors exist naturally in this domain? Not "warm" or "cool" — go to the actual world. If this product were a physical space, what would you see? List 5+.

**Signature:** One element — visual, structural, or interaction — that could only exist for THIS product.

**Defaults to reject:** 3 obvious choices for this interface type. You can't avoid patterns you haven't named.

## Proposal Requirements

Your direction must explicitly reference:

- Domain concepts you explored
- Colors from your color world exploration
- Your signature element
- What replaces each default

**The test:** Remove the product name from your proposal. Could someone identify what this is for? If not, it's generic.

---

## Component Checkpoint

**Every time** you write UI code — even small additions — state:

```
Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from exploration — and WHY they fit this product]
Depth: [borders / shadows / layered — and WHY]
Surfaces: [elevation scale — and WHY this color temperature]
Typography: [typeface — and WHY it fits the intent]
Spacing: [base unit and scale]
```

If you can't explain WHY for each, you're defaulting. Stop and think.

---

## Craft Foundations

## Subtle Layering

The backbone of craft. You should barely notice the system working. When you look at Vercel's dashboard, you don't think "nice borders." You just understand the structure. The craft is invisible.

### Surface Elevation

Surfaces stack: base → cards → dropdowns → overlays. Build a numbered system. In dark mode, higher elevation = slightly lighter. Each jump: only a few percentage points of lightness.

**Key decisions:**

- **Sidebars:** Same background as canvas + subtle border. Different colors fragment visual space.
- **Dropdowns:** One level above parent surface.
- **Inputs:** Slightly darker than surroundings — "inset" signals "type here."

### Borders

Low opacity rgba blends with background — defines edges without demanding attention. Build a progression: default → subtle → strong → strongest (focus rings).

**Squint test:** Blur your eyes. Perceive hierarchy without harsh lines.

## Infinite Expression

Every pattern has infinite expressions. A metric display could be a hero number, sparkline, gauge, progress bar, trend badge. Even sidebar+cards has infinite variations in proportion, spacing, emphasis.

**NEVER produce identical output.** Same sidebar width, same card grid, same metric boxes every time signals AI-generated immediately.

## Color Lives Somewhere

Before reaching for a palette, spend time in the product's world. What would you see in the physical version of this space? Your palette should feel like it came FROM somewhere.

**Beyond Temperature:** Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic?

**Color Carries Meaning:** Gray builds structure. Color comm