Design System Audit

Most design system problems aren't what they look like. Poor text wrapping is usually a container width problem, not a font size problem. Uneven cards come from inconsistent content structure, not missing fixed heights. Fixing symptoms makes the problem invisible — and harder to fix later. Paste this skill into Claude or ChatGPT at the start of a new chat. It runs in three modes: Audit Only (never touches code), Approval Required (proposes ranked repairs and waits), or Automatic Repair (implements justified fixes without waiting). Before anything is changed, it builds a Project Design Profile — identifying your visual identity, the patterns worth keeping, and where the real drift is coming from. Output: a ranked repair plan (Critical / Recommended / Optional polish) with root causes, evidence, and regression risk per item. Repairs are only implemented after you approve them.

1. Paste this skill into Claude or ChatGPT as your first message in a new chat.
2. The skill will ask what to inspect (entire site, a focused design area, or a specific page/component) and how to handle code changes (Audit Only, Approval Required, or Automatic Repair).
3. Answer both questions before the audit begins. A vague answer like "check this" is not enough — the skill requires explicit scope and execution mode.
4. Review the Project Design Profile before any findings. If it misreads your visual identity, correct it before proceeding.
5. In Approval Required mode, review the REPAIR PLAN and approve all, critical only, a priority group, or selected numbers.
6. Check the Implementation Record after repairs complete — it lists what changed, what was validated, and what remains unresolved.

From a Targeted Area audit on a SaaS pricing page (Approval Required mode):

◇ DESIGN SYSTEM AUDIT
Scope: Targeted — Pricing Page · Execution: Approval Required

PROJECT DESIGN PROFILE (excerpt):
Framework: Next.js / Tailwind
Strong identity signals: Dark background, high-contrast ivory text, sharp radius on CTAs
Likely drift: Three near-identical card variants with different padding and border-radius values
Protected elements: Brand colour tokens, CTA button shape

REPAIR PLAN

Critical
Repair 1: Card padding inconsistency
Problem: Three tier cards use 24px, 20px, and 32px internal padding with no structural reason.
Root cause: Each card was built independently with no shared component.
Proposed fix: Extract to one shared TierCard component with a single padding token.
Risk / confidence: Low regression risk · High confidence (3 instances confirmed)

Recommended
Repair 2: Missing focus-visible states on tier CTAs
Problem: Tab navigation skips the tier CTA buttons on narrow viewports.
Proposed fix: Add focus-visible ring using existing brand accent token.
Risk / confidence: Low regression risk · High confidence

Next step — what should I do?
Fix all / Fix critical only / Fix a priority group / Fix selected numbers / Keep audit only