Design System Extractor MCP Server

by freemaio.github.freema/mcp-design-system-extractorv1.2.0

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

70Node.jsstdioofficial registry

context tax

queued

security

queued

cold start

queued

freshness

Active20d ago

Install Design System Extractor MCP server

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

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

Add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project).

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

Settings → Developer → Edit Config (claude_desktop_config.json), then restart.

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

Add to .vscode/mcp.json in your workspace.

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

Add to ~/.codeium/windsurf/mcp_config.json.

Configuration

Variable	Required	Secret	Description
STORYBOOK_URL	—	—	Base URL of the Storybook instance (default: http://localhost:6006)
NODE_TLS_REJECT_UNAUTHORIZED	—	—	Set to 0 to allow self-signed certificates on the Storybook host
DEBUG	—	—	Set to true for verbose logging on stderr

Freshness

Active — last maintenance signal 20d ago. The newest of the signals below sets the band.

Last commit (default branch)
2026-09-19 · 20d ago · GitHub
Latest release
2026-07-27 · 2mo ago · GitHub · v1.2.0
Package published
no data · npm/PyPI
Registry entry updated
2026-07-27 · 2mo ago · official registry · v1.2.0

FAQ

›How do I install the Design System Extractor MCP server in Claude Code?

Run: claude mcp add design-system-extractor -- npx -y mcp-design-system-extractor. For Cursor, VS Code, Claude Desktop and Windsurf, use the install tabs above.

›Does Design System Extractor require an API key?

No required environment variables are declared in its published metadata.

›Can I use Design System Extractor as a remote (hosted) MCP server?

No hosted endpoint is published; it runs locally over stdio.

›Is Design System Extractor in the official MCP registry?

Yes, as io.github.freema/mcp-design-system-extractor.