| name | redesign-existing-projects |
| description | Upgrade existing websites and apps to premium quality by auditing current design and applying high-end standards. Use when the user wants to redesign, "make it look more professional", "upgrade the design", or remove generic AI aesthetics from an existing project. |
| metadata | {"author":"Leonxlnx"} |
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:
- Scan — understand the framework, styling approach, and existing design tokens
- Diagnose — comprehensive audit identifying weaknesses
- 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:
- Typography — biggest visual impact, safest change
- Color — replace black, desaturate accent, remove AI gradient
- Interaction states — hover, focus, loading
- Layout — fix three-column, add visual variation
- Component modernization — update cards, buttons, inputs
- 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
