What is the designlang MCP server?
designlang is a CLI in the design-extract repository that points a headless browser at a URL and reads the design system off the live DOM. Its MCP server, started with designlang mcp, gives an agent tools for tokens, colors, typography, components, drift and exports to DTCG, Tailwind, shadcn and Figma.
The designlang MCP server is the designlang mcp command of the designlang CLI, which lives in the Manavarya09/design-extract repository. It is a stdio server that extracts the design system of a live page in a real browser and returns structured results to your agent.
Extraction runs as a job. extract_design returns a job id immediately, you poll get_job_status, and then you pass that id to the tools that return tokens, colors, typography, components, findings, drift or an export.
What changes in your agent's output
- The agent reads computed values from a reference site, so a palette or type scale comes from the page itself instead of a guess from a screenshot.
- Tokens arrive as W3C DTCG with primitive and semantic tiers, so they map to variables and aliases rather than loose hex codes.
exportrenders a finished job as dtcg, tailwind, shadcn, figma, css or design-md.compute_driftcompares two jobs, for example production against a preview deploy, and reports what changed in colors, type, spacing, accessibility and components.
Tools that read a saved extraction
Start the server with --output-dir <dir> and it also serves an extraction already on disk as resources: primitive tokens, semantic tokens, semantic regions, component clusters and CSS health. Extra tools then search tokens and list failing contrast pairs.
Who the designlang MCP server is for
Best for
- Matching a new build to the look of an existing site you own or have permission to analyze.
- Turning a live design into Tailwind, shadcn or Figma variable output without rebuilding the tokens by hand.
- Teams that want an agent to check a preview deploy against production before merge.
Not for
- Reading a Figma file. For that, use the Figma MCP server or Framelink Figma MCP.
- Pulling tokens from a site you have no right to analyze. The extraction is a headless browser visit, so check the site's terms first.
- Browsing a component catalog. The shadcn MCP server covers registries.
Use it with UiChemy
designlang gives an agent the tokens of a design. If the goal is a WordPress site, UiChemy turns an AI build or a Figma design into editable Elementor or Gutenberg pages, and Composer edits the result visually. Click Get Started on uichemy.com.
Connect designlang MCP Server: Design Tokens From Any Live URL to your AI client
claude mcp add designlang -- npx -y designlang mcpInstall the browser once
designlang drives Chromium through Playwright. Run
npx designlang install-browseronce. Without it the tool falls back to an installed Google Chrome. Node 20 or later is required.Add the server
Run
claude mcp add designlang -- npx -y designlang mcpfor Claude Code. For Cursor or Claude Desktop, paste the config above into the client's MCP config file.Optional: serve a saved extraction
Add
--output-dir <dir>to the args to expose an extraction already on disk as resources and extra token tools.Ask for a site
Try a prompt such as extracting the design system of a URL, then exporting the tokens as Tailwind.
Client configuration
{
"mcpServers": {
"designlang": {
"command": "npx",
"args": ["-y", "designlang", "mcp", "--output-dir", "./design-extract-output"]
}
}
}Endpoints and ports
designlang mcpstdio server, started with npx -y designlang mcp--output-dir <dir>Also serves an extraction on disk as resourcesdesignlang install-browserOne-time download of the Chromium that matches Playwrighthttps://github.com/Manavarya09/design-extract/blob/main/docs/MCP-REGISTRY.mdRegistry listing notes and client snippetsWhat you can do with it
- Reads the live pageA real headless browser loads the URL and reads computed styles from the DOM, so the output reflects what the page renders.
- DTCG tokens in two tiersPrimitive tokens hold raw values and semantic tokens hold aliases such as action and surface roles.
- Six export formatsdtcg, tailwind, shadcn, figma, css and design-md come from one finished job.
- Drift between two jobsCompare production with a preview deploy before a release and see which tokens moved.
- Contrast and lint findingsFindings cover color sprawl, scale consistency and a WCAG contrast summary for the extracted pairs.
- Disk-backed resourcesWith
--output-dir, a saved extraction is served as resources for regions, component clusters and CSS health. - Wider CLI around itThe same project ships site-wide crawling, grading and a clone command, so the MCP server is one entry point among several.
Tools it exposes
extract_design
Extracts the design system of a live URL in a real browser and returns a job id. Options include viewport width and height, a dark scheme pass and an extra wait for slow pages.
get_job_status
Returns running, done, failed or cancelled. A finished job includes a short summary with the primary color, font families and counts.
list_jobs
Lists all extraction jobs in the current session.
cancel_job
Cancels a running extraction and discards its result.
get_tokens
Returns W3C DTCG design tokens, primitive and semantic tiers, for a finished job.
get_colors
Returns primary, secondary and accent colors, backgrounds, text colors and the full palette with usage.
get_typography
Returns font families, the type scale, weights and line heights.
get_components
Returns buttons, inputs, cards and links with their variants.
get_findings
Returns token lint results such as color sprawl and scale consistency, plus a WCAG contrast summary.
compute_drift
Compares two finished jobs and reports what changed in colors, typography, spacing, accessibility and components.
export
Renders a finished job as dtcg, tailwind, shadcn, figma, css or design-md.
Frequently asked questions
What is the designlang MCP server?
It is the designlang mcp command from the design-extract repository. It starts a stdio MCP server that extracts a live site's design system in headless Chromium and exposes the tokens, colors, typography, components, findings and exports as tools your AI agent can call.
How do I install the designlang MCP server?
Run npx designlang install-browser once, then add the server with claude mcp add designlang -- npx -y designlang mcp. For other clients, add an mcpServers entry that runs npx with the arguments -y, designlang and mcp. Node 20 or later is needed.
Which AI agents work with designlang MCP?
The README names Cursor, Claude Code and Windsurf as MCP clients, and the repo includes a snippet for Claude Desktop. Any client that can launch a stdio MCP server through a command should be able to run it. The repo also ships a Claude Code plugin.
What can I export from a finished extraction?
The export tool accepts dtcg, tailwind, shadcn, figma, css and design-md. Use dtcg for Style Dictionary style pipelines, tailwind or shadcn for a React front end, and design-md to give an agent a written design brief.
Is designlang free and what license does it use?
The design-extract repository uses the MIT license, as GitHub shows. The CLI and MCP server run locally. The README also mentions an optional smart classification mode that uses an OpenAI-compatible provider, which is separate from the core extraction.
How does designlang MCP differ from the Figma MCP server?
The Figma server reads a design file that someone drew. designlang reads a website that already ships, from its rendered DOM. Use Figma MCP when the source of truth is a Figma file, and designlang when it is a live page.
Can I use designlang output for a WordPress site?
The tokens are framework-neutral, and the project also lists a WordPress block theme among its multi-platform outputs. For converting a full design into editable Elementor or Gutenberg pages, a tool built for that job such as UiChemy fits the next step.