somnus0x/agt-skill-pack/design-taste

Design Taste

Design taste is the ability to look at an interface and know — before any analysis — whether it works. This skill doesn't teach design rules. It trains the pattern recognition that makes rules unnecessary.

Start with identity, not a screen

AI-generated UIs look generic because the model starts from zero every time. Ask it for "a nice pricing page" and it converges on the safest, most average answer in its training data. That's why everything looks the same.

The fix is upstream of the screen: define your design identity first. Before generating anything, decide what world this product lives in — the tone, the emotional reference, what it should feel like. Pick your own direction (editorial, brutalist, playful, terminal, whatever fits the product). Don't let the model pick a default for you.

Once the identity is set, buttons and layout fall out of it. The same content, gen'd against a defined identity, comes out distinctive instead of average.

Generic is not a polish problem. It's a starting-point problem. The four lenses below check whether what you generated matches the identity you decided on.

The design taste framework

When evaluating any UI — your own, a competitor's, or a reference — run these four lenses. Each one isolates a different axis of quality.

Lens 1: Squint test

Literally squint at the screen (or blur the screenshot mentally). What do you see?

• Where does your eye go first? That's the visual hierarchy. If it goes to the wrong thing (a decorative element, a secondary button, a logo) — the hierarchy is broken.
• How many distinct zones do you see? More than 4 zones on one screen = too complex. Reduce.
• Is there a clear "what do I do here" moment? If squinting reveals no obvious action — the page has no purpose.

Output: "Eye goes to [X]. [Right/wrong] element. [N] zones visible. Primary action is [clear/unclear]."

Lens 2: Remove until it breaks

Take the design and mentally delete elements one at a time. Start with decoration — shadows, gradients, icons, borders, background colors.

For each removal, ask: "Does the UI still communicate its purpose?"

When you remove something and the UI breaks — that element was load-bearing. Everything you removed before it was decoration. Good design has very few decorative elements. Every pixel earns its place.

This is the Pareto move: ~80% of what's on a screen carries ~20% of the meaning. Cut the 80% and what's left gets sharp. Remove until removing breaks it — that's where good design lives.

Lens 3: Copy test

Read every word on the screen. Cover the visuals with your hand and read only the text. Does it make sense? Could you accomplish the task from the text alone?

Then do the reverse — cover the text, look only at the layout, icons, and visual affordances. Can you guess what to do without reading anything?

The best interfaces pass BOTH tests. The text works alone. The visuals work alone. Together they're redundant in the right way.

Bad design: pretty visuals with unclear copy, or clear copy trapped in confusing layout. If the page only works because of the gradient and the animation, the product underneath is thin and the design is just covering for it.

Lens 4: Emotional register

Every interface has a feeling. Not "makes the user feel good" — that's too vague. Identify the specific emotional register:

• Confident — Stripe, Linear. Says "we know what we're doing."
• Playful — Figma, Notion. Says "this is fun to use."
• Urgent — Trading UIs, dashboards. Says "act now, data is moving."
• Calm — iA Writer, Things. Says "take your time."
• Chaotic — Most DeFi UIs. Says "we built this in a weekend."

Write the register you want as a word first (fast / trustworthy / fun / refined). Then check: is that the RIGHT register for the product, and does the design actually land it? A finance app with round fonts and pastels reads "toy," not "your money is safe." If the register is wrong, no amount of polish fixes it.

The order matters more than the lenses

There's a hierarchy to this, and most people start at the wrong end:

1. Design identity (brandbook) — decide what the product is. Before you generate.
2. The 4 lenses — enforce that every screen matches the identity. While you generate.
3. AI slop checklist — catch the generic defaults before you ship. Before you ship.

Most people start at step 3 — they delete gradients and shadows off an AI-gen'd page and call it done. They get an interface that's "not wrong" but has no identity. Removing slop without defining identity just gives you a cleaner version of generic.

Start from the top, not the bottom.

Design taste exercises

Exercise 1: Screenshot collection

Save 3 screenshots of UIs you find beautiful this week. Save 3 you find ugly. For each, write one sentence explaining why. After a month, review the collection. Patterns emerge — those patterns are your taste becoming conscious.

Exercise 2: Redesign in 60 seconds

Take any app you use daily. Mentally redesign one screen — what would you change? Not a full redesign — one change. Practice identifying the single highest-leverage design improvement. This builds the "what's the ONE thing wrong here" instinct.

Exercise 3: Steal like an architect

Find the best-designed product in your category (Polymarket, Kalshi, Robinhood, whatever). Don't copy their UI. Identify their design DECISIONS:

• Why did they put the primary action there?
• Why that font size for numbers?
• Why that amount of whitespace?
• What did they choose NOT to show?

The decisions are transferable. The pixels aren't.

Exercise 4: The 5-second test

