Design Extract

Design Extract (published as designlang) points a headless Chromium browser, driven by Playwright, at a URL and reads the design system off the live DOM. A single run emits more than 17 files: W3C Design Tokens Community Group (DTCG) tokens in primitive, semantic, and composite layers, a Tailwind config, CSS variables, a shadcn/ui theme, Figma variables, React, Vue, and Svelte themes, motion tokens, typed component anatomy, the brand voice taken from real headlines and calls to action, and a prompt pack for v0, Lovable, Cursor, and Claude Artifacts.

Beyond colors and type, it captures layout patterns, responsive behavior across four breakpoints, hover, focus, and active states, WCAG contrast scores with the smallest hue shift that passes AA, and paired light and dark tokens. A CSS health audit reports specificity problems, dead rules, and duplicates. Optional platform emitters add iOS SwiftUI, Android Jetpack Compose, Flutter, and a WordPress block theme, and a brand-book command produces a 13-chapter PDF.

Other commands work across sites and over time. The site command crawls a site's canonical pages and elects each token by how many pages use it, with a 0–100 consistency grade. The fidelity command scores a clone against the original on pixel diffs and motion, returning a ranked correction plan, and the dna command places a design among a corpus of measured systems using 30 deterministic features. A drift check fails CI when the live system moves away from a token snapshot.

For AI coding agents, the CLI ships a stdio Model Context Protocol (MCP) server that exposes tokens, regions, components, and contrast pairs, a Claude Code plugin with slash commands, a skill for Cursor, Codex, and other agents, and generated agent rule files. An optional smart mode routes low-confidence classification to OpenAI, Anthropic, or an OpenAI-compatible endpoint. A Figma plugin and a Chrome extension offer the same extraction from those tools.