Redesign Existing Projects

Redesign Skill & UI Audit

Overview

A systematic redesign and auditing protocol designed to elevate existing websites, dashboards, and web applications to world-class agency quality. It diagnoses and eradicates generic AI design fingerprints, sloppy typography, inconsistent palettes, and absent interaction states without breaking business logic or underlying component contracts.

When to Use

• When auditing an existing UI codebase for design quality, responsiveness, or accessibility.
• When modernizing a legacy application or uplifting generic templates.
• When tasked to "redesign", "clean up the layout", "audit UI", or "make it look expensive and modern".

Rules & Patterns

1. Workflow: Scan → Diagnose → Fix

1. Scan: Read the codebase. Identify the framework, styling method (Tailwind v3/v4, vanilla CSS, CSS Modules), and established design tokens.
2. Diagnose: Run through the design audit categories. Catalog generic patterns, missing states, and optical alignment flaws.
3. Fix: Apply surgical, targeted upgrades working within the existing stack. Do not rewrite from scratch.

2. Design Audit Categories

Typography

• Replace Browser Defaults: Swap generic Inter, Roboto, or system fonts with expressive typefaces (Geist, Outfit, Cabinet Grotesk, Satoshi).
• Presence & Scale: Increase display text size, tighten letter-spacing (-0.02em to -0.04em), reduce line-height on headlines.
• Reading Comfort: Limit body text to 65 characters per line (max-w-prose), increase line-height to 1.6.
• Figures: Enable tabular figures (font-variant-numeric: tabular-nums) for numbers in tables and data readouts.
• Orphan Prevention: Apply text-wrap: balance on headlines and text-wrap: pretty on paragraphs.

Color and Surfaces

• No Pure Black Backgrounds: Replace #000000 with tinted dark charcoal (#0A0A0A, #121212).
• Desaturate Accents: Keep accent saturation below 80% so it blends harmoniously with neutrals.
• Single Accent Color: Commit to one dominant accent hue; remove conflicting secondary tints.
• Tinted Shadows: Tint shadows to match the background hue rather than harsh black opacity.
• Background Depth: Prevent sterile flat sections by layering subtle noise overlays, ambient gradients, or masked imagery.

Layout and Space

• Asymmetry & Bento Grids: Break repetitive 3-column Bootstrap grids with asymmetrical spans or offset cards.
• Mobile Viewport Bug Fix: Never use height: 100vh; always use min-height: 100dvh.
• Vertical Alignment: Pin action buttons to the bottom of card groups (mt-auto or grid alignment) to maintain horizontal baseline harmony across differing text heights.
• Optical Centering: Adjust icons, badges, and play buttons optically by 1-2px rather than relying solely on pure mathematical centering.

Interactivity and States

• Interactive Feedback: Add 200-300ms transitions, distinct hover shifts, and physical active presses (scale(0.98)).
• Visible Focus Rings: Mandatory :focus-visible styling for keyboard navigation.
• States Completeness: Always provide designed skeleton loaders, empty states, and inline error messages.

Content & Code Quality

• Eradicate AI Clichés: Remove buzzwords ("Elevate", "Seamless", "Unleash", "Next-Gen") and placeholder latin text.
• Semantic HTML: Replace nested div containers with <nav>, <main>, <article>, <section>, <aside>.
• Relative Units: Use rem, %, and CSS Grid rather than hardcoded pixel widths.

3. Fix Priority

1. Font Swap: Biggest instant aesthetic elevation with lowest regression risk.
2. Palette Cleanup: Eliminate clashing or oversaturated colors.
3. States & Feedback: Add hover, active, focus, loading, and empty states.
4. Layout & Alignment: Fix container widths, baseline alignment, and mobile viewport heights.
5. Component Polish: Replace generic cards and accordion boxes with modern minimal equivalents.

Code Examples

// [BEFORE] Generic, misaligned card with generic shadow
<div className="bg-white border rounded shadow p-4">
  <h2>{title}</h2>
  <p>{desc}</p>
  <button className="bg-blue-500 text-white p-2">Click</button>
</div>

// [AFTER] Polished card with optical baseline alignment, tinted surface, and micro-interaction
<div className="flex flex-col bg-[#FFFFFF] dark:bg-[#121212] border border-black/5 dark:border-white/10 rounded-2xl p-6 hover:shadow-[0_4px_20px_rgba(0,0,0,0.04)] transition-all duration-200">
  <h3 className="font-semibold text-lg tracking-tight text-neutral-900 dark:text-neutral-100 text-balance mb-2">
    {title}
  </h3>
  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed text-pretty mb-6">
    {desc}
  </p>
  <button 
    type="button" 
    className="mt-auto inline-flex items-center justify-center font-medium text-sm px-4 py-2.5 rounded-xl bg-neutral-900 dark:bg-neutral-100 text-white dark:text-black hover:bg-neutral-800 active:scale-[0.98] transition-transform duration-150 focus-visible:ring-2 focus-visible:ring-neutral-400"
  >
    Continue
  </button>
</div>

Validation Checklist

• All headings have text-wrap: balance and appropriate negative letter tracking.
• No pure black #000000 backgrounds or oversaturated accent colors (>80% saturation).
• All interactive elements include :hover, :active, and :focus-visible styles.
• Cards in side-by-side grids align primary CTA buttons along the same bottom baseline.
• Viewport containers use 100dvh instead of 100vh.
• All lists, tables, and feeds have a designed empty state.

Common Mistakes

• Rewriting components from scratch and breaking existing prop contracts or unit tests.
• Forcing full-width sections without max-w constraints on ultra-wide screens.
• Leaving action buttons at random heights inside differing text content cards.
• Introducing external UI libraries without checking existing package.json dependencies.

Integration Notes

• Complements impeccable-design for hard 50-rule QA verification.
• Works alongside ui-ux-pro for token generation and color theory.