Scraping design systems with a headless browser and a checklist
A CLI that points Playwright at any URL and emits Tailwind configs, Figma variables, shadcn themes, and even graded report cards.

What it does
designlang is a Node CLI built on Playwright that loads a site, pokes the DOM, and dumps a complete design-system snapshot to disk. One command spits out 17+ files: DTCG tokens, Tailwind config, shadcn/ui CSS, Figma variables, typed React component stubs, motion tokens, brand-voice JSON, and paste-ready prompts for v0 / Cursor / Claude Artifacts. It can also crawl authenticated pages, watch for drift, diff staging against production, and serve the whole extraction over an MCP stdio server for agent tools like Claude Code.
The interesting bit
The tool doesn’t just steal colors and fonts—it reverse-engineers layout patterns, responsive breakpoints, interaction states (it literally hovers and focuses elements programmatically), and even a “motion feel” fingerprint. The pair command fuses two sites into one hybrid design system, and remix restyles a page in brutalist or cyberpunk vocabularies. There’s a live badge endpoint so you can shame or praise any site’s design score in a README.
Key highlights
- Multi-platform emitters: iOS SwiftUI, Android Compose, Flutter, WordPress block themes, plus web.
- CI-ready governance:
drift,lint, andvisual-diffcommands exit non-zero on failure. - Accessibility built-in: WCAG 2.1 contrast scoring with auto-generated remediation palettes.
- MCP server mode: Exposes tokens, components, and contrast pairs to any MCP-aware agent.
- Chrome extension: One-click extraction from the current tab (MV3,
activeTabpermission).
Caveats
- The README is long on feature lists and short on architecture or test coverage details.
- Requires Node 20+ and a headless browser—expect nontrivial install weight and CI setup.
- Some commands (
clonegenerates a Next.js starter,applyauto-detects frameworks) make big promises; how well they handle real-world complexity isn’t demonstrated in the docs.
Verdict Worth a look if you’re building design ops, maintaining a component library, or feeding LLMs structured design context. Skip it if you just need a one-off color palette—there are lighter tools for that.