redesign-existing-projects

Follow a scan-diagnose-fix sequence: read the codebase to identify the framework and styling method, audit for generic patterns, then apply targeted upgrades. Test after every change and keep improvements small and reviewable rather than rewriting from scratch.

Start with the highest-impact, lowest-risk fixes: swap default fonts like Inter for distinctive options, clean up oversaturated colors and AI gradients, add hover and active states, then restructure generic layouts like three equal card columns.

Yes, it works with Tailwind, vanilla CSS, styled-components, and other styling methods. Before modifying Tailwind configuration, check whether the project uses v3 or v4, since config formats differ between versions.

Common fingerprints include purple-blue gradients, Inter font everywhere, three equal card columns, pure black backgrounds, Lucide icons, pill-shaped badges, and copy cliches like "Elevate" or "Seamless". The audit checklist covers each category with specific replacements.

Avoid this approach when the project needs a full framework migration or a complete rebrand with new information architecture. The skill deliberately works within the existing stack and forbids rewrites, so structural overhauls require a different process.