What problem does it solve? Manually copying hex values, font sizes, and spacing scales from design documentation into code is tedious and error-prone. This Skill converts a DESIGN.md design system document directly into structured, code-ready design tokens in the format your project uses. ## Core Features & Use Cases - Multi-format token generation: Outputs CSS custom properties, Tailwind CSS config, JS/TS theme objects (styled-components, Emotion, Chakra UI), W3C Design Tokens JSON, or SCSS variables. - Complete token extraction: Pulls colors, typography scales, spacing, shadows, border radii, and breakpoints from the corresponding DESIGN.md sections with consistent naming conventions per format. - Partial and multi-design support: Extract only specific categories (e.g., just a color palette) or generate swappable token sets from multiple design systems for theme switchers. - Use Case: Ask for Stripe's design as a Tailwind config, and receive a tailwind.config.js with Stripe's exact colors, fonts, spacing, and shadows ready to drop into your project. ## Quick Start Ask the assistant to extract Vercel's design system as CSS custom properties from its DESIGN.md file.
