Browse the docs

Skills: Craft and build

/crisp-redesign

Modernise a UI without breaking what works.

Specialist extensionsuser-invoked

Redesign without regression, meaning without breaking anything that already works. /crisp-redesign first decides the mode: preserve the existing brand, or overhaul it. Getting this wrong is the biggest single cause of bad redesigns. It then audits the current state before changing anything: brand tokens, information architecture (how content is organised), SEO baseline, accessibility strengths, and analytics tracking.

Changes are made through six levers in strict order, starting with typography and ending with full block replacement. The redesign is not finished until its /crisp-review grade beats the starting grade and everything marked as protected is confirmed intact.

Use it when the request says modernise, refresh, or upgrade:

  • An established site needs a visual refresh without losing brand recognition
  • You have inherited a site with real search rankings and analytics history to protect
  • A rebrand changes the visual style, but content, page structure, and URLs must survive
  • A previous quick refresh quietly broke tracking or rankings, and it must not happen again
  • Decision: preserve or overhaul
  • Changes ordered by the six levers
  • Audit of the current state
  • Checks that SEO, analytics, and accessibility do not regress
Claude Code: /crisp-redesign
mode detected: preserve3 levers
LEVERHierarchy: cut 18 nav items to 6 primary plus an overflow menu
LEVERDensity: tighten vertical spacing to one 8px scale
✓Guarded: canonical URLs, GA events, focus order

Illustrative example only. This is not a real audit.

These need explicit approval in any mode. If the redesign would benefit from changing one, it is raised as a question with the trade-off explained. It is never slipped into the changes:

  • URL structure and route slugs
  • Primary navigation labels
  • Form field names and order (changing them breaks analytics and browser autofill)
  • Brand logo or wordmark
  • Legal, consent, and cookie text
How does it decide preserve versus overhaul?

From the wording of the request and the state of the brand. "Modernise" or "refresh" with an established brand means preserve. "Rebrand" or "start fresh visually" means overhaul. If it is unclear, it asks one question rather than guessing.

Will it break my SEO?

Protecting SEO is a core goal of the skill. Before any change, the audit records ranking pages, meta titles, structured data, and social sharing cards. The final checks confirm all of it is intact before the redesign counts as done.

What are the six levers?

Typography, spacing and rhythm, colour adjustment, motion, hero redesign, and full block replacement. Each is cheaper and safer than the one after it. The skill stops at the first lever that meets the brief. Using lever six when lever one would do is treated as a risk of doing too much.

What if the surface genuinely needs a ground-up rebuild?

Then the mode is greenfield (building from scratch) and this skill hands over to /feature-design. Redesign without regression only applies when there is something worth protecting.

zsh
$ npx skills add @laith-wallace/crisp

Installs all fourteen CRISP skills and detects which AI coding tool you use. Run /crisp-teach once per project, before the other skills.

(The CRISP letter)

Design evaluation, in writing.

Occasional emails on getting AI agents to produce work worth shipping. New skills are announced here first. No noise.