Extract Design System MCP Server: Design Tokens From Any Public Site

What is the extract-design-system MCP server?

The package is skills-first, with an installable agent skill and a bundled CLI that runs the extraction. It also ships an MCP server, extract-design-system-mcp, that exposes the same workflow as structured tool calls.

Point it at a public website and it analyzes colors, typography, spacing, border radius and shadows, then normalizes the result into starter token files for your local project.

What changes in your agent's output

• The agent starts from measured values taken from a real page, not from a guess at a brand palette.
• Output lands in predictable files: a W3C-compatible tokens JSON and a CSS file of custom properties.
• Raw and normalized data are cached, so tokens can be re-emitted without fetching the site again.
• The README says the workflow summarizes findings first and asks before changing existing app code or styles.

How the setup works

1. Add the server entry for your client. It runs npx -y extract-design-system-mcp.
2. If Chromium is missing, run npx playwright install chromium.
3. Ask the agent to extract the design system from a public URL and generate token files.

Who the extract-design-system MCP server is for

Best for

• Starting a project that should match an existing public site's spacing, radius and type scale.
• Auditing a competitor or reference site's visual primitives, next to Design Extract and Dembrandt.
• Pairing tokens with a skill such as a site cloning skill when the goal is a closer rebuild.

Not for

• Pixel-exact reproduction. The README says extraction is for initialization, not a perfect copy.
• Private or login-gated sites. It handles public websites only, and dynamic or script-heavy pages may give incomplete output.
• Full component libraries. The output is starter tokens, with no framework config patching.

Use it with UiChemy

Tokens give an agent a visual baseline in code. For a WordPress site, UiChemy builds the pages: Figma to WordPress turns a design into editable blocks, and AI to WordPress imports an existing AI build. Click Get Started on uichemy.com.

Connect Extract Design System MCP Server: Design Tokens From Any Public Site to your AI client

npx -y extract-design-system-mcp

1. Add the entry

   In Cursor, create .cursor/mcp.json in your project root with the entry above, then restart Cursor.

2. Claude Desktop

   Add the same entry to claude_desktop_config.json and also set cwd to your project path. The README says Claude Desktop does not infer a working directory, and cwd controls where the token files are written.

3. Install Chromium if needed

   Extraction uses a browser. If it fails because Chromium is missing, run npx playwright install chromium. Node.js 20 or newer is required.

4. Run an extraction

   Ask the agent to extract the design system from a public URL. Check design-system/tokens.json and design-system/tokens.css afterward.

Client configuration

{
  "mcpServers": {
    "extract-design-system": {
      "command": "npx",
      "args": ["-y", "extract-design-system-mcp"]
    }
  }
}

Endpoints and ports

What you can do with it

• Five token categoriesColors, typography, spacing, border radius and shadows are extracted from the rendered page.
• Two output filesA W3C-compatible tokens file and a CSS custom properties file are ready to drop into a project.
• Cached normalizationRaw and normalized JSON are kept locally, so tokens can be regenerated without a new fetch.
• Skill and CLI tooThe same workflow is available as an agent skill and as a standalone CLI, besides the MCP server.
• Cautious by designTarget sites are treated as untrusted input, and generated tokens should be reviewed before use.
• Public pages onlyThe README limits the workflow to public websites, one page at a time.

Tools it exposes

Frequently asked questions