| 1 | --- |
| 2 | name: redesign-existing-projects |
| 3 | description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. |
| 4 | --- |
| 5 | |
| 6 | # Redesign Skill |
| 7 | |
| 8 | ## How This Works |
| 9 | |
| 10 | When applied to an existing project, follow this sequence: |
| 11 | |
| 12 | 1. **Scan** - Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns. |
| 13 | 2. **Diagnose** - Run through the audit below. List every generic pattern, weak point, and missing state you find. |
| 14 | 3. **Fix** - Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there. |
| 15 | |
| 16 | ## Design Audit |
| 17 | |
| 18 | ### Typography |
| 19 | |
| 20 | Check for these problems and fix them: |
| 21 | |
| 22 | - **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: |
| 23 | - **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional. |
| 24 | - **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability. |
| 25 | - **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy. |
| 26 | - **Numbers in proportional font.** Use a monospace font or enable tabular figures ( |
| 27 | - **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels. |
| 28 | - **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead. |
| 29 | - **Orphaned words.** Single words sitting alone on the last line. Fix with |
| 30 | |
| 31 | ### Color and Surfaces |
| 32 | |
| 33 | - **Pure `#000000 |
| 34 | - **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming. |
| 35 | - **More than one accent color.** Pick one. Remove the rest. Consistency beats variety. |
| 36 | - **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both). |
| 37 | - **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent. |
| 38 | - **Generic `box-shadow |
| 39 | - **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile. |
| 40 | - **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades. |
| 41 | - **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source. |
| 42 | - **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette - not a sudden jump to |
| 43 | - **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like |
| 44 | |
| 45 | ### Layout |
| 46 | |
| 47 | - **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content. |
| 48 | - **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout. |
| 49 | - **Using `height: 100vh |
| 50 | - **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures. |
| 51 | - **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens. |
| 52 | - **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length. |
| 53 | - **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers. |
| 54 | - **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth. |
| 55 | - **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically - bottom padding often needs to be slightly larger. |
| 56 | - **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead. |
| 57 | - **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages. |
| 58 | - **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above. |
| 59 | - **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks. |
| 60 | - **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken. |
| 61 | - **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right. |
| 62 | |
| 63 | ### Interactivity and States |
| 64 | |
| 65 | - **No hover states on buttons.** Add background shift, slight scale, or translate on hover. |
| 66 | - **No active/pressed feedback.** Add a subtle |
| 67 | - **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements. |
| 68 | - **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional. |
| 69 | - **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape. |
| 70 | - **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view. |
| 71 | - **No error states.** Add clear, inline error messages for forms. Do not use |
| 72 | - **Dead links.** Buttons that link to |
| 73 | - **No indication of current page in navigation.** Style the active nav link differently so users know where they are. |
| 74 | - **Scroll jumping.** Anchor clicks jump instantly. Add |
| 75 | - **Animations using `top |
| 76 | |
| 77 | ### Content |
| 78 | |
| 79 | - **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names. |
| 80 | - **Fake round numbers like `99.99% |
| 81 | - **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names. |
| 82 | - **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language. |
| 83 | - **Exclamation marks in success messages.** Remove them. Be confident, not loud. |
| 84 | - **"Oops!" error messages.** Be direct: "Connection failed. Please try again." |
| 85 | - **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made." |
| 86 | - **All blog post dates identical.** Randomize dates to appear real. |
| 87 | - **Same avatar image for multiple users.** Use unique assets for every distinct person. |
| 88 | - **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy. |
| 89 | - **Title Case On Every Header.** Use sentence case instead. |
| 90 | |
| 91 | ### Component Patterns |
| 92 | |
| 93 | - **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy. |
| 94 | - **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise. |
| 95 | - **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels. |
| 96 | - **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure. |
| 97 | - **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote. |
| 98 | - **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height. |
| 99 | - **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions. |
| 100 | - **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look. |
| 101 | - **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings. |
| 102 | - **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links. |
| 103 | |
| 104 | ### Iconography |
| 105 | |
| 106 | - **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation. |
| 107 | - **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault). |
| 108 | - **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight. |
| 109 | - **Missing favicon.** Always include a branded favicon. |
| 110 | - **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery. |
| 111 | |
| 112 | ### Code Quality |
| 113 | |
| 114 | - **Div soup.** Use semantic HTML: |
| 115 | - **Inline styles mixed with CSS classes.** Move all styling to the project's styling system. |
| 116 | - **Hardcoded pixel widths.** Use relative units ( |
| 117 | - **Missing alt text on images.** Describe image content for screen readers. Never leave |
| 118 | - **Arbitrary z-index values like `9999 |
| 119 | - **Commented-out dead code.** Remove all debug artifacts before shipping. |
| 120 | - **Import hallucinations.** Check that every import actually exists in |
| 121 | - **Missing meta tags.** Add proper |
| 122 | |
| 123 | ### Strategic Omissions (What AI Typically Forgets) |
| 124 | |
| 125 | - **No legal links.** Add privacy policy and terms of service links in the footer. |
| 126 | - **No "back" navigation.** Dead ends in user flows. Every page needs a way back. |
| 127 | - **No custom 404 page.** Design a helpful, branded "page not found" experience. |
| 128 | - **No form validation.** Add client-side validation for emails, required fields, and format checks. |
| 129 | - **No "skip to content" link.** Essential for keyboard users. Add a hidden skip-link. |
| 130 | - **No cookie consent.** If required by jurisdiction, add a compliant consent banner. |
| 131 | |
| 132 | ## Upgrade Techniques |
| 133 | |
| 134 | When upgrading a project, pull from these high-impact techniques to replace generic patterns: |
| 135 | |
| 136 | ### Typography Upgrades |
| 137 | - **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive. |
| 138 | - **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction. |
| 139 | - **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it. |
| 140 | |
| 141 | ### Layout Upgrades |
| 142 | - **Broken grid / asymmetry.** Elements that deliberately ignore column structure - overlapping, bleeding off-screen, or offset with calculated randomness. |
| 143 | - **Whitespace maximization.** Aggressive use of negative space to force focus on a single element. |
| 144 | - **Parallax card stacks.** Sections that stick and physically stack over each other during scroll. |
| 145 | - **Split-screen scroll.** Two halves of the screen sliding in opposite directions. |
| 146 | |
| 147 | ### Motion Upgrades |
| 148 | - **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel. |
| 149 | - **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once. |
| 150 | - **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements. |
| 151 | - **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress. |
| 152 | |
| 153 | ### Surface Upgrades |
| 154 | - **True glassmorphism.** Go beyond |
| 155 | - **Spotlight borders.** Card borders that illuminate dynamically under the cursor. |
| 156 | - **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness. |
| 157 | - **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black. |
| 158 | |
| 159 | ## Fix Priority |
| 160 | |
| 161 | Apply changes in this order for maximum visual impact with minimum risk: |
| 162 | |
| 163 | 1. **Font swap** - biggest instant improvement, lowest risk |
| 164 | 2. **Color palette cleanup** - remove clashing or oversaturated colors |
| 165 | 3. **Hover and active states** - makes the interface feel alive |
| 166 | 4. **Layout and spacing** - proper grid, max-width, consistent padding |
| 167 | 5. **Replace generic components** - swap cliche patterns for modern alternatives |
| 168 | 6. **Add loading, empty, and error states** - makes it feel finished |
| 169 | 7. **Polish typography scale and spacing** - the premium final touch |
| 170 | |
| 171 | ## Rules |
| 172 | |
| 173 | - Work with the existing tech stack. Do not migrate frameworks or styling libraries. |
| 174 | - Do not break existing functionality. Test after every change. |
| 175 | - Before importing any new library, check the project's dependency file first. |
| 176 | - If the project uses Tailwind, check the version (v3 vs v4) before modifying config. |
| 177 | - If the project has no framework, use vanilla CSS. |
| 178 | - Keep changes reviewable and focused. Small, targeted improvements over big rewrites. |