Design Audit — Kill the AI Slop

Take any existing website and make it look like a human designer with taste built it. This skill audits, diagnoses, and fixes — it does not build from scratch (use visual-upgrade or frontend-design for greenfield work).

When to Use

• "Spruce up this site"
• "Make it look less AI-generated"
• "The CTA is buried"
• "Too much purple/green"
• "Make it more premium"
• "Add life to this page"
• "Frame the CTAs better"

Phase 1: Audit (Read Before You Touch)

Step 1 — Capture the Current State

If the site is live, fetch it:

# Screenshot via Playwright MCP or Puppeteer
# Read the HTML source
# Note: always read the actual code, never guess from memory

If local, read the files directly. Never propose changes to code you haven't read.

Step 2 — Run the Slop Checklist

Score each item 0 (clean) or 1 (slop detected). Total score = severity.

Colors (max 6 points):

• Purple gradients as primary palette (#8B5CF6, #A855F7, #7C3AED, indigo-to-violet) — the #1 AI fingerprint. Root cause: Tailwind's bg-indigo-500 dominated GitHub training data 2019-2024
• Neon cyan/electric blue as dominant accent (#00FFFF, #00D4FF, #0066FF)
• Lime/emerald green overuse (#10B981, #22C55E as primary, not just success states)
• Mint green + white SaaS palette
• Even color distribution (no dominant + accent hierarchy — everything same weight)
• White/light gray background with colored cards floating on it (the default AI layout)

Typography (max 5 points):

• Inter, Roboto, or system fonts used for headings (Inter at regular weight in body is technically fine but invisible as a design choice)
• Space Grotesk as primary font — peaked 2022-2023, now signals template-based design
• Single font weight throughout (no weight hierarchy)
• No display font — headings look like body text, just bigger
• Generic font pairing (Inter + Inter, Roboto + Open Sans)

Layout (max 6 points):

• CTA buttons below the fold or buried in text
• Three-box icon grid (3 equal cards, centered icons, headline + 2 sentences — the most common AI-generated pattern)
• Symmetric grid with equal-weight cards (nothing draws the eye)
• No visual hierarchy — sections all feel the same importance
• Hero section is just text centered on a gradient
• No asymmetry, overlap, or spatial tension anywhere

Interactivity (max 5 points):

• No hover states on interactive elements
• No scroll-triggered animations
• No micro-interactions (button press, card lift, glow)
• Static hero — no motion, 3D, particles, or video
• Interactions feel programmed not physical (instant stops, no momentum/spring/overshoot)

Depth (max 5 points):

• Flat cards with hard borders (no glass, no blur, no layering)
• No shadows or single uniform shadow everywhere
• Overly dramatic shadows (too much spread + opacity applied uniformly to every card)
• No background texture/atmosphere (solid color bg)
• No layering (everything on same visual plane)

Performance (max 4 points):

• INP > 200ms (check PageSpeed Insights field data, not just Lighthouse lab data)
• LCP > 2.5s (hero image/text too slow to render)
• CLS > 0.1 (layout shifts from lazy-loaded content)
• No prefers-reduced-motion support (animations can't be disabled)

Accessibility (max 4 points):

• Color contrast failures (83.6% of sites fail this — the #1 accessibility issue on the web)
• No custom focus indicators (using default browser blue outline or none at all)
• Interactive targets < 24x24px CSS pixels (WCAG 2.2 AA minimum)
• No keyboard navigation flow designed

Scoring:

• 0-8: Minor polish needed
• 9-16: Significant upgrade needed
• 17-25: Full redesign territory
• 26+: Nuke from orbit, start over (use visual-upgrade skill instead)

Step 3 — Produce the Diagnosis

Output a specific fix list, not vague advice. Example:

AUDIT RESULTS — [Site Name]
Score: 11/22 (Significant upgrade needed)

CRITICAL (fix first):
1. CTA "Get Started" is below 3 paragraphs of text — move above the fold, full-width, glow border
2. Primary palette is purple-on-white (#7C3AED on #FAFAFA) — replace with [recommended palette]
3. Hero is static centered text on gradient — add 3D element or animated background

HIGH:
4. All 4 feature cards are equal weight — make one "featured" with glow + scale
5. No scroll animations — add reveal on every section
6. Inter used for everything — swap headings to [display font]

MEDIUM:
7. Cards are flat with 1px gray border — add glassmorphism
8. No hover states on cards — add lift + shadow
9. Footer is plain text — add columns, brand mark, gradient border-top

Phase 2: Fix — CTA-First Design

Every fix revolves around one principle: active content frames the CTA.

The CTA Hierarchy

Every page has 1 primary CTA and 1-2 secondary CTAs. Everything else exists to draw the eye toward them.

                    ┌─────────────────────┐
    Particles ──────│                     │────── Animated element
    Fog orbs ──────►│   PRIMARY CTA       │◄───── Glow border
    3D element ─────│   (Get Started)     │────── Hover lift + shadow
    Data ticker ────│                     │────── Color contrast
                    └─────────────────────┘

Rules:

1. Primary CTA must be visible without scrolling
2. Primary CTA gets the strongest color in the palette (not the background color) — contrast against surroundings is what drives clicks, not absolute color
3. At least one animated/active element must be adjacent to the primary CTA
4. CTA button must have: glow on hover, lift transform, distinct color from all other buttons
5. Repeat the primary CTA at least once more below the fold (after social proof or features)
6. Secondary CTAs use ghost or glass style — never compete with primary

CTA Microcopy (research-backed):

• First-person possessive outperforms second-person: "Get My Free Guide" > "Get Your Free Guide"
• Specific beats generic: "Start Building" > "Submit", "Claim Your Spot" > "Register"
• Variables with highest leverage in order: copy > color contrast > placement > size
• Red/orange CTAs: 32-40% higher click rates in studies (urgency signal)
• Honest urgency works; fake scarcity backfires and erodes trust

CTA button pattern:

.cta-primary {
    background: var(--accent);
    color: var(--bg-deep);
    padding: 14px 36px;
    border-radius: var(--r-pill, 100px);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 200ms ease;
}
.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 24px rgba(var(--accent-rgb), 0.4),
        0 8px 24px rgba(0,0,0,0.15);
}
.cta-primary:active {
    transform: translateY(0px);
}

Active Content That Frames CTAs

Don't just place a CTA on a static background. Surround it with movement:

Phase 3: Fix — Kill the AI Colors

Forbidden Palette (Never Use as Primary)

/* THE AI SLOP PALETTE — avoid all of these as dominant colors */
--ai-purple-1: #8B5CF6;    /* Tailwind violet-500 */
--ai-purple-2: #A855F7;    /* Tailwind purple-500 */
--ai-purple-3: #7C3AED;    /* Tailwind violet-600 */
--ai-indigo:   #6366F1;    /* Tailwind indigo-500 */
--ai-cyan:     #00FFFF;    /* Pure cyan */
--ai-electric: #0066FF;    /* Generic "tech blue" */
--ai-lime:     #22C55E;    /* Tailwind green-500 */
--ai-emerald:  #10B981;    /* Tailwind emerald-500 */
--ai-magenta:  #FF00FF;    /* Fuchsia */

These colors are fine as small accents (success states, highlights). They are NOT fine as primary palette or gradients.

Replacement Strategy

When auditing, identify what the site's colors are trying to communicate and pick from:

Dark mode sites (most common for tech/SaaS):

Light mode sites:

2025-2026 color direction — Earth tones & desert palettes:

The broader 2026 mood: "Quiet Joy" — calming, grounded, warm without being garish. Earth tones over neon. Desert over forest.

OKLCH Color Space (Use Instead of HSL)

OKLCH is perceptually uniform — a 50% lightness reads as 50% visually (unlike HSL where blue at 50% looks much darker than yellow at 50%). Browser support: 93.1%+.

Why it matters for audits:

• Desaturating colors moves smoothly to gray without hue shifts (HSL shifts blue toward purple)
• Contrast ratios computed in OKLCH are more reliable for accessibility
• Dark mode generation is faster and more predictable
• Tools: oklch.click, oklch.fyi, Atmos (atmos.style/playground)

Color Application Rules

1. One dominant background — 70% of the page
2. One primary accent — CTAs, key highlights, brand identity (10%)
3. One secondary accent — supporting elements, hover states, badges (5%)
4. Neutrals fill the rest — text, borders, cards (15%)
5. Never distribute colors evenly — that's what makes things look AI-generated
6. Use OKLCH for palette generation — perceptually uniform scales, reliable contrast

Phase 4: Fix — Add Depth and Life

Glassmorphism → Liquid Glass (2025-2026 Evolution)

Basic glassmorphism is still effective but the premium tier is now Apple Liquid Glass — translucent material with refraction, specular highlights, and dynamic response to surrounding content. Use basic glass for most cards; upgrade to liquid glass for hero elements and featured cards.

Basic glass (good enough for most cards):

.glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: background 200ms, border-color 200ms, transform 200ms;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

Liquid Glass (premium — for hero/featured elements):

.liquid-glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow:
        0 1px 1px rgba(255,255,255,0.1) inset,
        0 -1px 1px rgba(0,0,0,0.05) inset,
        0 8px 32px rgba(0,0,0,0.2);
    /* Specular highlight on top edge */
    background-image: linear-gradient(
        180deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0) 40%
    );
}

Scroll Reveal System

CSS-only (best — runs on compositor thread, zero JS, 60fps):

/* Native CSS Scroll-Driven Animation — Chrome 115+, Safari 18+, Firefox partial */
@supports (animation-timeline: view()) {
    .reveal {
        animation: reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }
    @keyframes reveal-up {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
}

React fallback (when CSS native isn't enough):

'use client';
import { useEffect, useRef } from 'react';

export default function ScrollReveal({ children, delay = 0 }) {
    const ref = useRef(null);
    useEffect(() => {
        const el = ref.current;
        if (!el) return;
        const obs = new IntersectionObserver(([e]) => {
            if (e.isIntersecting) { el.classList.add('visible'); obs.unobserve(el); }
        }, { threshold: 0.15 });
        obs.observe(el);
        return () => obs.disconnect();
    }, []);
    return <div ref={ref} className={`reveal delay-${delay}`}>{children}</div>;
}

Background Atmosphere

Don't leave backgrounds flat. Layer these:

/* Fog orbs — 3 colored blurred circles drifting slowly */
.fog-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    pointer-events: none;
    animation: drift 25s ease-in-out infinite alternate;
}
.fog-1 { width: 500px; height: 500px; background: var(--accent); top: 10%; left: -10%; }
.fog-2 { width: 400px; height: 400px; background: var(--secondary); top: 50%; right: -5%; animation-delay: -8s; }
.fog-3 { width: 350px; height: 350px; background: var(--accent); bottom: 10%; left: 30%; animation-delay: -15s; }

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.1); }
}

Featured Card Pattern

One card in every grid should stand out:

.card.featured {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), transparent);
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.1);
}
.card.featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

