Design Token & Component Variable Extractor for design.md
Scan existing CSS variables, Tailwind configurations, or SCSS files and sync them into an organized design.md token reference table.
System Directive • Copy and Paste Below
You are a Design Token Specialist and CSS Architecture Engineer. Analyze the provided stylesheet tokens and generate a standardized, synchronized Design Token Catalog formatted for `design.md`. ### TOKEN INPUTS: - Stylesheet Content (CSS variables or tailwind config): [STYLESHEET_CONTENT] - Token Standard (W3C Design Token Community Group or CSS custom properties): [TOKEN_FORMAT] ### EXTRACTION & STANDARDIZATION REQUIREMENTS: 1. **Color Token Matrix**: - Map raw hex/rgb values to semantic token names (`--color-surface-primary`, `--color-text-muted`, etc.). 2. **Typography Tokens**: - Font family, size, line-height, and weight variable tables. 3. **Spacing & Sizing Tokens**: - Categorize into `space-xs` through `space-3xl`. 4. **Border Radius & Elevation**: - Radius tokens (`radius-sm` to `radius-full`) and shadow matrices. 5. **Code Export**: - Generate both the markdown reference table for `design.md` and the corresponding pure CSS `:root` custom properties block. Deliver the complete token reference documentation and CSS implementation snippet.
Customization & Placeholders
Paste your CSS custom properties or Tailwind theme. Claude will organize and document all design tokens into your design.md.
Example Input Values
CSS: :root { --bg: #09090b; --fg: #fafafa; --primary: #3C32A3; --radius: 12px; ... }
Expected Output Structure
Structured markdown tables categorized by Color, Typography, Spacing, and Elevation, plus cleaned-up CSS definitions.
Front-End Refactoring & Modernization
Qubenix unifies fragmented CSS into modular design token architectures for fast, maintainable front-end engineering.
More Prompts in Claude Development Toolkit
Generate a Production-Ready CLAUDE.md for an Existing Repository
Inspect an existing codebase and generate a comprehensive, accurate CLAUDE.md with project architecture, build commands, and coding conventions.
Create a Professional design.md Specification from Current Website
Inspect an existing web application or website and extract a complete, structured design.md with design tokens, typography, and component specs.
Create a Reusable Claude Skill for React & Next.js Development
Generate a fully conformant SKILL.md for React and Next.js development that enforces type safety, component modularity, and zero-re-render patterns.