Redesign
Audit-first. For a site that already works but looks templated or dated, this finds what is wrong, decides what to keep, and ships a committed new identity, without throwing away working structure.
When to use
- An existing site (Webflow, WordPress, an old React app) needs to look current.
- A client hands you a live URL and wants it modernized.
- A redesign that must preserve content, SEO, and routes.
The workflow
- Audit. Run the
fluid detector on the codebase (or read the live DOM and CSS). Catalogue the generic-look tells: fonts, palette, spacing, shadows, the slop list. Note what is genuinely good and worth keeping.
- Draw the keep/change line. Preserve: content, information architecture, routes, anything that converts. Change: the identity (palette, type, surface, motion), the layout repetition, the bans.
- Generate the new identity with the
design-system skill. Brief it from the brand, pick from data/, commit. Two redesigns in the same sector get different palettes.
- Map old to new. A token migration: old hardcoded values become new CSS variables, component by component. Keep a small table so nothing is missed.
- Re-skin, do not rebuild. Keep the markup and structure, swap the look: tokens, type, motion. Add
fluid motion where it earns its place.
- Pre-flight. Run the detector again, check
design-system/reference/rules.md (locks, hero discipline, bans). Produce a before/after so the value is visible.
Rules
- Preserve what converts. A redesign that drops content or breaks routes is a rewrite, not a redesign.
- One identity, committed. Never half-redesign (new colors on old fonts).
- Show the before and after.
Pairs with: design-system (the new identity), fluid (the motion and the detector audit).
1---2name: redesign3description: Audit an existing web UI and produce a modernization plan plus a fresh design system. Use when a site or app already works but looks dated or generic and needs a proper visual audit and a redesign pass, not a rebuild from scratch. Preserves content, routes, and SEO.4license: MIT5---67# Redesign89Audit-first. For a site that already works but looks templated or dated, this finds what is wrong, decides what to keep, and ships a committed new identity, without throwing away working structure.1011## When to use12- An existing site (Webflow, WordPress, an old React app) needs to look current.13- A client hands you a live URL and wants it modernized.14- A redesign that must preserve content, SEO, and routes.1516## The workflow171. **Audit.** Run the `fluid` detector on the codebase (or read the live DOM and CSS). Catalogue the generic-look tells: fonts, palette, spacing, shadows, the slop list. Note what is genuinely good and worth keeping.182. **Draw the keep/change line.** Preserve: content, information architecture, routes, anything that converts. Change: the identity (palette, type, surface, motion), the layout repetition, the bans.193. **Generate the new identity** with the `design-system` skill. Brief it from the brand, pick from `data/`, commit. Two redesigns in the same sector get different palettes.204. **Map old to new.** A token migration: old hardcoded values become new CSS variables, component by component. Keep a small table so nothing is missed.215. **Re-skin, do not rebuild.** Keep the markup and structure, swap the look: tokens, type, motion. Add `fluid` motion where it earns its place.226. **Pre-flight.** Run the detector again, check `design-system/reference/rules.md` (locks, hero discipline, bans). Produce a before/after so the value is visible.2324## Rules25- Preserve what converts. A redesign that drops content or breaks routes is a rewrite, not a redesign.26- One identity, committed. Never half-redesign (new colors on old fonts).27- Show the before and after.2829Pairs with: `design-system` (the new identity), `fluid` (the motion and the detector audit).
Darcos-Loft