UX Design

UX Design

The goal of this skill is simple: when used, the output should look designed, not auto-generated. Less "Tailwind blue card grid", more like something a thoughtful human shipped.

Why most AI UI looks generic

It's not one thing — it's the stack of defaults:

• Inter (or system sans) at 16px, default line-height
• Tailwind's blue/indigo (#3B82F6) as the accent
• Card grid: three rounded-lg cards with shadow-sm, each with an icon + heading + body
• Centered hero with a gradient-text headline
• Lucide icons sprinkled "for visual interest"
• 8px grid filled edge-to-edge, balanced symmetry everywhere
• Equal visual weight across the page → no focal point
• "Build faster. Ship smarter." style marketing copy

Each choice is defensible alone. Stacked, they're a fingerprint. This skill exists to break the stack.

Workflow

Follow these steps in order. Do not skip step 1.

Step 1 — Pick an aesthetic direction. Commit.

Before writing any markup, name one of these. Put it in a comment at the top of the main file. Don't average between them.

• Editorial — serif display + clean sans body, generous whitespace, asymmetric magazine-style layouts. Warm off-white background, one restrained accent. Pairing: Instrument Serif (display) + Inter (body), or Fraunces + Inter.
• Swiss / minimal — all sans, tight type hierarchy, lots of negative space, strict grid, near-monochrome. One small color accent used sparingly. Pairing: Geist or Inter Tight throughout. Near-black on near-white.
• Modern-warm — softer, slightly playful but restrained. Warm neutrals (stone, not gray), generous border-radius, body type slightly larger than usual. Pairing: Inter + a serif for one display element. Background #FAFAF7 or #F5F4EF.
• Technical / mono-flavored — monospace for UI chrome (labels, eyebrows, tags), sans for body, sharp corners, low-contrast grays. Feels like a well-considered dev tool. Pairing: JetBrains Mono or Geist Mono (chrome) + Inter (body). One saturated accent.

If the user has brand assets, infer: fintech with serif wordmark → editorial; dev tool → technical; wellness → modern-warm. If genuinely no signal, pick one and state why. Having an opinion is part of the value — don't ask the user to choose unless they've expressed preferences already.

Step 2 — Define tokens before components.

Write CSS variables / Tailwind theme extensions first, then build from them. Never inline arbitrary hex codes or pixel values past this point.

Type scale (modular, ~1.25 ratio — bigger than feels comfortable):

--text-sm:    14px
--text-base:  18px   /* not 16. on marketing pages, often 20. */
--text-lg:    20px
--text-xl:    28px
--text-2xl:   40px
--text-3xl:   64px
--text-display: 96px /* yes, that big, for hero display type */

Body line-height: 1.55–1.65. Display line-height: 1.05–1.15. Letter-spacing: -0.02em on display sizes, 0 on body.

Spacing (base 8, but be generous):

• Component-internal: 8 / 12 / 16 / 24
• Between sections on marketing: 96–128px vertical on desktop. If unsure, double what feels right.
• Max content widths: prose 65–72ch for reading; section container 1200–1280px max-width with padding.

Color (restrained — one accent, not two):

