Design System Extractor MCP Server: Install & Setup

Install Design System Extractor in Claude Code

Claude Code

claude mcp add design-system-extractor -- npx -y mcp-design-system-extractor

mcp.json (Claude Desktop, Cursor, VS Code, Windsurf)

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

Frequently asked questions

What does the Design System Extractor MCP server do?

Extract component information from Storybook design systems: HTML, styles, props, dependencies, theme tokens and metadata.

Is the Design System Extractor MCP server free?

Yes, most likely. Open source and no paid account or API key is mentioned in the listing. Check the provider for current pricing.

Does Design System Extractor run locally or remotely?

Local. Runs on your machine (stdio). You install it with npx, uvx, Docker or from source.

How do I add Design System Extractor to Claude Code?

Run: claude mcp add design-system-extractor -- npx -y mcp-design-system-extractor

More developer tools MCP servers

View all

Arm

arm/mcp

Official Arm MCP server for code migration, optimization, and Arm architecture guidance

LocalFree

Cynical Sally

101

w1ckedxt/cynical-sally

Brutally honest code reviews: scores, real issues, and usable fixes. CLI + MCP server.

LocalFree

CircleCI

CircleCI-Public/mcp-server-circleci

Enable AI Agents to fix build failures from CircleCI.

LocalAccount neededTypeScript

Victorialogs

106

VictoriaMetrics/mcp-victorialogs

MCP Server for VictoriaLogs. Provides integration with VictoriaLogs API and documentation

LocalAccount needed

A11ymcp

ronantakizawa/a11ymcp

Test URLs and HTML for WCAG 2.0/2.1/2.2 compliance using axe-core, including color contrast, ARIA validation and orientation lock detection.

LocalFreeTypeScript

pracht dev

106

JoviDeCroock/pracht

Inspect, verify, diff, and scaffold a pracht app's routes, API, and capabilities from its app graph.

LocalFree