designlang (design-extract) 🔌 MCP server Open source

What it does

design-extract, published as designlang, reads a design system off any live website by pointing a headless browser at the URL and inspecting the rendered DOM. One run emits more than seventeen files, including W3C DTCG tokens (primitive, semantic, and composite layers), a Tailwind config, a shadcn theme, Figma variables, motion tokens, typed component anatomy, and brand-voice notes. It goes past colors to layout systems, responsive behaviour across breakpoints, hover and focus states, WCAG contrast scoring, multi-page consistency, and clone-fidelity grading against a live source of truth.

Tools it gives your agent

Run as an MCP server, it exposes extract_design(url), which returns a job id you poll with get_job_status, then get_tokens, get_colors, get_typography, get_components, get_findings, compute_drift against a baseline job, and export to DTCG, Tailwind, shadcn, Figma, CSS, or a design-language Markdown file. The same engine also ships as a CLI with commands like extract, site, fidelity, grade, and drift, and as a Claude Code plugin wrapping those as slash commands.

Works with

Any MCP-aware coding agent. The README documents Claude Code, Cursor, and Windsurf directly, and the skill install path lists compatibility with dozens of agents.

How to install

claude mcp add designlang -- npx -y designlang mcp

Maintenance and safety

MIT licensed and actively developed. The tool drives a headless Chromium against whatever URL you give it; an optional --smart classifier and asset generation call external APIs only when you supply keys, and base token extraction is deterministic and needs no key. It reads public pages, or authenticated ones if you pass cookies.

Who should use it

Frontend developers and design engineers who want to capture, audit, or replicate a site's design system as structured tokens and let a coding agent build against them. It suits teams cloning a reference site, enforcing token drift checks in CI, or handing an agent a precise design contract instead of a screenshot.