designlang

designlang is an MIT-licensed command-line tool by Manav Arya Singh that points a headless Chromium browser at a live URL and reads the design system off the rendered DOM. A single run emits W3C DTCG tokens, Tailwind and CSS variable files, Figma variables, native theme code, and a brand-book PDF. It also ships a stdio MCP server for AI coding editors.

What It Is

designlang is a design-extraction CLI. Instead of starting from a Figma file or hand-authored tokens, it takes a URL, drives a real browser, and reads computed styles for colours, typography, spacing, shadows, borders, motion, and component structure. It runs locally via npx designlang <url> and requires Node.js 20 or later, with no account or API key needed.

Outputs and Formats

Outputs include DTCG tokens (primitive, semantic, composite layers), a Tailwind config, CSS custom properties, Figma Variables JSON, a shadcn/ui theme, and React, Vue and Svelte theme objects. Native emitters produce iOS SwiftUI, Android Jetpack Compose, Flutter ThemeData, and a WordPress block theme. It can also generate a 13-chapter brand-guidelines PDF, typed component anatomy stubs, a brand voice file, and paste-ready prompt packs for tools like v0, Lovable, Cursor and Claude Artifacts.

Analysis and Audits

Beyond extraction, it performs a WCAG contrast audit with nearest-passing colour remediation, a CSS health audit (specificity, dead rules, duplicates, keyframes), semantic region classification, and component clustering with variant detection. Optional flags capture hover, focus and active states, responsive breakpoints, runtime motion, dark mode, and authenticated pages. Further commands cover design grading, head-to-head battles, remixing in other visual vocabularies, theme swapping, whole-site crawling, clone fidelity scoring, and a design DNA comparison against a corpus.

Editor and Agent Integration

designlang mcp starts a stdio MCP server exposing tokens, colours, typography, components, findings, drift computation and exports to Claude Code, Cursor and Windsurf. The CLI can also write AGENTS.md, .cursorrules and Claude skills into a repository, and the repo ships a Claude Code plugin with slash commands. Drift checks and linting are designed for CI, exiting non-zero on failure.