# Extract Design System

> Use when: extract tokens, components, and patterns from an existing codebase into a documented system.

- Skill: `kimtth/extract-design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/extract-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/extract-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/extract-design-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