Designlang points a headless browser at any URL and reads the design system off the live DOM. One run writes more than 17 files: W3C DTCG tokens in primitive, semantic, and composite layers, a Tailwind config, a shadcn/ui theme, Figma variables, CSS custom properties, motion tokens, typed React component anatomy, extracted brand voice, page-intent and region labels, and prompt packs for downstream generators.
It goes past colour and type into structure: layout patterns and container widths, responsive behaviour across four breakpoints, hover, focus, and active state deltas, runtime motion read from document.getAnimations(), WCAG contrast scoring with a nearest-passing remediation palette, CSS health checks, and a stack fingerprint.
Several commands build on the base extraction. site crawls a site's canonical pages into one de-duplicated system in which each token is elected by the share of pages using it, separating site-wide choices from page-local ones and merging near-identical colours in OKLab. fidelity compares an original and a clone on full-page pixel diff and on motion -- feel, durations, easings, springs, and stagger -- returning a 0-100 score, a letter grade, and a ranked correction plan. dna reduces a design to 30 deterministic features across colour, type, space, shape, and motion and ranks it against a corpus, reporting nearest neighbours, per-axis percentiles, and outlier features; a feature the page never exposed stays null rather than taking a substituted midpoint, and a corpus built under different rules is rejected instead of compared. Others cover remixing into alternative vocabularies, fusing two designs, a 13-chapter brand book, OKLCH recolouring around a new primary, a Next.js starter, drift and lint checks for CI, and a live token editor.
The same extraction is reachable from several surfaces: the command line, a stdio MCP server exposing tokens, regions, components, and contrast pairs, a Claude Code plugin whose slash commands wrap the CLI, an agent skill for Cursor, Codex, and other coding agents, VS Code, Raycast, Figma, and Chrome extensions, and a GitHub Action that diffs tokens on each pull request. Optional --smart classification routes low-confidence cases to an OpenAI-compatible chat endpoint.
Extraction crawls with Playwright-driven headless Chromium, waits for network idle and fonts, then walks up to 5,000 DOM elements in one page evaluation, collecting 25 or more computed properties plus inline SVGs, font sources, and image metadata before 17 extractor modules process it and 12 or more emitters write the files. It runs on Node 20 or later.
Features
- DTCG tokens: primitive, semantic, and composite layers, fully linked, named from the live DOM
- Multi-platform output: Tailwind, CSS variables, shadcn, Figma variables, React, Vue, and Svelte themes, plus iOS SwiftUI, Android Compose, Flutter, and a WordPress block theme
- Structure extraction: layout grids and containers, responsive mapping, interaction-state deltas, and component anatomy as typed TSX
- Runtime motion: durations, easing families, spring detection, stagger, and scroll recipes captured from a driven page
- Whole-site systems: canonical pages crawled into one system with per-token coverage and a grade
- Clone fidelity: visual and motion comparison into one score with a ranked correction plan, usable as a CI gate
- Design DNA: a 30-feature vector ranked against a corpus, with null for unmeasured features
- Reporting: graded report card, head-to-head comparison card, brand book, and visual diffs
- CI checks: token lint, drift against a live source of truth, and a GitHub Action that comments on pull requests
- Agent surfaces: stdio MCP server, Claude Code plugin slash commands, and an agent skill for other coding agents
- Authenticated pages: cookies in several formats, custom headers, user-agent override, and an option to ignore certificate errors
