Unified design skill for ALL UI work: interfaces, dashboards, landing pages, marketing, components, posters. Domain exploration + intent-first methodology + craft principles + design system generation. Covers web, mobile, and desktop. Use when asked to build, design, or style any visual interface.
Build every interface with craft, intention, and distinction. This skill covers ALL UI work — dashboards, landing pages, admin panels, marketing sites, components, mobile screens, and desktop apps.
You will generate generic output. Your training has seen thousands of dashboards and landing pages. 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. This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
The process below helps. But process alone doesn't guarantee craft. You have to catch yourself.
Defaults don't announce themselves. They disguise themselves as infrastructure.
Typography feels like a container. But typography isn't holding your design — it IS your design. A bakery management tool and a trading terminal might 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 isn't around your product — it IS your product. Where you are, where you can go, what matters most.
Data feels like presentation. But a number on screen is not design. A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space.
Token names feel like implementation detail. But --ink and --parchment evoke a world. --gray-700 and --surface-2 evoke a template.
The moment you stop asking "why this?" is the moment defaults take over.
Before coding, commit to a BOLD direction. Answer these out loud:
Who is this human? Not "users." The actual person. Where are they? What's on their mind? A teacher at 7am with coffee is not a developer debugging at midnight.
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? Say it 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?
What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
If you cannot answer these with specifics, stop. Ask the user. Do not default.
Do not propose any direction until you produce all four:
Your direction must explicitly reference all four. The test: Remove the product name. Could someone identify what this is for? If not, it's generic.
When the user requests a design system or you're starting a new product's visual direction:
references/styles-catalog.md — match product category to UI stylereferences/palettes-catalog.md — select or adapt palette for the domainreferences/typography-catalog.md — pick font pairing matching the directionreferences/ux-guidelines.md — apply CRITICAL guidelines from the startGenerate a complete token system: colors, typography, spacing, borders, shadows, border-radius. Every token should be explainable and traceable to a design decision.
Focus on these to avoid generic AI output:
references/typography-catalog.md.NEVER: Overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (purple gradients on white), predictable layouts, cookie-cutter design. No two designs should look the same.
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.
Every pattern has infinite expressions. A metric display could be a hero number, inline stat, sparkline, gauge, progress bar, comparison delta, trend badge. Linear's cards don't look like Notion's. Vercel's metrics don't look like Stripe's.
If you swapped your choices for the most common alternatives and the design didn't feel different, you never made real choices.
Every product exists in a world with colors. Before reaching for a palette, spend time in the product's world. Your palette should feel like it came FROM somewhere — not applied TO something.
For every decision: WHY this layout? WHY this color temperature? WHY this typeface? WHY this spacing? If your answer is "it's common" or "it's clean" — you haven't chosen. You've defaulted.
Sameness Is Failure. If another AI would produce substantially the same output — you have failed.
Intent Must Be Systemic. If the intent is warm: surfaces, text, borders, accents, typography — ALL warm. Check your output against your stated intent.
Every time you write UI code — state:
Intent: [who, what must they do, how should it feel]
Palette: [colors — and WHY they fit this product's world]
Depth: [borders / shadows / layered — and WHY]
Surfaces: [elevation scale — and WHY this temperature]
Typography: [typeface — and WHY it fits the intent]
Spacing: [base unit]
This checkpoint is mandatory. If you can't explain WHY for each choice, you're defaulting.
Before showing the user, look at what you made.
Ask yourself: "If they said this lacks craft, what would they mean?" Fix it first.
Run these checks:
If any check fails, iterate before showing.
Be invisible. Don't announce modes or narrate process.
references/principles.mdIf project has .interface-design/system.md — read and apply. Decisions are made.
See references/principles.md for detailed craft principles covering:
references/principles.md — Core craft principles with code examplesreferences/critique.md — Post-build design critique protocolreferences/example.md — Real-world craft thinking in actionreferences/validation.md — Memory management, when to update system.mdreferences/styles-catalog.md — 12 UI styles with reasoning and tokensreferences/palettes-catalog.md — Color palettes by product categoryreferences/typography-catalog.md — 24 curated font pairingsreferences/ux-guidelines.md — UX guidelines by priority (accessibility, touch, performance)