Extracts comprehensive design tokens and component styles from live websites using automated browser inspection.
This skill automates the process of reverse-engineering a website's visual identity by launching a headless browser and analyzing computed CSS styles in real-time. It captures foundational elements like typography, color palettes, and spacing scales, as well as complex component styles such as buttons and shadows. The resulting structured design tokens provide a ready-to-use inventory for developers and designers looking to migrate platforms, replicate visual styles, or document undocumented design systems.
Características Principales
012 GitHub stars
02Comprehensive capture of typography, color palettes, and spacing scales
03Layout and grid system analysis including container widths and breakpoints
04Intelligent button variant detection and full visual profile mapping
05Automated CSS computed style extraction via Puppeteer headless browser
06Web font detection with Google Fonts and Adobe Typekit integration
Casos de Uso
01Migrating an existing legacy website to a modern component-based framework
02Generating a standardized design token set from a brand's live production site
03Performing competitive design audits to understand layout patterns and color usage