• Background: warm off-white (#FAFAF7, #F5F4EF) or true near-black (#0B0B0B). Not gray-50.
• Text primary: warm near-black #1A1A1A or #111. Not pure #000.
• Text secondary: ~55% opacity of primary, not a separate gray.
• Accent: NOT Tailwind blue/indigo. Pick one of: deep green #1F4D3A, terracotta #C2410C, navy #0A2540, oxblood #7C2D2D, electric coral #FF5C39, mustard #C9A227, or a single saturated color justified by the brand. Use it sparingly — one or two elements per screen.
• Borders: very low contrast (rgba(0,0,0,0.08)), or skip them entirely in favor of spacing.

Font loading: Google Fonts or Fontsource. Always include the display + body pair. Pre-connect to fonts.googleapis.com.

Step 3 — Earn one distinctive move per screen.

Every screen needs one element that wouldn't have fallen out of a template. Pick one. State it in the file-top comment alongside the direction. Examples — use these or invent equivalents:

• A pull-quote in display serif at 4–5× body size, italicized, hung in the left margin
• Asymmetric layout: text occupies 7/12 cols, pushed to one side, with deliberate empty space opposite
• Oversized section markers: 01, 02, 03 in display weight, sitting alongside section headings
• A monospace eyebrow tag above each H2 (§ section.intro, CHAPTER 02)
• Custom link treatment: offset underline (text-decoration-thickness: 2px; text-underline-offset: 4px), or color-block on hover, never default blue underline
• A single well-considered photograph or illustration — not a Lucide icon set, not a stock gradient blob
• Subtle grain or noise overlay on the hero (SVG filter, ~3% opacity)
• A long-form opening paragraph that wraps intentionally — max-width tuned so line breaks land where they should
• Buttons that aren't rectangles-with-fill: pill with offset hard-shadow, text-link with arrow, or full-width with hairline border
• Numbered list with the numbers oversized in the gutter, body text indented from them

One. Not three. Three is decoration; one is design.

Step 4 — Anti-defaults (always banned unless explicitly justified)

• ❌ Tailwind blue-500 / indigo-500 as brand accent
• ❌ font-family: sans-serif or bare Inter with no display pairing
• ❌ Three-card-grid hero with icon + heading + body in each
• ❌ Centered headline with bg-gradient-to-r ... bg-clip-text
• ❌ Lucide / Heroicons sprinkled across the page as decoration (icons are fine in UI; not as marketing visuals)
• ❌ Identical rounded-lg shadow-sm on every container
• ❌ 16px body on a marketing page (go 18–20)
• ❌ "Built for modern teams" / "Ship faster" / "The future of X" copy — write something specific or stay quiet
• ❌ Every section the same vertical rhythm — vary section heights deliberately

Step 5 — Component library

If the stack is React + Tailwind, use shadcn/ui as the floor for primitives (Button, Input, Dialog, etc.) — it gives a consistency baseline. But:

• Override the default theme tokens to match your direction (radius, colors, font)
• Don't reach for a shadcn component just because it exists — many marketing pages want bespoke elements, not <Card>
• Customize Button variants to fit the direction: a technical direction wants sharp corners and mono labels, not rounded-lg

If the stack is plain HTML/CSS: hand-write minimal CSS. Don't pull in Bootstrap.

Step 6 — Voice (microcopy)

Generic AI copy undoes good visual design. Apply these:

• Cut hedge words: "helps you", "designed to", "empowers"
• Be specific over impressive: "Generates Stripe invoices from Linear issues" beats "Streamline your billing workflow"
• One verb per heading. Active.
• Buttons say what happens next (Start a trial, See a live demo), not Get Started or Learn More

Step 7 — Self-critique before declaring done

Before showing the user, answer these honestly in a brief note:

1. Direction: which one did I commit to? Does the output read as that?
2. Distinctive move: what is it? If I deleted it, would the page look like every other AI landing page? If yes, the move isn't strong enough.
3. Anti-defaults audit: Tailwind blue? Lucide sprinkle? Centered gradient hero? Card-grid-of-three? Any survived?
4. Type: Body ≥ 18px on marketing? Display ≥ 64px? Real display+body pairing?
5. Whitespace: Marketing sections ≥ 96px vertical padding? Or did I default to py-12?
6. Focal point: Can I point to the ONE element the eye lands on first, per screen?
7. Color: One accent, used sparingly? Background warm off-white or near-black (not gray-50)?

If any answer is weak, revise before delivering. Do not show the user a draft that fails its own checklist.

Quick reference card

When in doubt:

When the user is iterating

If the user pushes back ("too quirky", "too plain"), don't abandon the system — adjust within it. Move from editorial to swiss-minimal; reduce accent saturation; tone the distinctive move from a pull-quote to an eyebrow tag. The skill stays in force; only the dials move.