Scraping the architecture, not just the paint

What it does

designlang is a Node-based CLI that points a headless browser at a URL and reads the design system off the live DOM. It spits out a dense bundle of artifacts—W3C DTCG tokens, Tailwind v4 themes, shadcn/ui CSS, Figma variables, motion tokens, and typed React component stubs—plus multi-platform emitters for iOS, Android, Flutter, and WordPress. It also grades the design with a report card, checks WCAG contrast, and can clone the aesthetic into a working Next.js starter.

The interesting bit

The tool doesn’t just harvest hex codes and font stacks; it programmatically hovers, focuses, and scrolls to capture interaction states, maps responsive behavior across four breakpoints, and infers brand voice and page intent. It also exposes an MCP server so Cursor, Claude Code, and Windsurf can query the extracted tokens and regions directly.

Key highlights

• Emits primitive, semantic, and composite DTCG token layers by default
• Can remix a site into alternate vocabularies (brutalist, cyberpunk, swiss, etc.) or fuse two sites into one hybrid design system
• Runs CI-ready drift checks, visual diffs, and linting against a live source of truth
• Includes a Chrome extension for one-click extraction from any tab
• Generates shareable HTML report cards and Shields-style SVG badges

Caveats

• The README’s CLI reference is truncated mid-sentence, so several flags are only partially documented in the repo itself.

Verdict

Worth a look if you’re building design systems, auditing competitor UX, or feeding structured tokens to an AI agent. Skip it if you already have a pristine Figma library and no interest in live-site archaeology.