---
name: human-design
description: Makes AI-built UIs, landing pages, dashboards and slides look like a professional designer made them, not an AI. Sets a type scale, a spacing system, a restrained palette and real copy before any code, and bans the clichés (purple-blue gradients, gradient blobs, glassmorphism everywhere, emoji icons, three identical feature cards, generic "Revolutionize your workflow" heroes). Use when building or reviewing any frontend, landing page, HTML artifact or slide design, or when the user says "make it look less AI", "make it look human/pro", "this looks generic", or "make Claude's design look human".
---

# Human design

AI-generated interfaces look alike for a simple reason: with no direction, a model picks the most common choice at every step. Most common font, most common hero, most common gradient, most common 3-card grid. Every "most common" is fine alone. Stacked together, they make the look people now call AI slop. Anthropic's own `frontend-design` skill warns against the same thing (generic fonts, purple gradients, predictable layouts).

The fix is not "more creative". It's **making decisions before writing code** and holding to them.

## Step 1: Ask, or decide out loud (before any code)

Get these 6 answers. If the user didn't give them, propose them in 6 short lines and continue unless they object.

1. **Who is it for, exactly?** (e.g. "accountants at 5–20 person firms", not "businesses")
2. **The one action** the page must get. (book a demo, start trial, buy, reply)
3. **A reference that isn't a SaaS template**: a magazine, a tool, a physical object, a brand from another industry. ("Like a Swiss train timetable." "Like a 1970s hi-fi manual." "Like the Financial Times.")
4. **The personality in two words**, one of which is unexpected. ("calm, nerdy" / "loud, precise" / "warm, technical")
5. **Real content**: the actual product name, a real headline, real numbers, real screenshots or descriptions of them. If missing, use `[ADD: ...]` placeholders in the copy, not lorem ipsum and not invented stats.
6. **Constraints**: brand color or font if they exist, light or dark, stack (HTML/Tailwind/React).

## Step 2: Lock the system (write it as CSS variables first)

### Typography
- **Max 2 families.** One for headings, one for body, or one family with weights. Pick from the reference in Step 1, not by default. If the user's brand has a font, use it.
- **A real scale.** Choose a ratio and stick to it. Example (ratio ≈1.25, base 16px): 12 · 14 · 16 · 20 · 25 · 31 · 39 · 49 · 61. Use 4–5 of these, not all.
- **Headings tight, body loose.** Headings: line-height 1.05–1.2, letter-spacing slightly negative on big sizes (−0.01 to −0.03em). Body: line-height 1.5–1.7, 60–75 characters per line max.
- **Weight contrast instead of size spam.** A 600 heading next to 400 body does more than five sizes.
- **Sentence case** for headings and buttons.

### Spacing
- **One base unit: 4px or 8px.** Every margin, padding and gap is a multiple. Scale example: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128.
- **Group by proximity.** Space inside a group < space between groups. Section padding is visibly bigger (64–128px on desktop).
- **Align to a grid.** 12 columns desktop, 4 mobile, or a simple max-width container. Left edges should line up down the page.

### Color
- **60/30/10.** One neutral base (60%), one secondary neutral or tint (30%), one accent (10%) used only for the main action and key highlights.
- **One accent.** Not two, not a gradient of three.
- **Tinted neutrals.** Pure #000/#FFF and default grays look default. Warm or cool the grays slightly toward the brand.
- **Contrast passes WCAG AA**: body text at least 4.5:1 against its background.
- **State colors** (success/error/warning) only for states, never decoration.

### Shape and depth
- **One radius family** (e.g. 6px for inputs/buttons, 12px for cards). Not 24px on everything.
- **Depth from borders and spacing first**, shadows second. If shadows, one soft style used consistently.

### Icons
- **One icon set, one stroke weight, one size per context.** No mixing outline and filled.
- **Icons label, they don't decorate.** If removing an icon loses no meaning, remove it.
- **No emoji as UI icons** in professional products.

## Step 3: The banned list (design slop)

Don't ship any of these unless the user explicitly asks:

