Design System Extractor

Scan a frontend repository, discover where design tokens are defined, extract the actual values in use, and synthesize them into a single human-readable DESIGN-SYSTEM.md reference covering typography, color, spacing/layout, transitions, elevation, and component styles.

This skill works on any frontend stack. It auto-detects token sources rather than assuming a framework: Tailwind config, CSS custom properties, SCSS/LESS variables, CSS-in-JS themes (styled-components, emotion, vanilla-extract, stitches), design-token JSON, and global stylesheets / font declarations.

Thinking Process

When activated, follow this structured thinking approach.

Step 1: Locate the Repo Root and Frontend Surface

Goal: Establish the boundary of what you are documenting before scanning.