Distinctive UI Design
Constrained models converge on one look: Inter/system font, blue-or-purple gradient on white,
centered hero, three equal feature cards, library-default components. It's competent and
forgettable — because the average of the training data is exactly that. This skill forces a
chosen aesthetic and rejects the defaults.
Step 1 — Commit to a direction BEFORE writing any markup
Answer in one line each:
- Purpose & audience — who uses this, to do what?
- Tone — pick an EXTREME (do not hedge to the safe middle): brutally minimal · maximalist ·
retro-futurist · editorial/magazine · brutalist/raw · art-deco/geometric · organic/natural ·
luxury/refined · playful/toy · industrial/utilitarian.
- Differentiation — the ONE thing someone remembers afterward. If you can't name it, you
don't have a design yet.
Intentionality beats intensity: refined minimalism and loud maximalism both win; the timid
middle loses.
The levers — pull them hard
- Typography carries the most character: a distinctive display font + a refined body font.
NEVER make Inter / Roboto / Arial / system-ui the personality (and don't reflexively reach for
the overused "Space Grotesk" either).
- Color: one dominant color + a sharp accent, defined as CSS variables. Timid, evenly-spread
palettes read generic. BANNED: purple/blue gradient on white.
- Motion: ONE well-orchestrated page load with staggered reveals (
animation-delay) delivers
more delight than scattered micro-interactions. Add hover/scroll states that surprise.
- Composition: asymmetry, overlap, diagonal flow, grid-breaking elements; intentional
negative space OR controlled density — not another centered column of equal cards.
- Atmosphere: backgrounds carry depth — gradient mesh, noise/grain, geometric pattern,
layered transparency, dramatic shadow, custom cursor — not a flat solid fill.
Match complexity to the vision
Maximalist → elaborate code, orchestrated motion/effects. Minimalist → restraint: precise
spacing, typographic detail, subtle craft. Elegance = executing the chosen vision fully.
Build on a token system (design-tokens pattern) so the aesthetic is consistent and cheap to
tune.
Anti-slop checklist — if the output ships ANY of these, redo it
If a brand/design system exists, honor it
A project with brand tokens, fonts, or a voice wins over a fresh direction — extend it, don't
override it.
1---2name: distinctive-ui-design3description: Use when building ANY UI — a page, component, or app. Forces a bold, intentional aesthetic direction and bans the generic "AI slop" look (Inter + purple-gradient-on-white + centered hero + equal cards). Constrained models default hard to that mean; this makes them choose.4---56# Distinctive UI Design78Constrained models converge on one look: Inter/system font, blue-or-purple gradient on white,9centered hero, three equal feature cards, library-default components. It's competent and10forgettable — because the *average* of the training data is exactly that. This skill forces a11chosen aesthetic and rejects the defaults.1213## Step 1 — Commit to a direction BEFORE writing any markup14Answer in one line each:15- **Purpose & audience** — who uses this, to do what?16- **Tone — pick an EXTREME** (do not hedge to the safe middle): brutally minimal · maximalist ·17 retro-futurist · editorial/magazine · brutalist/raw · art-deco/geometric · organic/natural ·18 luxury/refined · playful/toy · industrial/utilitarian.19- **Differentiation** — the ONE thing someone remembers afterward. If you can't name it, you20 don't have a design yet.2122Intentionality beats intensity: refined minimalism and loud maximalism both win; the timid23middle loses.2425## The levers — pull them hard26- **Typography** carries the most character: a distinctive display font + a refined body font.27 NEVER make Inter / Roboto / Arial / system-ui the personality (and don't reflexively reach for28 the overused "Space Grotesk" either).29- **Color:** one dominant color + a sharp accent, defined as CSS variables. Timid, evenly-spread30 palettes read generic. BANNED: purple/blue gradient on white.31- **Motion:** ONE well-orchestrated page load with staggered reveals (`animation-delay`) delivers32 more delight than scattered micro-interactions. Add hover/scroll states that surprise.33- **Composition:** asymmetry, overlap, diagonal flow, grid-breaking elements; intentional34 negative space OR controlled density — not another centered column of equal cards.35- **Atmosphere:** backgrounds carry depth — gradient mesh, noise/grain, geometric pattern,36 layered transparency, dramatic shadow, custom cursor — not a flat solid fill.3738## Match complexity to the vision39Maximalist → elaborate code, orchestrated motion/effects. Minimalist → restraint: precise40spacing, typographic detail, subtle craft. Elegance = executing the chosen vision fully.4142Build on a token system (`design-tokens` pattern) so the aesthetic is consistent and cheap to43tune.4445## Anti-slop checklist — if the output ships ANY of these, redo it46- [ ] Generic font as the identity (Inter/Roboto/Arial/system, or reflexive Space Grotesk)47- [ ] Purple/blue gradient on white48- [ ] Centered hero + three equal feature cards + generic footer49- [ ] Default component-library styling with no point of view50- [ ] Looks like the last UI you built — vary theme, font, and aesthetic every time5152## If a brand/design system exists, honor it53A project with brand tokens, fonts, or a voice wins over a fresh direction — extend it, don't54override it.
stevenfackley