What problem does it solve? Reverse-engineering a website's visual style by hand is slow and error-prone. This Skill automates the extraction of design primitives like colors, fonts, spacing, radii, and shadows from a public website and turns them into starter token files for your project. ## Core Features & Use Cases - Automated Token Extraction: Runs a Playwright-based CLI against a public URL to capture colors, fonts, spacing, radius, and shadow scales into raw and normalized JSON artifacts. - Starter File Generation: Produces design-system/tokens.json and design-system/tokens.css so you can bootstrap a design system without starting from scratch. - Regeneration Mode: Reuses an existing .extract-design-system/normalized.json to regenerate starter files without re-crawling the site. - Use Case: You are starting a new client project and want to match the look of their existing marketing site. Point the Skill at the public URL, review the normalized tokens, and generate starter CSS variables to seed your theme. ## Quick Start Ask the assistant to extract the design system from a public website URL and generate starter token files for the project.
