designlang is an open-source CLI that crawls any live website with a headless browser and emits its complete design system: W3C DTCG tokens (primitive, semantic, composite), Tailwind config, CSS variables, Figma variables, shadcn/ui theme, plus native emitters for iOS SwiftUI, Android Jetpack Compose, Flutter and WordPress, and a print-ready brand-book PDF. It runs locally and ships an MCP server so Claude Code, Cursor and Windsurf can read live extractions as native tools.

How do I install designlang?

Run `npx designlang ` — no install, no account, no API key. The package is on npm as `designlang` and requires Node.js 20 or later. The full source is on GitHub at github.com/Manavarya09/design-extract under the MIT licence.

How is designlang different from Style Dictionary, Tokens Studio, Subframe, v0 and Builder.io?

Those tools take a Figma file or hand-authored tokens as input. designlang takes a live URL. It reads what your browser actually computes — colours, spacing, typography, motion, shadows, anatomy — directly from the rendered DOM. It outputs strict W3C DTCG with proper primitive / semantic / composite layering, runs a CSS health audit, performs WCAG remediation, and ships multi-platform emitters from one run.

Does designlang work with Claude Code, Cursor and Windsurf?

Yes. designlang ships a stdio MCP server (`designlang mcp`) that exposes extracted tokens, semantic regions, component clusters, CSS health and accessibility remediation as MCP resources and tools. The CLI also auto-generates `.cursor/rules/designlang.mdc`, `.claude/skills/designlang/SKILL.md`, `CLAUDE.md` fragments and `AGENTS.md` so any AI coding agent can read the system natively.

Is designlang free and open source?

Yes. designlang is MIT-licensed and fully open source on GitHub. The CLI is free with no signup. The hosted demo at designlang.app is rate-limited to two extractions per IP per day; the CLI is unlimited.

What output formats does designlang support?

W3C DTCG JSON, Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI extensions, Android Compose Theme.kt + colors.xml, Flutter ThemeData, WordPress block theme (theme.json + style.css), agent rules (AGENTS.md, .cursorrules, Claude skills, MCP), motion tokens, typed component anatomy stubs, a brand voice/CTA pack, and a print-ready brand-book PDF with chapter bookmarks and an embedded tokens attachment.

Can I generate a brand-book PDF for any URL?

Yes. `npx designlang brand --pdf` produces a 13-chapter brand-guidelines PDF with chapter page breaks, a running footer, an extracted-primary cover band, and (with `--attach-tokens`) the DTCG tokens JSON embedded as a PDF file attachment.

Does designlang extract motion, hover states and interaction design?

Yes. With the `--interactions` flag designlang captures hover, focus and active states for buttons, links and inputs, and reads all CSS transitions, easing functions and `@keyframes` animations into a motion-tokens DTCG file.

CLI reference

Every command and flag in the designlang CLI, generated from the source.

Generated from the CLI source for version 13.3.2. Run npx designlang --help or npx designlang <command> --help for the same text in your terminal.

Extract a site

`designlang <url>`

Extract the complete design language from any website

