# designlang

> Open-source CLI that reverse-engineers any live website's design system into tokens, framework themes, and brand books.

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.

## Features
- Extracts palette, typography, spacing, shadows, borders and motion from live DOM
- W3C DTCG tokens with primitive, semantic and composite layers
- Tailwind, CSS variables, Figma variables and shadcn/ui theme output
- iOS SwiftUI, Android Compose, Flutter and WordPress emitters
- 13-chapter brand-book PDF generation
- Stdio MCP server for Claude Code, Cursor and Windsurf
- Auto-generated AGENTS.md, .cursorrules and Claude skills
- WCAG contrast audit with remediation
- CSS health audit
- Semantic region classification and component clustering
- Dark mode extraction and authenticated page crawling
- Hover, focus and active interaction state capture
- Drift, lint and visual-diff commands for CI
- Design grading, battle, remix, theme-swap and pair commands
- Clone fidelity scoring and design DNA comparison
- Whole-site crawl with consistency grade

## Integrations
Claude Code, Cursor, Windsurf, Figma, Tailwind CSS, shadcn/ui, Playwright, VS Code, Raycast, GitHub Actions, Chrome, Atlas Cloud

## Platforms
WINDOWS, MACOS, LINUX, ANDROID, IOS, WEB, API, BROWSER_EXTENSION, VSC_EXTENSION, CLI

## Pricing
Open Source

## Version
v13.3.2

## Links
- Website: https://www.designlang.app
- Documentation: https://www.designlang.app/features
- Repository: https://github.com/Manavarya09/design-extract
- EveryDev.ai: https://www.everydev.ai/tools/designlang