| Cliché | Why it reads as AI | Do instead |
|---|---|---|
| Purple-to-blue (or indigo/violet) gradient hero | The single most common AI default | Solid neutral background, one accent color |
| Blurry gradient blobs / orbs behind content | Decoration with no meaning | A real product screenshot, a diagram, or nothing |
| Glassmorphism cards everywhere | Trend default, hurts contrast | Solid surfaces with a 1px border |
| Gradient text on headlines | Overused, lowers legibility | Solid text; emphasize with weight or color on 1–2 words |
| Hero: "Revolutionize your [X] with AI" + two buttons | Template copy | One specific promise + one action (see copy rules) |
| 3 identical feature cards with icon + title + 2 lines | The default AI section | Vary layout: one big feature with a screenshot, two small; or a list with real detail |
| Emoji as icons (🚀 ✨ ⚡) | Chat-output residue | One consistent icon set or no icons |
| Sparkle ✨ icon to mean "AI" | Everyone uses it | Say what the feature does |
| Everything centered | Lazy hierarchy | Left-align body text; center only short hero lines if at all |
| Every section the same height and padding | Machine rhythm | Vary section density: one tight, one airy |
| Fake logos "Trusted by" with made-up companies | Dishonest and obvious | Real logos with permission, a real number, or skip it |
| Fake testimonials ("Sarah J., CEO") | Dishonest and obvious | Real quotes or `[ADD: testimonial]` |
| Stats like "10x faster", "99.9% uptime" with no source | Invented | Real numbers or `[ADD: metric]` |
| Huge rounded-2xl everything + drop shadows | Default component look | One radius family, borders first |
| Inter/system font everywhere with no hierarchy | Default | A deliberate pair, or one family with strong weight contrast |
| Dark mode + neon accent + grid background, by default | 2025–26 AI-startup uniform | Pick from your reference, not the trend |
| Lorem ipsum or "Feature One / Feature Two" | Unfinished | Real copy or labeled `[ADD]` gaps |

## Step 4: Copy rules (most "AI-looking" design is actually AI copy)

- **Hero headline = a specific outcome** for a specific person, ideally with a number. "Close your books in 2 days, not 9." Not "The future of accounting."
- **Subhead = the mechanism** in one sentence. How it works, not more adjectives.
- **Buttons = verb + object.** "Start free trial", "Book a 15-min demo". Not "Get started", not "Learn more" twice.
- **Feature titles say the outcome**, body says the how. "Invoices chase themselves" → "Automatic reminders at 3, 7 and 14 days, in your tone."
- Run all copy through the `de-slop` rules. No banned phrases from the banned list (`banned-phrases.md`, shipped with the `de-slop` skill and at the root of this kit).

## Step 5: Build, then audit with the checklist

Build the UI. Then run every item in `checklist.md` (same folder) and fix failures before showing the user. Report the result in one line, e.g. `Design check: 27/28 · contrast on footer links 3.9:1, fixed to 4.6:1`.

## Before / after (descriptions)

### 1. SaaS landing page hero

**Before (AI default):** Dark navy background with a purple-to-blue blurred orb. Centered gradient headline "Revolutionize Your Workflow with AI-Powered Automation". Gray subhead with "seamlessly" and "effortlessly". Two pill buttons: "Get Started" (gradient) and "Learn More" (ghost). Below: "Trusted by" row of 5 gray placeholder logos. Then three identical glass cards with emoji icons 🚀 ⚡ 🔒 and titles "Lightning Fast", "Secure", "Scalable".

**After (human):** Off-white background (#F7F6F2), near-black text, one accent (deep green) used only on the main button. Left-aligned headline, 49px, weight 650, tight leading: "Send the invoice. We'll chase it." Subhead, 20px: "Reminders go out at day 3, 7 and 14 in your own words. You get paid; nobody has an awkward call." One button "Start 14-day trial", one text link "See a reminder email". Right side: a real screenshot of the reminder timeline, cropped tight, 1px border, no shadow. Below: one line of proof "[ADD: X invoices chased last month]" instead of fake logos. Features: one wide block with a screenshot, two narrow ones with plain text and no icons.

### 2. Dashboard built by an AI agent

**Before:** Six KPI cards of equal size, each with a different gradient and a colored emoji, sparkline in each, all numbers same size. Sidebar with 14 items and an icon on each in mixed styles. Charts in 6 colors.

**After:** One primary KPI large (the one the user checks daily), three secondary ones small and gray. Neutral surfaces, accent only on the number that changed most and on the primary action. Sidebar trimmed to 6 items, one icon set at 20px, 1.5px stroke. Charts in one hue with shades, plus one highlight color for "this period". Spacing all on an 8px grid; section gaps 32px, card padding 24px.

### 3. Pitch/strategy slide

**Before:** Gradient background, title "Our Strategic Pillars", 3 columns each with an icon and 3 bullets of nouns ("Innovation", "Customer-centricity", "Scalability"), stock photo of a handshake.

**After:** White slide, title is the claim: "We win by owning onboarding, not features." One chart on the left: churn by setup completion (real data or `[ADD]`), one highlighted bar in the accent color. One line under it: "Accounts that finish setup in week 1 churn 3x less." Source in 12px at the bottom. No icons, no stock photo. For the full deck method, see `decks/ANTI-GENERIC-DECKS.md` in this kit.

## Limits

- This skill gives you a professional, deliberate look. It won't give you a strong brand identity on its own; that needs a reference and taste from the user.
- Fonts: only use fonts that are licensed for the project (system fonts, Google Fonts, or ones the user owns).
- It can't fix a product with no real content. Pages full of `[ADD]` gaps are a to-do list, not a failure.