redesign-existing-projects

Redesign Existing Projects

Upgrade existing websites and applications by auditing current design patterns, identifying generic AI aesthetics, and applying premium design standards while preserving all functionality.

Core Process

Three sequential steps — never skip any:

1. Scan — understand the framework, styling approach, and existing design tokens
2. Diagnose — comprehensive audit identifying weaknesses
3. Apply — targeted fixes without rewriting from scratch

Audit Areas

Typography

Common problems:

• Browser default fonts or Inter everywhere
• Headlines lack visual presence or weight
• Body text too small or too large
• No typographic hierarchy — everything looks the same size

Fixes:

• Select distinctive typeface for headings (not Inter)
• Constrain paragraph width to ~65 characters
• Add additional font weights for hierarchy
• Increase heading size contrast ratio

Color & Surface

Problems to flag:

• Pure #000000 backgrounds
• Oversaturated accent colors
• Purple/blue AI gradient aesthetic — the single most identifiable AI design fingerprint
• Inconsistent shadow tinting (mixed warm/cool shadows)
• Flat designs with zero surface texture

Fixes:

• Replace pure black with off-black (#0a0a0a, #111111)
• Desaturate accent to 60–70% saturation max
• Replace AI gradients with neutral bases + deliberate single accent
• Unify shadow tinting (warm for warm backgrounds, etc.)

Layout

Problems to flag:

• Three equal-width card columns for feature rows
• Generic hero: centered text + CTA + stock photo
• All sections same spacing and visual weight
• Fixed heights creating awkward content truncation

Fixes:

• Asymmetric grids or masonry for feature sections
• Hero with strong typographic anchor, not stock imagery
• Vary section density for visual rhythm
• Remove fixed heights; let content breathe

Interactivity & States

Critical missing elements:

• No hover effects on interactive elements
• No loading states (items appear instantly or freeze)
• No focus indicators (keyboard users see nothing)
• No empty states (just blank space)

These are not "polish" — they're required quality signals.

Content

Problems:

• Generic names: "John Doe", "Jane Smith", "Company Name"
• AI copywriting clichés: "Elevate", "Seamless", "Streamline", "Next-Generation"
• Vague CTAs: "Get Started", "Learn More"
• Stock photo humans (too perfect, generic)

Fixes:

• Use specific, believable names and companies
• Rewrite copy with concrete outcomes, not adjectives
• CTAs should say what happens next: "Start your free trial", "See the demo"

Implementation Priority

Apply in this order:

1. Typography — biggest visual impact, safest change
2. Color — replace black, desaturate accent, remove AI gradient
3. Interaction states — hover, focus, loading
4. Layout — fix three-column, add visual variation
5. Component modernization — update cards, buttons, inputs
6. State design — empty states, error states, success states

Non-Negotiable Constraints

• Preserve all existing functionality
• Respect the current technology stack (don't switch frameworks)
• Don't introduce new dependencies without flagging
• Keep accessibility intact (don't remove focus states, don't break contrast)

Pre-Output Checklist

• [ ] Scanned existing codebase before making any changes
• [ ] Purple/blue AI gradient identified and replaced
• [ ] Three-column equal feature grid eliminated
• [ ] Generic names replaced
• [ ] AI copywriting clichés removed
• [ ] Interaction states added
• [ ] Pure black replaced with off-black
• [ ] All existing functionality preserved