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 one extraction 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.

features

Everything designlang ships.

Twenty-six capabilities. One CLI. No paid tier, no API keys, no signup. Plug into Tailwind, shadcn, Figma, your iOS app, your build pipeline, or your editor — same run.

extractors

Extractors.

Nine extractors run against any URL — they read what your browser actually sees.

9 items

palette

All colours from computed styles, deduped, named, with primary inferred from frequency × position × contrast.

typography

Font families, weights, sizes, line-heights, letter-spacing — flagged primitive, semantic, or composite.

spacing

Margin / padding / gap rhythm, snapped to a base scale and quantised to the nearest token.

shadows

Box-shadows captured layer-by-layer with offset, blur, spread, alpha — emit as DTCG composite tokens.

borders

Radius scale, border styles and widths — recovered from real DOM, not guessed from a class name.

motion

Transitions and keyframe animations: durations, easing curves, stagger.

anatomy

Components clustered by structural similarity. Slots, props and variants typed.

voice

Headline, subhead and CTA samples lifted from the page — your real product voice, not Lorem.

a11y

WCAG contrast audit with the smallest hue-shift remediation that passes AA.

emitters

Emitters.

One run, every output. Pipe wherever your stack lives.

11 items

DTCG

W3C Design Tokens Community Group format. Primitive · semantic · composite, fully linked.

Tailwind

Drop-in tailwind.config.js with theme.extend wired to the extracted tokens.

CSS vars

:root { --color-primary: … } — copy-paste into any project.

Figma

Figma Variables JSON. Imports clean into Figma's native variables panel.

shadcn/ui

shadcn theme.json with colours, radii and font-family already mapped.

React/Vue

Theme objects for React, Vue and Svelte that read like you wrote them by hand.

iOS

SwiftUI Color, Font and CGFloat scales. Builds straight into Xcode.

Android

Jetpack Compose ColorScheme, Typography, Shapes — no manual translation.

Flutter

Dart ThemeData with light + dark generated from the extracted pair.

WordPress

A block theme.json with palette, type, spacing — drop in any wp-content/themes folder.

PDF

A 13-chapter brand book PDF with chapter breaks, running footers, optional embedded tokens.

agent surface

Agent surface.

Built for the editor, not just the terminal.

6 items

MCP server

Stdio MCP for Claude Code, Cursor and Windsurf. Your editor speaks tokens natively.

AGENTS.md

Auto-generated AGENTS.md / .cursorrules / Claude skills with the extracted system embedded.

DESIGN.md

Single-file, 8-section spec — agent-readable, repo-checkable, badge-verifiable.

Studio

Local browser studio. Inspect every token, every spec, every emitter output.

CI drift

Snapshots tokens. Fails the build when your design system silently drifts.

Permalinks

Every extraction gets a /x/<hash> permalink. Share without re-running.

One command.

Every output above lands in ./design-extract-output in seconds.

Try it live