What problem does it solve? When starting design work that must match an existing visual language, manually hunting down colors, fonts, spacing, and shadow values across codebases and brand documents is slow and error-prone. This Skill extracts those design tokens directly from the source and outputs a structured token file so subsequent designs stay consistent. ## Core Features & Use Cases - Multi-source token extraction: Reads theme files (theme.ts, tokens.css, _variables.scss, tailwind.config.js), brand guidelines, live sites, or screenshots to capture real values without guessing. - Categorized token coverage: Extracts colors (brand, semantic, neutrals, surfaces), typography (families, sizes, weights, line heights), spacing scales, border radii, shadows, and optional tokens like z-index, animation, and breakpoints. - Structured output and findings report: Generates a tokens.css (or tokens.ts/tokens.json/Tailwind config) file plus a summary of gaps, inconsistencies, and recommended next steps. - Use Case: Point it at an existing codebase and receive a complete tokens.css with documented inconsistencies such as near-duplicate blues or mismatched neutral grays. ## Quick Start Ask the AI to extract design tokens from your project's theme files and generate a tokens.css file with a findings report. Note: This Skill is deprecated as of v5.0; the maintainers recommend Style Dictionary or Figma Variables exports for token extraction going forward.
