UI Audit & Redesign
Systematic workflow to upgrade existing UIs from generic to premium. Based on proven anti-slop patterns from the design engineering community.
This skill does not rewrite from scratch. It audits what exists and applies targeted, prioritized fixes working with the existing stack.
Workflow: Scan → Diagnose → Fix
Step 1: Scan
Read the codebase first. Identify:
- Framework (React, Vue, Svelte, vanilla, etc.)
- Styling method (Tailwind, vanilla CSS, styled-components, CSS modules, etc.)
- Current design patterns and component library (if any)
- Fonts currently loaded
- Color values currently in use
Step 2: Diagnose
Run through every section of the audit below. List every generic pattern, weak point, and missing state found.
Step 3: Fix
Apply targeted upgrades in priority order (see Section 7). Work with the existing stack — do not introduce new frameworks or rewrite components from scratch.
1. Anti-Slop Patterns (Banned → Replacement)
These are the most common AI-generated design fingerprints. If the UI contains any of these, fix them first.
Fonts
| Banned | Replacement Options |
|---|---|
| Inter | Geist, Satoshi, Outfit, Plus Jakarta Sans |
| Roboto | Cabinet Grotesk, General Sans, Switzer |
| Arial, Helvetica | Any of the above; for editorial: pair a serif header (e.g. Fraunces, Playfair Display) with a sans body |
| Open Sans | Same as above |
| System font stack only | Load at least one intentional typeface |
Rule: Every project should have at least one font that was deliberately chosen, not defaulted to.
Colors
| Banned | Replacement |
|---|---|
| Purple/blue AI gradient | Neutral base + single considered accent |
Pure #000000 background | Off-black: #0a0a0a, #121212, or tinted dark (dark navy, dark charcoal) |
| Oversaturated accents (saturation > 80%) | Desaturate to blend with neutrals |
| More than one accent color | Pick one. Remove the rest. |
| Mixing warm and cool grays | Stick to one gray family, tint all consistently |
Layout
| Banned | Replacement |
|---|---|
| 3 equal-column card row (the #1 AI layout) | 2-column zig-zag, asymmetric grid, horizontal scroll, masonry |
| Centered hero text over dark image | Asymmetric hero: text aligned left/right, image with gradient fade |
| Edge-to-edge sticky navbar | Floating nav, inset nav, or nav with max-width constraint |
height: 100vh for full-screen sections | min-height: 100dvh (prevents iOS Safari viewport jumping) |
Complex flexbox percentage math calc(33%-1rem) | CSS Grid: grid grid-cols-1 md:grid-cols-3 gap-6 |
| Everything centered and symmetrical | Break symmetry with offset margins, mixed aspect ratios |
Components
| Banned | Replacement |
|---|---|
| Generic circular spinner for loading | Skeleton loaders matching layout shape |
window.alert() for errors | Inline error messages in context |
Buttons linking to # | Real destinations or visually disabled state |
| Emojis as icons in UI | Proper icon set (Phosphor, Radix Icons, Lucide) |
2. Typography Audit
Check for these problems and fix them:
| Problem | Fix |
|---|---|
| Headlines lack presence | Increase size, tighten letter-spacing (negative tracking), reduce line-height |
| Body text too wide | Limit to ~65 characters (max-w-prose or max-width: 65ch) |
| Only Regular (400) and Bold (700) used | Introduce Medium (500) and SemiBold (600) for subtle hierarchy |
| Numbers in proportional font | Use font-variant-numeric: tabular-nums for data-heavy interfaces |
| Missing letter-spacing adjustments | Negative tracking for large headers, positive for small caps/labels |
| All-caps subheaders everywhere | Try sentence case, lowercase italic, or small-caps instead |
| Orphaned words on last line | text-wrap: balance (headings) or text-wrap: pretty (body) |
| Same font size for everything | Apply modular type scale: 12, 14, 16, 20, 24, 30, 36px |
| Headings with relaxed line-height | Headings: line-height: 1.0–1.25. Body: line-height: 1.5–1.75 |
3. Color & Surface Audit
| Problem | Fix |
|---|---|
Pure #000 or #fff backgrounds | Use off-black (#0a0a0a) or warm white (#fafafa, #fdfbf7) |
Generic box-shadow with pure black | Tint shadows to match background hue (dark blue shadow on blue bg) |
| Flat design with zero texture | Add subtle noise, grain, or micro-patterns (opacity: 0.03) |
| Perfectly even gradients | Radial gradients, noise overlays, or mesh gradients instead of linear 45deg |
| Inconsistent lighting direction | Audit all shadows for a single consistent light source |
| Random dark section in light page | Either commit to full dark mode or use a slightly darker shade of the same background |
| Text contrast too low | Body text minimum 4.5:1 ratio; use #374151 (gray-700) on white, not lighter grays |
| Too many colors competing | Reduce to one primary + one accent + neutral grays. Consistency beats variety. |
4. Layout & Spacing Audit
| Problem | Fix |
|---|---|
| No max-width container | Add constraint (1200–1440px) with mx-auto |
| Uniform border-radius on everything | Vary radius: tighter on inner elements, softer on outer containers |
| No overlap or depth | Use negative margins for layering and visual depth |
| Symmetrical vertical padding | Adjust optically — bottom padding often needs to be slightly larger |
| Dashboard always has left sidebar | Consider top nav, floating command menu, or collapsible panel |
| Dense layout without breathing room | Double the spacing. Let the design breathe. |
| Cards of equal height forced by flexbox | Allow variable heights or use masonry when content varies |
| Content stretches edge-to-edge on wide screens | Constrain with max-w-7xl mx-auto or similar |
| Arbitrary spacing values (13px, 17px) | Use consistent scale: 4, 8, 16, 24, 32, 48, 64px |
5. Interactive States Audit (Non-Negotiable)
Every interactive element must have ALL of these states. Missing states make a UI feel unfinished.
| State | What to check |
|---|---|
| Default | Clear affordance that the element is interactive |
| Hover | Background shift, slight scale, or translate. Not just color change. Gate behind @media (hover: hover) |
| Active/Pressed | scale(0.98) or translateY(1px) to simulate physical click |
| Focus | Visible focus ring for keyboard navigation (never outline: none without replacement) |
| Loading | Skeleton loaders matching layout shape, not generic spinners |
| Empty | Designed "getting started" view, not blank screen |
| Error | Clear inline error messages, not alert(). Explain what went wrong and how to fix it. |
| Disabled | Visually muted with cursor: not-allowed. Prefer keeping buttons enabled + validation on submit |
| Current/Active (nav) | Active nav link styled differently so users know where they are |
Transitions for state changes
- All hover/focus/active transitions: 150–250ms with
ease-out - Never instant state changes without interpolation
- Animations on
top/left/width/height→ switch totransform+opacity - Add
scroll-behavior: smoothfor anchor links (no jump-scrolling)
6. Responsive & Technical Audit
| Problem | Fix |
|---|---|
| No mobile consideration | Every layout must collapse gracefully below 768px |
h-screen for full sections | min-h-[100dvh] to prevent iOS Safari jumping |
| Hover-only interactions | Ensure touch equivalents exist |
No prefers-reduced-motion respect | Wrap animations in @media (prefers-reduced-motion: no-preference) |
| Images without lazy loading | Add loading="lazy" to below-fold images |
| No alt text on images | Add descriptive alt text; decorative images get alt="" |
| Animations using layout properties | Only animate transform and opacity |
backdrop-blur on scrolling content | Only apply to fixed/sticky elements |
7. Fix Priority Order
Apply fixes in this order — each step builds on the previous one:
| Priority | Action | Impact |
|---|---|---|
| 1 | Font swap | Biggest instant improvement, lowest risk |
| 2 | Color palette cleanup | Remove clashing/oversaturated colors, establish gray family |
| 3 | Hover and active states | Makes the interface feel alive and responsive |
| 4 | Layout and spacing | Proper grid, max-width, consistent padding scale |
| 5 | Replace generic components | Swap cliche patterns (3-col cards, circular spinners) |
| 6 | Add missing states | Loading, empty, error states make it feel finished |
| 7 | Typography polish | Letter-spacing, weight variation, text-wrap: balance |
8. Pre-Output Checklist
Before delivering the redesigned code, verify:
- No banned fonts, colors, layouts, or components from Section 1 remain
- Typography uses at least 3 font weights (400, 500/600, 700)
- Color palette has one accent, consistent gray family, no oversaturation
- Spacing follows a consistent scale (4/8/16/24/32/48/64)
- All interactive elements have hover + active + focus states
- Layout has a max-width container — nothing stretches infinitely
-
min-h-[100dvh]instead ofh-screenfor full-height sections - CSS Grid instead of flexbox percentage math for multi-column layouts
- All transitions use
ease-out, 150–250ms, ontransform/opacityonly -
@media (hover: hover)gates hover animations - Loading, empty, and error states exist
- Text contrast meets WCAG AA (4.5:1 for body, 3:1 for large text)
- The overall impression reads as intentionally designed, not AI-generated
Review Format
When presenting audit findings, use a Before/After/Why table:
| Before | After | Why |
|---|---|---|
| Inter font everywhere | Geist for UI, Fraunces for headings | Inter is the #1 AI font fingerprint |
| Purple gradient hero | Warm white bg + single teal accent | Purple gradient = instant AI detection |
| 3 equal-column cards | Asymmetric bento grid | Equal columns = most generic layout pattern |
| No hover states | scale(1.02) + shadow shift on hover | Interface must feel alive |
box-shadow: 0 4px 6px rgba(0,0,0,0.1) | box-shadow: 0 4px 12px rgba(15,23,42,0.08) | Tinted shadows feel more natural |
Attribution
This skill synthesizes design audit principles from the Taste Skill (Leonxlnx), Impeccable.style, and the Redesign Skill community approaches for upgrading AI-generated UIs to premium quality.
