# UX Design

> Use whenever designing or restyling a UI — landing pages, app screens, dashboards, marketing sites, prototypes, frontend mockups, Tailwind/shadcn work, HTML/CSS visual design. Opinionated rules that bias the output away from generic AI defaults toward considered, distinctive, human-designed-feeling work.

- Skill: `nima-edelkhani/ux-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add nima-edelkhani/ux-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nima-edelkhani/ux-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: Nima-Edelkhani (https://skillmd.com/u/nima-edelkhani)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nima-edelkhani/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:

| Default trap | Use instead |
|---|---|
| Inter 16px everywhere | 18–20px body + display serif/sans pair |
| `blue-500` accent | Deep green, terracotta, navy, oxblood — pick one |
| `gray-50` bg | `#FAFAF7` warm off-white |
| `rounded-lg shadow-sm` cards | Spacing + type hierarchy; cards only when truly grouping |
| Centered gradient headline | Left-aligned, asymmetric, oversized, no gradient |
| Lucide grid of features | Numbered list, oversized markers, prose-led |
| `py-12` between sections | `py-24` to `py-32` |
| "Get Started" button | Verb-specific: "Start a trial", "Read the docs" |

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