# Design System Extractor

> Use to extract reusable design-system rules from an existing site, app, screenshot set, Figma file, brand pack, or repo.

- Skill: `frankxai/design-system-extractor` (Agent Skill)
- Install (CLI): `npx skillmds@latest add frankxai/design-system-extractor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/frankxai/design-system-extractor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: frankxai (https://skillmd.com/u/frankxai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/frankxai/design-system-extractor

---


# Design System Extractor

Use this skill to turn scattered design evidence into reusable rules.

## Extract

- Foundations: color, typography, spacing, radius, shadow, grid, density.
- Components: buttons, cards, forms, tables, navigation, modals, charts.
- Content: heading style, body copy, labels, empty states, CTAs.
- Motion: transitions, easing, duration, entry/exit, reduced-motion.
- Brand: motifs, imagery, icon style, product-specific rules.

## Output

Return: detected system, missing tokens, component patterns, motion rules, inconsistencies, and implementation recommendations.