Show someone your UI for 5 seconds, then close it. Ask: "What was this page about? What would you do next?" If they can't answer both — the design failed. No amount of "but if you look closer..." matters. Five seconds is what you get.

Design references worth studying

• Polymarket — clean information density, confident typography, dark mode done right. Study their market card design — maximum data, minimum decoration.
• Robinhood — controversial but effective. Simplified trading to one big green button. Study what they removed, not what they added.
• Linear — best-in-class for "confident + fast" register. Study how the emotional register is consistent across every screen.
• Uniswap — the gold standard for DeFi UI simplicity. One input, one output, one button. Study the swap card.
• Twitter/X — study the composition flow, the reply UX, the card embeds — density and rhythm done at scale.

AI Slop Detection (the bottom layer)

The fingerprint test: if you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, the design has failed. A distinctive interface makes someone ask "how was this made?" not "which AI made this."

These are the tells of 2024-2025 AI-generated frontends. Flag ANY of these during review.

The AI Color Palette

• Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
• Gradient text on headings or metrics — decorative, not meaningful
• Dark mode with glowing accents as default (looks "cool" without requiring actual design decisions)
• Pure black (#000) or pure white (#fff) backgrounds — neither exists in nature; always tint

The AI Layout Template

• Hero metric layout: big number, small label, supporting stats, gradient accent — the "dashboard starter kit"
• Identical card grids: same-sized cards with icon + heading + text, repeated endlessly
• Cards nested inside cards — visual noise, flatten the hierarchy
• Everything centered — left-aligned text with asymmetric layouts feels more designed
• Big rounded icons above every heading — they rarely add value, make sites look templated
• Same spacing everywhere — without rhythm, layouts feel monotonous

The AI Visual Bag of Tricks

• Glassmorphism everywhere — blur effects, glass cards, glow borders used decoratively rather than purposefully
• Rounded rectangles with generic drop shadows — safe, forgettable, could be any AI output
• Rounded elements with thick colored border on one side — lazy accent, almost never intentional
• Sparklines as decoration — tiny charts that look sophisticated but convey nothing meaningful
• Modals for everything — modals are lazy; there's almost always a better pattern

The AI Font Choice

• Inter, Roboto, Arial, Open Sans everywhere — invisible defaults
• Monospace typography as lazy shorthand for "technical/developer" vibes
• Too many sizes too close together (14px, 15px, 16px, 18px) — creates muddy hierarchy

The AI Motion Pattern

• Bounce or elastic easing — trendy in 2015, tacky now; real objects decelerate smoothly
• Animating layout properties (width, height, padding, margin) instead of transform/opacity
• Every button primary — use ghost buttons, text links, secondary styles; hierarchy matters
• Redundant copy — headers that restate the heading, intros that repeat what users can see

Reference: Typography

Font Selection

Avoid the invisible defaults. Better alternatives:

• Instead of Inter: Instrument Sans, Plus Jakarta Sans, Outfit
• Instead of Roboto: Onest, Figtree, Urbanist
• Instead of Open Sans: Source Sans 3, Nunito Sans, DM Sans
• For editorial/premium: Fraunces, Newsreader, Lora

System fonts are underrated: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui loads instantly and looks native. Good for apps where performance > personality.

You often don't need a second font. One family in multiple weights creates cleaner hierarchy than two competing typefaces. When pairing, contrast on multiple axes (serif + sans, geometric + humanist, condensed + wide). Never pair fonts that are similar but not identical.

Type Scale

Use fewer sizes with more contrast. A 5-size system covers most needs:

Fluid type via clamp() for headings on marketing pages. Fixed rem scales for app UIs, dashboards, data-dense interfaces — no major design system uses fluid type in product UI.

Readability

Line-height should be the base unit for all vertical spacing. If body text has line-height: 1.5 on 16px (= 24px), spacing values should be multiples of 24px. Use ch units for measure (max-width: 65ch). Increase line-height for light text on dark backgrounds (add 0.05-0.1).

CSS Tricks Worth Using

/* Tabular numbers for data alignment — critical in financial UIs */
.data-table { font-variant-numeric: tabular-nums; }
 
/* Proper fractions */
.fraction { font-variant-numeric: diagonal-fractions; }
 
/* Small caps for abbreviations */
abbr { font-variant-caps: all-small-caps; }
 
/* Disable ligatures in code */
code { font-variant-ligatures: none; }
 
/* Kerning (explicit) */
body { font-kerning: normal; }

Check font feature support at Wakamai Fondue.

Font Loading (avoid layout shift)

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}
 
/* Match fallback metrics to minimize CLS */
@font-face {
  font-family: 'CustomFont-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 10%;
}

Reference: Color

Use OKLCH, Not HSL

OKLCH is perceptually uniform — equal steps in lightness actually look equal. HSL lies: 50% lightness in yellow looks bright, 50% in blue looks dark.