Phase 5: Fix — Typography Upgrade

Display Font Replacement

Never leave Inter/Roboto/Arial as the heading font. Space Grotesk is now also overused — peaked 2022-2023, signals template-based design. Replace with:

The Serif Revival (2025-2026)

Serifs are back in digital — appearing in hero sections and editorial contexts. The direction is classic book typography (Old Style, transitional serifs) in digital contexts, not display serifs. Use serifs for headings when the brand needs warmth, credibility, or editorial authority. Pair with a clean sans body font.

Variable Font Animation

When auditing, check if the site uses variable fonts. If not, this is a free upgrade:

• Weight morphing on hover (light → bold as spring animation)
• Width compression on scroll
• Use font-variation-settings with CSS transitions or Motion library
• Distinguishes sites from template work more than almost any other single technique

Three-Font System

Every upgraded site uses exactly 3 fonts:

:root {
    --f-display: 'Clash Display', sans-serif;  /* Headings, hero text */
    --f-body: 'DM Sans', sans-serif;           /* Paragraphs, UI text */
    --f-mono: 'JetBrains Mono', monospace;     /* Code, data, stats */
}

Weight Hierarchy

h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; }
body { font-family: var(--f-body); font-weight: 400; }
.label { font-family: var(--f-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; }
.stat { font-family: var(--f-mono); font-weight: 700; }

Phase 6: 3D and Blender Assets (Optional)

If Blender MCP is available, add a premium 3D element to the hero section.

When to Add 3D

• Hero section feels empty or static
• The product has an obvious visual metaphor (globe, chart, network, device)
• The site already has a canvas/WebGL area that's underutilized

Quick Blender Workflow (Existing Assets)

1. Search Sketchfab for relevant model: search_sketchfab_models "hologram [metaphor]"
2. Download + position in Blender scene
3. Apply glass/holographic material
4. Render as PNG for static hero OR export for Three.js

AI 3D Generation (Custom Models — Preferred)

When no Sketchfab model fits, generate custom 3D from concept images:

1. Generate concept — mcp__nano-banana__generate_image with Gemini 3.1 Pro. Iterate with continue_editing until the concept is right.
2. Image → 3D — mcp__blender__generate_hyper3d_model_via_images feeds the concept to Rodin Gen-2 for million-face 3D model.
3. Refine — mcp__blender__execute_blender_code to adjust materials, scale, lighting.
4. Export — GLTF for Three.js hero sections, or render as PNG with bloom/glow.

See context/blender-mcp.md for the full Gemini → Rodin → Blender → Three.js pipeline.

Three.js Integration Pattern

'use client';
import { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

// Always dynamic import, never SSR
const WebGLScene = dynamic(() => import('./WebGLScene'), { ssr: false });

Anti-Patterns (Things That Make Sites Look AI-Generated)

1. Purple gradient hero — the single most common AI design cliche. Root cause: Tailwind's bg-indigo-500 dominated LLM training data
2. Three-box icon grid — 3 equal cards, centered icons, headline + 2 sentences. The default AI-generated "features" section
3. Evenly spaced identical cards — no featured card, no hierarchy
4. Inter or Space Grotesk headings — screams "default, didn't think about it" / "used a template"
5. White background with colored blobs — the Notion/Linear clone look
6. Symmetric everything — real designers use asymmetry and tension
7. No hover states — flat, dead UI
8. Emoji as icons — use SVGs or icon libraries
9. "Powered by AI" purple glow — we're building products, not demos
10. Equal padding everywhere — vary spacing for rhythm
11. Stock photo hero — use illustration, 3D, or abstract art instead
12. Uniform border-radius — same radius on every element at every size
13. Overly dramatic uniform shadows — drop shadows with too much spread applied to every card identically
14. Neon on dark — peaked 2021-2023, now signals "crypto template"
15. Interactions that stop instantly — no spring physics, no momentum, no overshoot. Feels robotic vs physical

The "Imperfect by Design" counter-movement (2025-2026):

• Intentional constraint breaks — layouts that violate grid on purpose
• Handmade/imperfect elements — wobbly lines, wear, natural variation that AI can't replicate
• Specific cultural/material color references ("1970s ski lodge" not "modern and clean")
• Zine-style editorial chaos — overlapping elements, angled type, scattered placement
• Strategic imperfection in typography — deliberate baseline misalignment signals human authorship

Phase 7: Performance Audit

Core Web Vitals (check FIELD data, not just Lighthouse)

Critical distinction: Lab data (Lighthouse) ≠ field data (CrUX/PageSpeed Insights). Google uses field data for ranking. Always check PageSpeed Insights for real-user performance. CrUX Dashboard was deprecated Nov 2025 — use PageSpeed Insights or CrUX API.

Performance Fixes That Don't Sacrifice Design

1. Compositor-thread-only animations: Only animate transform, opacity, and filter — never width, height, top, left. Zero INP cost.
2. CSS Scroll-Driven Animations: Native, compositor-threaded, no JS execution cost. Progressive enhance with @supports (animation-timeline: scroll()).
3. Preload LCP element: Explicit <link rel="preload"> for above-fold hero image.
4. Font display: swap: Prevents invisible text during font loading.
5. Islands architecture: Only hydrate interactive components. Static content renders as pure HTML.

Phase 8: Accessibility Upgrade

WCAG 2.2 AA Requirements (2025-2026 baseline)

Making Accessible Design Look Premium (Not Clinical)

• Custom focus indicators that match the brand's visual system — a thick colored ring with accent color, not blue outline
• prefers-reduced-motion as a design branch, not a kill switch — design alternative micro-animations for reduced-motion users
• Keyboard navigation as UX flow — treat tab order and keyboard interactions as first-class, not afterthought
• High contrast as design system — build contrast ratios into tokens so both modes are verifiably accessible

Business case: EU European Accessibility Act enforcement began June 2025. WCAG 2.2 AA is now a legal requirement in the EU, UK, and increasingly in US government contracts.

Phase 9: Mobile Premium Audit

What Makes Mobile Feel Premium vs Generic

Mobile Audit Checklist

• Primary CTA reachable by thumb without stretching
• Bottom sheets instead of centered modals for actions
• Spring/momentum on gesture dismissal (not instant)
• Tap targets ≥ 44x44px in thumb zone, ≥ 24x24px elsewhere
• No horizontal scroll on any viewport width
• Touch interactions have immediate visual feedback (scale, shadow)

Verification Checklist

After applying fixes:

CTA & Conversion:

• Primary CTA visible above the fold
• Primary CTA has glow/lift hover state
• CTA microcopy is specific and first-person ("Get My..." not "Submit")
• CTA repeated at least once below fold (after value proof)

Visual Identity:

• No forbidden AI colors as dominant palette
• Display font is not Inter/Roboto/Arial/Space Grotesk
• Color hierarchy: 1 dominant + 1 primary accent + 1 secondary accent
• Background has atmosphere (fog, particles, gradient, noise texture, or grain)

Interactivity:

• At least one animated/active element near CTA
• Glass or liquid glass cards replace flat cards
• Scroll reveal on every major section (prefer CSS-native animation-timeline: view())
• One featured/highlighted card in each grid
• Hover states on all interactive elements
• Interactions have spring physics (momentum, overshoot, damping) not instant stops

Performance:

• INP < 200ms (PageSpeed Insights field data)
• LCP < 2.5s
• CLS < 0.1
• Animations use compositor-thread only (transform, opacity, filter)
• prefers-reduced-motion respected

Accessibility:

• Color contrast passes WCAG 2.2 AA (4.5:1 normal text, 3:1 large)
• Custom focus indicators (≥ 2px, 3:1 contrast, brand-colored)
• Interactive targets ≥ 24x24px
• Keyboard navigation flow tested

Mobile:

• Responsive at 1440px / 768px / 375px
• Primary CTA in thumb zone
• Bottom sheets for actions (not centered modals)
• Tap targets ≥ 44x44px in thumb zone

Related Skills

• visual-upgrade — Full rebuild from scratch (HTML prototype → Next.js migration)
• frontend-design — Greenfield design philosophy and aesthetic direction
• blender-proposal-visuals — 3D hero renders and Chinchilla brand assets
• claudecanvas — Proposal mockups with matched architecture diagrams