designlang <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL)
`-w, --width <px>`	`1280`	viewport width
`--height <px>`	`800`	viewport height
`--wait <ms>`	`0`	wait after page load (ms)
`--dark`		also extract dark mode styles
`--depth <n>`	`0`	number of internal pages to also crawl
`--screenshots`		capture component screenshots
`--framework <type>`		generate framework theme (react, shadcn, vue, svelte)
`--responsive`		capture design at multiple breakpoints
`--interactions`		capture hover/focus/active states
`--deep-interact`		auto-interact pass: scroll, open menus/modals/accordions, hover CTAs (implies --interactions)
`--motion-runtime`		capture motion at runtime via document.getAnimations() — real durations, choreography/stagger, scroll recipes (Motion v3)
`--full`		enable all extra captures (screenshots, responsive, interactions, deep-interact)
`--cookie <cookies...>`		cookies for authenticated pages (name=value)
`--cookie-file <path>`		load cookies from JSON, Playwright storageState, or Netscape cookies.txt
`--header <headers...>`		custom headers (name:value)
`--user-agent <ua>`		override the browser User-Agent string
`--insecure`		ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
`--ignore <selectors...>`		CSS selectors to remove before extraction
`--ignore-widgets`		Also ignore a curated list of third-party widgets (Intercom, Drift, HubSpot chat, cookie banners, reCAPTCHA, etc.) See `designlang widgets`.
`--storybook`		Emit a runnable Storybook project (stories/, .storybook/, package.json) alongside the extraction
`--no-consent`		do not try to dismiss cookie/consent banners before extracting
`--no-states`		skip the hover/focus state probe (saves ~0.5s)
`--lazy`		scroll the page once before reading styles so lazy-rendered sections exist (can raise the element count past the 5000 cap on huge pages)
`--selector <css>`		only extract design from elements matching this CSS selector (e.g. ".pricing-card")
`--system-chrome`		use the system Chrome install instead of the bundled Chromium (skips the 150MB Playwright download)
`--tokens-legacy`		Emit pre-v7 flat token JSON (backward compat)
`--platforms <csv>`	`web`	Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)
`--emit-agent-rules`		Emit Cursor/Claude Code/generic agent rules
`--smart`		use optional LLM fallback when heuristic classifiers have low confidence (supports ATLASCLOUD_API_KEY, OPENAI_API_KEY, or ANTHROPIC_API_KEY)
`--pages <n>`		crawl N canonical pages (pricing/docs/blog/about/product) in addition to the homepage
`--no-prompts`		skip writing the prompt-pack directory
`--no-design-md`		skip writing the agent-native DESIGN.md (single-file, 8-section, YAML front matter)
`--responsive-shots`		capture full-page PNGs at 4 breakpoints × (light,dark)
`--responsive-deep`		run the extraction at mobile 390, tablet 834 and desktop 1440 with device emulation: per-width tokens, what changes between them, screenshots, DTCG modes and a Tailwind responsive config
`--interaction-capture`		safely open menus, modals, tabs, accordions and tooltips, record hover/focus/active/disabled styles, and record scroll animations as WebM plus Framer Motion and CSS @keyframes
`--perf`		measure Core Web Vitals + bundle profile (LCP/CLS/INP, JS/CSS/font/img bytes, third-party count)
`--palette <n>`		compress the extracted palette to N perceptually distinct colours via LAB-space k-means (default: emit every unique colour)
`--pdf`		also render a print-ready brand-book PDF (chapter bookmarks, running footer, embedded tokens)
`--paper <size>`	`a4`	PDF paper size when --pdf is set: a4 \| letter \| tabloid
`--landscape`		PDF landscape orientation when --pdf is set
`--json`		output raw JSON to stdout (for CI/CD)
`--json-pretty`		output formatted JSON to stdout
`--no-history`		skip saving to history
`--verbose`		show detailed progress
`-q, --quiet`		suppress output except file paths

Other commands

`designlang diff`

Compare design languages of two websites

designlang diff <urlA> <urlB> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-diff-output`	output directory

`designlang history`

View design history for a website

designlang history <url>

No options.

`designlang brands`

Compare design languages across multiple brands

designlang brands <urls...> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-brands-output`	output directory
`-q, --quiet`		suppress output except file paths

`designlang sync`

Sync local design tokens with a live website

designlang sync <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`.`	directory with token files to update

`designlang clone`

Generate a working Next.js starter from a site's design

designlang clone <url> [options]

Option	Default	What it does
`-o, --out <dir>`		output directory (default: ./cloned-design)
`--fidelity`		after generating, measure token-fidelity vs the live site and write FIDELITY.md + a correction plan into the clone
`--system-chrome`		use the system Chrome install instead of bundled Chromium

`designlang site`

Crawl a whole site and synthesize one canonical design system across all pages

designlang site <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`--max-pages <n>`	`6`	max pages to crawl, including the homepage
`--name <name>`		output filename prefix

`designlang watch`

Monitor a site for design changes

designlang watch <url> [options]

Option	Default	What it does
`--interval <minutes>`	`60`	check interval in minutes

`designlang score`

Score a website's design system quality

designlang score <url>

No options.

`designlang stats`

Print a concise one-screen summary to stdout — grade, primary, fonts, spacing, voice. Accepts multiple URLs. No files written.

