web-design-system-extract

To extract design tokens from a live website, this skill uses Playwright to collect computed styles, CSS data, and font requests across desktop, tablet, and mobile breakpoints, then clusters visual primitives into finite color, typography, and spacing scales.

Yes, you can capture interaction states by recording hover, focus, active, and disabled state diffs, producing a component-by-state matrix alongside evidence-backed design tokens for accurate implementation.

Yes, Playwright is a required dependency for analyzing responsive design rules, as it drives multi-breakpoint screenshots and probes computed styles across desktop, tablet, and mobile viewports.

The best way to reverse engineer a website's styling system is to log network font requests and @font-face rules per breakpoint, detect frameworks via evidence, and cluster computed styles into semantic design tokens.

You can generate a Tailwind config from existing CSS by extracting computed styles and clustering them into design tokens, which outputs as minimal implementation artifacts including a tailwind.config.js and tokens.ts file.

Limitations when extracting a design system include relying on Playwright for dynamic state capture, meaning sites requiring complex authentication or blocking automated browsers may not yield complete computed styles or interaction diffs.