Design Extract (MCP server) — Use Cases, Install & Live Demo

Why use it

Key features

Three-tier DTCG token output (primitive → semantic → composite)
Multi-platform emitters: SwiftUI, Compose, Flutter, Tailwind v4, Figma
WCAG remediation pass — flags failing pairs and proposes fixes
CSS health audit (specificity, dead rules, redundant tokens)
Chrome extension companion for one-click capture
Playwright-based, Node 20+, MIT licensed

Live Demo

What it looks like in practice

design-extract-mcp.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

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

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

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

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Design Extract

How to clone a brand's visual system to DTCG tokens

👤 Design engineers, agency teams, brand-aligned product teams ⏱ ~25 min intermediate

When to use: You're rebuilding a marketing site or app from a reference and need its tokens in 10 minutes, not a Figma rip session.

Prerequisites

Public URL of the reference site — e.g. https://stripe.com — must be publicly reachable

Flow

Extract

Use design-extract on https://stripe.com. Output DTCG tokens, SwiftUI, and Tailwind v4. Save to /tokens/.✓ Copied

→ tokens.json + tokens.swift + tailwind.css written; report on coverage
Audit

Run the CSS health pass and the WCAG remediation. Flag everything below AA.✓ Copied

→ Audit report listing failing pairs + suggestions
Apply

Now generate a starter Next.js page using these tokens — nav, hero, 3 feature cards.✓ Copied

→ Page renders in the brand visual identity

Outcome: A token set + audit + starter page, all derived from one URL.

Pitfalls

Site is heavily SSR-gated or behind login — Provide a logged-in cookie via the extension or a custom Playwright pre-step

Combine with: filesystem

Audit your own site for design-system drift

👤 Internal design system maintainers ⏱ ~30 min intermediate

When to use: You suspect 47 unauthorized colors snuck into production. Confirm it.

Flow

Inventory

Run design-extract against https://yoursite.com. Don't emit code — just report unique colors, font stacks, spacing values used.✓ Copied

→ Counts of distinct values per category
Compare to source

Compare against /design/tokens.json. Flag every value used in production that's not in the source-of-truth.✓ Copied

→ Drift table with file/component refs
Plan cleanup

Group drift by likely cause (legacy CSS, ad-hoc style, wrong token). Suggest a 3-PR cleanup plan.✓ Copied

→ PR plan written

Outcome: Concrete drift report you can hand to engineering, not a vibes-based 'we have inconsistency' complaint.

Pitfalls

Tool over-reports because of CSS variables that resolve at runtime — Pass --resolve-vars so it traces var(--x) chains before counting

Combine with: filesystem

Generate Figma variables from a live site

👤 Designers who need to mirror code in Figma ⏱ ~15 min beginner

When to use: Your code shipped first; design needs to catch up in Figma.

Flow

Emit Figma JSON

Use design-extract on https://yoursite.com with output=figma-variables. Save to /design/figma-vars.json.✓ Copied

→ Importable Figma variables JSON
Import

Walk me through importing this with the Figma Variables Import plugin.✓ Copied

→ Step-by-step plugin instructions

Outcome: Figma file in sync with shipped code, no manual eyedropping.

Pitfalls

Token names collide with existing Figma variables — Use the --prefix flag to namespace e.g. site/color.bg.primary

Combinations

Pair with other MCPs for X10 leverage

design-extract-mcp + filesystem

Persist token outputs in your repo so successive runs can diff

Run extract every Friday and save under /design/snapshots/$(date +%F)/.✓ Copied

design-extract-mcp + Figma-Context-MCP

Two-way sync — extract from live, push back to Figma

After extract, push the token file to Figma via Figma-Context-MCP.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	Primary entry point	1 Playwright crawl
audit_css_health	url	After or instead of extract, when goal is health not cloning	1 crawl
wcag_remediate	tokens	After extract, before shipping tokens	free (post-process)
diff_tokens	url, source_tokens_path	Drift audit on your own site	1 crawl

Cost & Limits

What this costs to run

API quota: Local — depends on your machine
Tokens per call: 1500–6000 per extraction summary
Monetary: Free (MIT)
Tip: Don't extract every PR — cache the result and run on changes

Security

Permissions, secrets, blast radius

Credential storage: None unless target needs auth (then via cookie file)

Data egress: Only to the URL you target. Playwright runs locally.

Respect robots.txt and target site ToS — this fetches like a browser would but at scale it's still scraping.

Troubleshooting

Common errors and fixes

Playwright Chromium fails to launch

Run npx playwright install chromium once

Verify: `npx playwright --version` reports a version

Site blocks headless browser

Pass --headed or supply a residential proxy / cookie file

Output tokens look incomplete

Site uses heavy CSS-in-JS — try --wait-for-selector main to ensure SPA paint completes

Alternatives

Design Extract vs others

Alternative	When to use it instead	Tradeoff
Figma-Context-MCP (GLips)	Source of truth is Figma, not a live site	Figma MCP needs a Figma file; design-extract works from any URL
Tokens Studio plugin	You're inside Figma already and want token management UI	Manual; design-extract automates the initial extraction

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills