Skip to content
Flows
Library Paths Vault Generate Progress Run Demo Flow
Debugging Intermediate · 60-90 minutes

Make UI Less Generic

Escape the default-AI look: define a real visual identity and apply it systematically across your app.

Start Route · 5 steps

The route

5 steps to Done

  1. 01

    Audit the generic tells

    Name exactly what makes the app look AI-default.

    Preview prompt + verify gate ▾

    Audit the UI and list every 'AI slop' tell with its location: default system/Inter-only fonts, purple/pink or rainbow gradients, emoji used as icons, identical rounded-card grids, default shadcn/bootstrap look, placeholder copy, inconsistent spacing, missing hover/focus states. Rate the overall genericness 1-10 with justification and screenshot references.

    • ✓ Fonts, colors, icons, and copy all audited
    • ✓ Each tell has a concrete location
    • ✓ An honest genericness score is given
  2. 02

    Define the visual direction

    You cannot restyle toward nothing - pick a direction with tokens.

    Preview prompt + verify gate ▾

    Define a distinct visual direction appropriate to this product and audience. Deliver: a direction name and one-line mood (e.g. 'technical command center', 'warm editorial', 'brutalist minimal'); a font pairing (heading + body, from Google Fonts, with weights); a color system (background, surface, text hierarchy, ONE accent, semantic states) as concrete tokens/CSS variables; spacing scale and radius/border/shadow rules; icon set choice. This becomes the single source of truth.

    • ✓ Fonts are named with weights
    • ✓ Colors are exact values, not vibes
    • ✓ The direction fits the product's audience
  3. 03

    Apply the foundation

    Install tokens globally: fonts, colors, spacing - the base coat.

    Preview prompt + verify gate ▾

    Apply the foundation app-wide. Requirements: load and apply the font pairing (headings and body actually change); replace the color system at the token/theme level so all components inherit it; remove every generic gradient in favor of the new system; normalize spacing to the scale; verify no layout breaks by walking all pages after.

    • ✓ Headings render the new font (verify computed styles)
    • ✓ Old gradients are gone everywhere
    • ✓ All pages walked with no layout regressions
  4. 04

    Restyle key components

    The identity lives in the details: cards, buttons, forms, nav.

    Preview prompt + verify gate ▾

    Restyle the core components to the direction: buttons (hierarchy of primary/secondary/ghost with distinct hover/active/focus states), cards (borders, elevation, padding per the tokens), forms (inputs, focus rings, error styling), navigation (active states, structure), and replace every emoji-icon with the chosen icon set at consistent sizes. Keep behavior identical - style only.

    • ✓ Buttons show a clear visual hierarchy
    • ✓ All emoji icons replaced
    • ✓ Focus states are visible and on-brand
  5. 05

    Add micro-interactions and final sweep

    Deliberate motion and a last pass separate polished from generic.

    Preview prompt + verify gate ▾

    Add polish. Requirements: hover transitions on interactive elements (150-250ms, specific properties - never transition:all), entrance treatment for primary content, satisfying press/active states, and skeletons/spinners matching the new identity. Then do the final sweep: rewrite placeholder copy into real product voice, check spacing rhythm page by page, and re-rate the genericness score with before/after comparison. Verify zero functional regressions on the core journey.

    • ✓ Transitions are specific-property, not transition-all
    • ✓ Placeholder copy is gone
    • ✓ Core journey still works end to end