extract-design-system

name	extract-design-system
description	Use when: extract tokens, components, and patterns from an existing codebase into a documented system.

Goal: recover the implicit design system already in the code.

Use for:

• inconsistent UI grown without a defined system
• documenting tokens and patterns for reuse
• preparing a refactor toward shared components

Workflow:

1. Inventory colors, spacing, type, radius, and shadow values in use.
2. Cluster near-duplicates into canonical tokens.
3. Identify repeated component shapes (buttons, cards, inputs).
4. Note variant axes: size, intent, and state.
5. Document the tokens and components with usage rules.
6. Flag outliers to reconcile and propose the migration order.

Capture:

• token tables with names and values
• component catalog with variants
• spacing and type scales
• inconsistencies and one-offs to resolve

Rules:

• derive tokens from real usage, not invention
• collapse accidental near-duplicates deliberately
• keep names semantic so intent survives refactors
• record outliers instead of silently normalizing them