Design Taste

Taste Skill

The anti-slop frontend framework. Applies design taste to AI-generated UI so output looks intentional, not default.

How to use

When generating or reviewing UI:

1. Run through the audit below
2. Apply targeted upgrades — don't rewrite from scratch
3. Improve what exists, work with whatever stack is in use

Design Audit

Typography

• Browser default fonts or Inter everywhere. Replace with a font that has character. Good options: Geist, Outfit, Cabinet Grotesk, Satoshi. For editorial/creative projects, pair a serif header with a sans-serif body.
• Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
• Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
• Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
• Numbers in proportional font. Use a monospace font or enable tabular figures (font-variant-numeric: tabular-nums) for data-heavy interfaces.
• Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels.
• All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead.
• Orphaned words. Single words sitting alone on the last line. Fix with text-wrap: balance or text-wrap: pretty.

Color and Surfaces

• Pure #000000 background. Replace with off-black, dark charcoal, or tinted dark (#0a0a0a, #121212, or a dark navy).
• Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
• More than one accent color. Pick one. Remove the rest. Consistency beats variety.
• Mixing warm and cool grays. Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
• Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
• Generic box-shadow. Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
• Flat design with zero texture. Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
• Perfectly even gradients. Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
• Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
• Random dark sections in a light mode page (or vice versa). A single dark-background section breaking an otherwise light page looks like a copy-paste accident.
• Empty, flat sections with no visual depth. Sections that are just text on a plain background feel unfinished.

Layout

• Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
• Three equal card columns as feature row. This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
• Using height: 100vh for full-screen sections. Replace with min-height: 100dvh to prevent layout jumping on mobile browsers.
• Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
• No max-width container. Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
• Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
• Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.
• No overlap or depth. Elements sit flat next to each other. Use negative margins to create layering and visual depth.
• Symmetrical vertical padding. Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
• Dashboard always has a left sidebar. Try top navigation, a floating command menu, or a collapsible panel instead.
• Missing whitespace. Double the spacing. Let the design breathe.
• Buttons not bottom-aligned in card groups. Pin buttons to the bottom of each card so they form a clean horizontal line.
• Feature lists starting at different vertical positions. In pricing tables or comparison cards, the list of features should start at the same Y position across all columns.
• Inconsistent vertical rhythm in side-by-side elements. Align shared elements (titles, descriptions, prices, buttons) across all items.

Interactivity and States

• No hover states on buttons. Add background shift, slight scale, or translate on hover.
• No active/pressed feedback. Add a subtle scale(0.98) or translateY(1px) on press to simulate a physical click.
• Instant transitions with zero duration. Add smooth transitions (200-300ms) to all interactive elements.
• Missing focus ring. Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
• No loading states. Replace generic circular spinners with skeleton loaders that match the layout shape.
• No empty states. An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
• No error states. Add clear, inline error messages for forms. Do not use window.alert().
• Dead links. Buttons that link to #. Either link to real destinations or visually disable them.
• No indication of current page in navigation. Style the active nav link differently so users know where they are.
• Scroll jumping. Anchor clicks jump instantly. Add scroll-behavior: smooth.
• Animations using top, left, width, height. Switch to transform and opacity for GPU-accelerated, smooth animation.

Content

• Generic names like "John Doe" or "Jane Smith". Use diverse, realistic-sounding names.
• Fake round numbers like 99.99%, 50%, $100.00. Use organic, messy data: 47.2%, $99.00, +1 (312) 847-1928.
• Lorem ipsum. Replace with realistic placeholder content that sounds like the product.
• Marketing buzzword overload. Cut "synergy", "leverage", "transformative", "best-in-class". Use plain language.
• Inconsistent date/time formats. Pick one format and use it throughout. ISO 8601 (2026-06-23) is the safest default.

When to deviate

These are defaults, not laws. For specific product categories, break the rules deliberately:

• Terminal/operational interfaces (CLIs, dashboards, security tools): monospace, sharp edges, and minimal color are appropriate, not anti-patterns.
• Editorial/marketing sites: serif headers, large images, generous whitespace.
• Data dashboards: dense layouts, tabular figures, multi-column grids.

Match the design language to the product. The audit flags generic AI defaults — not universal truths.