designlang MCP Server

Content

designlang is an MCP server and CLI for extracting design systems from live websites. It can expose design tokens, semantic regions, components, contrast pairs, Tailwind themes, Figma variables, prompt packs, screenshots, and design reports to Claude-compatible MCP clients.

The upstream README documents designlang mcp as the stdio MCP server command. The package metadata exposes the designlang binary, and the MCP registry docs show the npx -y designlang mcp configuration.

Source Review

• https://github.com/Manavarya09/design-extract
• https://github.com/Manavarya09/design-extract/blob/main/README.md
• https://github.com/Manavarya09/design-extract/blob/main/package.json
• https://github.com/Manavarya09/design-extract/blob/main/SECURITY.md
• https://github.com/Manavarya09/design-extract/blob/main/docs/MCP-REGISTRY.md
• https://registry.npmjs.org/designlang

These sources were reviewed on 2026-06-05. Prefer the live repository, README, package metadata, security policy, MCP registry notes, and NPM registry metadata for current command names, Node requirements, extraction behavior, supported outputs, and safety guidance.

Features

• Extract colors, typography, spacing, shadows, radii, CSS variables, breakpoints, animations, and components.
• Emit W3C DTCG design tokens, Tailwind config, shadcn theme variables, CSS variables, and Figma variable data.
• Inspect responsive behavior, hover/focus/active interaction states, semantic page regions, component anatomy, and motion tokens.
• Score WCAG contrast and generate remediation guidance.
• Produce design reports, prompt packs, screenshots, clone starters, and platform-specific outputs.
• Run drift, lint, visual-diff, sync, grade, battle, remix, pack, theme-swap, and brand-book workflows from the CLI.
• Expose extracted design data through a stdio MCP server for Claude Code, Cursor, Windsurf, and other MCP clients.

Installation

For MCP clients that launch stdio servers:

{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["-y", "designlang", "mcp"]
    }
  }
}

Optionally add --output-dir to keep generated files in a specific directory:

{
  "mcpServers": {
    "designlang": {
      "command": "npx",
      "args": ["-y", "designlang", "mcp", "--output-dir", "./design-extract-output"]
    }
  }
}

Restart the MCP client after adding the server.

Use Cases

• Ask Claude to extract design tokens from a public website before building a matching UI.
• Generate Tailwind, shadcn, CSS variable, or Figma variable handoff files.
• Compare two sites and explain design differences.
• Review WCAG contrast findings and remediation suggestions.
• Capture component anatomy, responsive behavior, motion patterns, and brand voice.
• Create prompt packs for frontend generation workflows.

Safety and Privacy

designlang crawls live pages with Playwright and can write detailed outputs. Treat extraction results as a copy of website content and design intelligence, especially when using authenticated pages, private staging sites, cookie files, custom headers, or internal URLs.

Review output directories before sharing or committing generated files. Screenshots, tokens, prompts, Figma variables, Tailwind configs, reports, and clone starters may reveal proprietary design systems, unpublished pages, analytics identifiers, or user-visible data from the crawled page.

Duplicate Check

No Manavarya09/design-extract entry, designlang package entry, or matching source URL was found in content/mcp.

• Source repositorygithub.com 2026-07-21T05:19:43+00:00
• Documentationgithub.com
• Submitted by oktofeesh12026-06-05