extract_styles
Extract design tokens from CSS and SCSS files. Reverse-engineer colors, spacing, and typography from existing stylesheets to create structured tokens.
Instructions
Extract design tokens from CSS and SCSS files. Reverse-engineers colors, spacing, typography from stylesheets. Use when project has styles but no design tokens. Scans for CSS custom properties (--var: value) and SCSS variables ($var: value).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| stylePaths | No | Override config stylePaths. Default: src/**/*.{css,scss}, styles/**/*.{css,scss} | |
| outputFormat | No | Output format (default: w3c-design-tokens) | |
| writeToTokens | No | Write extracted tokens to tokenPaths directory (default: false) |