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.
1---2name: design-system-extractor3description: Use to extract reusable design-system rules from an existing site, app, screenshot set, Figma file, brand pack, or repo.4---56# Design System Extractor78Use this skill to turn scattered design evidence into reusable rules.910## Extract1112- Foundations: color, typography, spacing, radius, shadow, grid, density.13- Components: buttons, cards, forms, tables, navigation, modals, charts.14- Content: heading style, body copy, labels, empty states, CTAs.15- Motion: transitions, easing, duration, entry/exit, reduced-motion.16- Brand: motifs, imagery, icon style, product-specific rules.1718## Output1920Return: detected system, missing tokens, component patterns, motion rules, inconsistencies, and implementation recommendations.
frankxai