Redesign Skill

Preserve explicit user choices, brand rules, accessibility constraints, and working product behavior. Treat the audit below as diagnostic prompts; apply a change only when the observed interface shows the problem.

How This Works

When applied to an existing project, follow this sequence:

1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. Diagnose — Inspect the rendered interface against the brief. Report usability, hierarchy, consistency, or accessibility problems with evidence. A familiar font, layout, or component is not a defect by itself.
3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.

Design Audit

Distinguish functional/accessibility defects from aesthetic options. For the latter, name the observed mismatch with the brief before changing anything; keep an established choice that works. The examples below are alternatives, not requirements to replace conventional patterns. Do not add imagery, texture, motion, dependencies, or new product scope merely to satisfy a checklist.

Typography

Check for these problems and fix the ones supported by the interface: