Use after generating any visual design, frontend code, or .pen file to check for generic AI defaults. Triggers on: review design, audit design, check design quality, design review, does this look good, is this generic, AI slop, design check, visual QA, before shipping design, review my frontend, check my CSS, quality check, polish, improve design. Catches common AI aesthetic convergence patterns.
Post-generation review that catches common AI design defaults. Run this audit after producing any visual design (Pencil .pen files) or frontend code (HTML/CSS/JS).
For each category below, check the generated output against the criteria. Flag any failures and fix them before considering the design complete.
For Pencil .pen files: use batch_get to read node properties, get_screenshot for visual verification, and search_all_unique_properties for bulk analysis.
For frontend code: read the CSS/styles and analyze values directly.
| Check | Pass | Fail |
|---|---|---|
| Font families | Distinctive, characterful choices | Inter, Roboto, Arial, Helvetica, system-ui, Open Sans, Lato, Montserrat, Poppins, Nunito |
| Weight contrast | 300+ difference between heading and body weights | 400 vs 600 (too subtle) |
| Size ratio | Heading is 2.5x+ body size | Heading is < 2x body size |
| Letter-spacing | Varies by context (tight headings, loose labels) | Same letter-spacing everywhere |
| Type scale | Mathematical ratio (1.25, 1.333, 1.5, 1.618) | Arbitrary sizes with no relationship |
| Check | Pass | Fail |
|---|---|---|
| Palette structure | Clear dominant (60%), supporting (30%), accent (10%) | Evenly distributed — no clear hierarchy |
| Gradient | Intentional, matches aesthetic | Purple/indigo gradient on white (the #1 AI default) |
| Accent usage | Single sharp accent, used sparingly for emphasis | Multiple competing accent colors |
| Contrast | WCAG AA (4.5:1 normal text, 3:1 large text) | Low contrast, washed out |
| CSS variables | All colors defined as variables, referenced everywhere | Hardcoded hex values scattered in component styles |
| Check | Pass | Fail |
|---|---|---|
| Elevation variety | 3-4 distinct shadow levels with different purposes | Same shadow on every element |
| Shadow scale | Increases meaningfully (blur, spread, offset) per level | Uniform shadow-md everywhere |
| Dark mode depth | Uses lighter surfaces + borders for elevation | Same shadows on dark bg (invisible) |
| Purposeful use | Shadows indicate interactivity or layering | Decorative shadows with no hierarchy meaning |
| Check | Pass | Fail |
|---|---|---|
| Grid adherence | All values are 8px multiples (4px for tight) | Arbitrary values (13px, 17px, 22px) |
| Whitespace | Generous — sections breathe, content isn't cramped | Tight, dense, no breathing room |
| Consistency | Same spacing for same contexts throughout | Different padding on similar cards/sections |
| Hierarchy | Section gaps > card gaps > internal gaps | Flat spacing — no spatial hierarchy |
| Check | Pass | Fail |
|---|---|---|
| Template avoidance | At least one asymmetric or unexpected element | Three-card grid + centered hero + footer |
| Focal point | One dominant element per viewport | Everything equal weight — no hierarchy |
| Variety | Mix of layout patterns across sections | Same card grid repeated for every section |
| Grid-breaking | At least one element breaks the grid intentionally | Perfectly aligned grid throughout — feels robotic |
| Check | Pass | Fail |
|---|---|---|
| Entrance | Orchestrated page load (staggered reveals) | No entrance animation — feels static |
| Hover states | At least primary CTAs have meaningful hover | Identical hover on every element OR no hovers |
| Scroll | Content sections animate on scroll entry | All content visible immediately with no scroll interaction |
| Restraint | Motion is purposeful and hierarchical | Every element bounces/fades independently |
| Check | Pass | Fail |
|---|---|---|
| Contrast ratios | Meets WCAG AA minimums | Decorative text below 4.5:1 |
| Semantic HTML | Proper heading hierarchy (h1 > h2 > h3) | Div soup — all <div> and <span> |
| Alt text | Images have descriptive alt text | Missing or generic alt text |
| Focus states | Interactive elements have visible focus | No focus indicators |
Count the checks above. For each category, rate:
A production-ready design should have zero Fail categories and at most one Warning.
| Problem Found | Quick Fix |
|---|---|
| Banned font detected | Swap to a distinctive alternative — see ref/fix-patterns.md |
| Purple gradient default | Replace with intentional palette matching the aesthetic direction |
| Uniform shadows | Define 3-4 elevation levels, apply by purpose |
| Arbitrary spacing | Snap all values to 8px grid |
| No type scale | Pick a ratio (1.25-1.618), compute sizes from base |
| Three-card template | Introduce asymmetry — stagger, overlap, or vary card sizes |
| Subtle weight contrast | Push heading to 700-900, body to 400 |
| No entrance animation | Add staggered animation-delay on page load elements |
ref/fix-patterns.md — Detailed fix instructions with code examples for each common problem