design-token-extractor

You can extract design tokens from SCSS and JavaScript by running this Skill to parse code files and identify hardcoded values. It audits token coverage across your stylesheets and scripts, isolating raw values and converting them into structured categories for your design system.

The best way to audit hardcoded values in a design system is to use an automated extraction tool that scans your codebase for raw values and identifies gaps in token usage. This process detects un-tokenized styling rules and categorizes them for standardization.

Yes, you can format extracted design tokens as Style Dictionary JSON. This Skill outputs categorized tokens in multiple formats including Style Dictionary JSON, CSS custom properties, and Tailwind config files, ensuring seamless integration with your existing design pipeline.

Yes, the design token extraction process works directly with Tailwind config files. It parses your configuration to identify existing design tokens, categorizes them by type, and can output the standardized tokens back into a valid Tailwind config format.

Identifying and categorizing design tokens during a design system migration is crucial for maintaining visual consistency. This process organizes raw styling values into structured categories like color and typography, auditing coverage to ensure all design elements are systematically tokenized and documented.