designlang stats <urls...> [options]

Option	Default	What it does
`-j, --as-json`		emit machine-readable JSON to stdout instead of pretty text (an array when multiple URLs)

`designlang grade`

Generate a shareable Design Report Card (HTML + JSON + Markdown)

designlang grade <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL)
`--format <fmt>`	`all`	output format: html, md, json, svg, all
`--badge`		also emit *-badge.svg (shields.io-style) — implies adding svg to format
`--open`		open the HTML report in the default browser

`designlang battle`

Generate a head-to-head graded battle card (HTML + JSON + Markdown)

designlang battle <urlA> <urlB> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: a-vs-b)
`--format <fmt>`	`all`	output format: html, md, json, all
`--open`		open the battle card in the default browser

`designlang remix`

Restyle a site in a different design vocabulary (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial)

designlang remix <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL)
`--as <vocab>`	`brutalist`	vocabulary id (run `designlang remix --list` to see all)
`--list`		list all vocabularies and exit
`--all`		emit one HTML per vocabulary (six files at once)
`--open`		open the result in the default browser

`designlang pack`

Bundle every output (tokens, components, storybook, prompts, starter) into a single design-system directory

designlang pack <url> [options]

Option	Default	What it does
`-o, --out <dir>`		output directory (default: ./<host>-design-system)
`--with-clone`		include the full Next.js clone as the starter (slower; otherwise emits a minimal HTML starter)
`--open`		open the starter index.html in the default browser

`designlang theme-swap`

Recolour the extracted design around a new brand primary (preserves type, spacing, neutrals)

designlang theme-swap <url> [options]

Option	Default	What it does
`--primary <hex>`		target primary colour as hex (e.g. "#ff4800") Required.
`--from <hex>`		override the auto-detected source primary (e.g. when the extractor misclassifies)
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL + target hex)
`--format <fmt>`	`all`	output format: html, md, json, tokens, all
`--open`		open the HTML preview in the default browser

`designlang rebuild`

Rebuild the site as a 3-tier token system (primitives, semantics, components) with a WCAG-checked dark mode. Deterministic, no AI

designlang rebuild [url] [options]

Option	Default	What it does
`--from <file>`		use a saved snapshot or extraction JSON instead of fetching a URL
`-o, --out <dir>`	`./design-system-rebuild`	output directory
`--brand <hex>`		set the brand colour instead of the extracted one
`--hue <deg>`		rotate the brand ramp to this hue (0-360)
`--curve <n>`		lightness curve exponent, 0.6-1.8 (default 1)
`--chroma <n>`		chroma multiplier, 0.2-1.6 (default 1)
`--contrast <ratio>`		text contrast target, 3-7 (default 4.5, WCAG AA)
`--neutral-tint <n>`		how much of the brand hue the greys carry, 0-3 (default 1)
`--json`		print the system as JSON to stdout and write nothing

`designlang brand`

Generate a full brand-guidelines book — colour, type, spacing, motion, voice, components, accessibility, tokens, and how-to-use guidance

designlang brand <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL)
`--format <fmt>`	`all`	output format: html, md, json, all
`--open`		open the HTML book in the default browser
`--pdf`		also emit a print-ready PDF brand guide (chapter bookmarks, running page numbers)
`--paper <size>`	`a4`	PDF paper size: a4 \| letter \| tabloid
`--landscape`		PDF landscape orientation
`--no-print-background`		strip the brand-colour cover band from the PDF (smaller file)
`--attach-tokens`		embed the DTCG tokens JSON as a PDF file attachment
`-q, --quiet`		suppress output except file paths

`designlang pair`

Fuse two extracted designs across axes (colours/typography/spacing/shape/motion/voice/components)

designlang pair <urlA> <urlB> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: <hostA>-x-<hostB>)
`--colors-from <a\|b>`		pull colours from A or B (default: a)
`--typography-from <a\|b>`		pull typography from A or B (default: b)
`--spacing-from <a\|b>`		pull spacing from A or B (default: a)
`--shape-from <a\|b>`		pull shape (radii + shadows) from A or B (default: a)
`--motion-from <a\|b>`		pull motion from A or B (default: a)
`--voice-from <a\|b>`		pull voice from A or B (default: b)
`--components-from <a\|b>`		pull component anatomy from A or B (default: b)
`--brand`		also emit a full brand-guidelines book of the fused identity
`--format <fmt>`	`all`	output format: html, md, json, all
`--open`		open the HTML pair card in the default browser
`-q, --quiet`		suppress output except file paths

