Set up extract-design-system in Claude Desktop

communitystdiounknown

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

01Configuration

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

Add this to claude_desktop_config.json. Generated from the captured install method (npx); the mcpServers shape is shared across Claude Desktop, Cursor, Windsurf, Cline, and VS Code.

02Steps

Make sure Claude Desktop is installed and up to date.
Open claude_desktop_config.json and add the block above (merge into any existing mcpServers).
Provide any required API keys/credentials as environment variables.
Restart Claude Desktop and confirm extract-design-system’s tools appear.

03Other runtimes

Cursor Windsurf Cline Continue Goose VS Code OpenAI Agents SDK LangGraph CrewAI

04Provenance

config_sourcegenerated from captured install method

last_checked2026-07-06 08:23Z

sourcesGitHub repo search [p4]

Next step

Want agents that act within guardrails? Apex is the live governed-agent product — paced, capped, and fully-logged actions with approvals before anything runs.

Explore Apex →

See also: server page · is it safe? · alternatives