# Design System Extractor

> Extracts tokens, typography, spacing, component states, assets, layout, responsive rules, and interactions from a UI reference.

- Skill: `mesteriis/design-system-extractor` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mesteriis/design-system-extractor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mesteriis/design-system-extractor/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Mesteriis (https://skillmd.com/u/mesteriis)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/mesteriis/design-system-extractor

---


# Design System Extractor

Turn a visual reference into implementable constraints.

## Workflow

1. Identify the authoritative reference: Figma, screenshot, concept, codebase,
   Storybook, or existing design system.
2. Extract color tokens, type scale, spacing, radii, borders, shadows, icons,
   assets, layout grid, and responsive behavior.
3. Map repeated elements to components and variants.
4. Record intentional deviations and unknowns.
5. Feed the result into `ui-build`, `figma-to-code`, or `playwright-visual-qa`.

## Output

- tokens
- typography
- components and variants
- layout/responsive rules
- asset inventory
- interaction states
- unresolved gaps