`designlang apply`

Extract and apply design directly to your project

designlang apply <url> [options]

Option	Default	What it does
`-d, --dir <path>`	`.`	project directory
`--framework <type>`		force framework (tailwind, shadcn, css)
`--cookie <cookies...>`		cookies for authenticated pages
`--header <headers...>`		custom headers

`designlang export`

Export raw design data in various formats

designlang export <url> [options]

Option	Default	What it does
`-f, --format <type>`	`json`	output format (json, csv)
`--pretty`		pretty-print output

`designlang lint`

Audit a local token file (.json / .css) for color sprawl, scale drift, contrast fails

designlang lint <file> [options]

Option	Default	What it does
`--json`		emit machine-readable JSON

`designlang robustness`

Colour-vision simulation, WCAG 2.2 checks (target size, focus, contrast) and the 320px reflow check. The full stress matrix is in designlang Cloud Pro.

designlang robustness <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`--json`		print the full result as JSON on stdout
`-q, --quiet`		suppress output except the result file path
`--strict`		exit 1 when any check fails (for CI)
`--system-chrome`		use the system Chrome install instead of the bundled Chromium

`designlang check`

Lint code for hardcoded or off-palette colours, spacing, radii and fonts; suggests the nearest token

designlang check [paths...] [options]

Option	Default	What it does
`--tokens <file>`		design system: designlang tokens .json, a snapshot, or a CSS variables file
`--context <url>`		fetch the system from a Brand Context Server project (key in DESIGNLANG_KEY)
`--key <key>`		context key (prefer the DESIGNLANG_KEY env var)
`--tolerance <dE>`		colour distance that still counts as a near miss
`--allow <hex...>`		hex colours that are always allowed
`--no-contrast`		skip the AA contrast check
`--fix`		write the safe fixes (exact and near matches) to the files
`--fix-all`		also write low-confidence fixes
`--diff`		print the fixes as a unified diff instead of writing
`--format <format>`		text \| json \| markdown \| github
`--annotations <kind>`		github: emit workflow annotations
`--fail-on <level>`	`error`	error \| warn \| none

`designlang debt`

Score design debt for a URL, stylesheet, folder or glob: token coverage, near-duplicate values, !important hotspots, unused variables, and a ranked consolidation plan

designlang debt <targets...> [options]

Option	Default	What it does
`--format <format>`		text \| json \| markdown (default text)
`--json`		shorthand for --format json
`--delta-e <n>`		OKLab distance under which two colours count as near-duplicates
`--fail-under <score>`		exit 1 when the score is below this (0-100)

`designlang drift`

Compare local tokens against a live site and report drift (CI-friendly)

designlang drift <url> [options]

Option	Default	What it does
`--tokens <file>`		local tokens file (.json or .css) Required.
`--tolerance <n>`	`8`	color distance tolerance (0-50)
`--fail-on <level>`	`notable-drift`	exit non-zero on: minor-drift \| notable-drift \| major-drift
`--json`		emit machine-readable JSON

`designlang visual-diff`

Side-by-side HTML diff of two URLs with screenshots + token changes

designlang visual-diff <before> <after> [options]

Option	Default	What it does
`-o, --out <dir>`		output directory (default: ./design-extract-output)

`designlang verify`

Rebuild components from the extracted tokens and pixel-diff them against the live page — a 0-100 fidelity score + loss heatmaps.

designlang verify <url> [options]

Option	Default	What it does
`-o, --out <dir>`		output directory (default: ./design-extract-output)
`-c, --components <list>`	`button,card`	comma-separated components to check (button,card,input,nav)
`--min <score>`		exit non-zero if site fidelity is below this (CI gate)
`--system-chrome`		use the system Chrome install instead of bundled Chromium

`designlang fidelity`

Measure how faithfully a clone reproduces a site — pixel-diff + motion-fidelity → one 0-100 score, letter grade, ranked correction plan, and a shareable card.

designlang fidelity <original> [options]

Option	Default	What it does
`--clone <url>`		URL of the clone to score against the original (e.g. http://localhost:3000) Required.
`-o, --out <dir>`		output directory
`--min <score>`		exit non-zero if overall fidelity is below this (CI gate)
`--motion-runtime`		capture runtime motion (real durations + choreography) on both sides
`--system-chrome`		use the system Chrome install instead of bundled Chromium

`designlang gallery`

Build a static, shareable gallery from fidelity reports — an index of score cards plus a permalink page (with OG card) per clone.

designlang gallery [dir] [options]

Option	Default	What it does
`-o, --out <dir>`		output directory for the generated site
`--title <title>`	`Fidelity Gallery`	gallery title
`--base-url <url>`		absolute base URL for OG image links (e.g. https://gallery.example.com)

`designlang chat`

Interactive REPL over an extraction. <target> is either a URL or a path to an existing *-design-tokens.json file.

designlang chat <target> [options]

Option	Default	What it does
`-o, --out <dir>`	`./chat-output`	output directory for `save`

`designlang replay`

Record a short WebM clip of a site's motion (scroll + hover). Optional MP4 if ffmpeg is on PATH.

designlang replay <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`	`motion-replay`	output file prefix
`-d, --duration <s>`	`5`	duration in seconds (2-15)
`-w, --width <px>`	`1280`	viewport width
`--height <px>`	`800`	viewport height
`--mp4`		also emit an MP4 (requires ffmpeg on PATH)

`designlang widgets`

Print the curated widget-ignore selector list used by --ignore-widgets

designlang widgets

No options.

`designlang ci`

One-shot design regression report — drift + score + PR-ready markdown. Works in any CI.

designlang ci <url> [options]

Option	Default	What it does
`--tokens <file>`		local tokens file (.json or .css) to compare against the live site
`--baseline <url>`		baseline URL for a before/after visual diff
`--tolerance <n>`	`8`	color distance tolerance (0-50)
`--fail-on <level>`	`notable-drift`	exit non-zero on: minor-drift \| notable-drift \| major-drift
`-o, --out <dir>`	`.designlang-ci`	output directory
`-q, --quiet`		suppress stdout (still writes files)

`designlang studio`

Launch a live design studio over the latest extraction — edit tokens, watch components restyle, export DTCG/CSS/Tailwind, share via URL.

designlang studio [options]

Option	Default	What it does
`-d, --dir <path>`	`./design-extract-output`	extraction directory
`-p, --port <n>`	`4837`	port
`--prefix <name>`		extraction prefix (default: newest *-design-tokens.json)
`--no-open`		do not auto-open the browser

`designlang doctor`

Print a one-screen health check of the local designlang install

designlang doctor

No options.

`designlang dna`

Place a design in the measured design space — nearest systems, per-axis percentiles, outliers

designlang dna <url> [options]

Option	Default	What it does
`-o, --out <dir>`	`./design-extract-output`	output directory
`-n, --name <name>`		output file prefix (default: derived from URL)
`--corpus <file>`		corpus to rank against (default: the one shipped with designlang)

`designlang dna-corpus`

Extract several sites and write the corpus that `designlang dna` ranks against

designlang dna-corpus <urls...> [options]

Option	Default	What it does
`-o, --out <file>`		corpus file to write (default: the one shipped with designlang)
`--name <name>`	`default`	corpus name recorded in the file

`designlang fonts`

Identify the web fonts a page loads: host, file format, name table family, version and foundry

designlang fonts <url> [options]

Option	Default	What it does
`--json`		emit machine-readable JSON
`-q, --quiet`		print nothing but the result

`designlang mcp`

Launch designlang MCP server over stdio (exposes latest extraction as resources + tools)

designlang mcp [options]

Option	Default	What it does
`--output-dir <path>`	`./design-extract-output`	Source extraction directory

`designlang install-browser`

Download the Chromium build designlang drives (no longer done at npm install)

designlang install-browser [options]

Option	Default	What it does
`--with-deps`		also install the system libraries Chromium needs (Linux CI)