io.github.freema/mcp-design-system-extractor MCP Server

Name: io.github.freema/mcp-design-system-extractor MCP Server
Author: io.github.freema

io.github.freema/mcp-design-system-extractor

Repository Registry

What is the io.github.freema/mcp-design-system-extractor MCP server?

MCP server for Storybook design systems — extract component HTML, styles and metadata.

How to install io.github.freema/mcp-design-system-extractor

Copy-paste configuration for popular MCP clients.

transport: stdio

Config generated by PluginBench — verify against the source before use.

Environment / auth

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

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ],
      "env": {
        "STORYBOOK_URL": "<YOUR_STORYBOOK_URL>",
        "NODE_TLS_REJECT_UNAUTHORIZED": "<YOUR_NODE_TLS_REJECT_UNAUTHORIZED>",
        "DEBUG": "<YOUR_DEBUG>"
      }
    }
  }
}

Cursor

~/.cursor/mcp.json

{
  "mcpServers": {
    "mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ],
      "env": {
        "STORYBOOK_URL": "<YOUR_STORYBOOK_URL>",
        "NODE_TLS_REJECT_UNAUTHORIZED": "<YOUR_NODE_TLS_REJECT_UNAUTHORIZED>",
        "DEBUG": "<YOUR_DEBUG>"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ],
      "env": {
        "STORYBOOK_URL": "<YOUR_STORYBOOK_URL>",
        "NODE_TLS_REJECT_UNAUTHORIZED": "<YOUR_NODE_TLS_REJECT_UNAUTHORIZED>",
        "DEBUG": "<YOUR_DEBUG>"
      }
    }
  }
}

VS Code

.vscode/mcp.json

{
  "servers": {
    "mcp-design-system-extractor": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ],
      "env": {
        "STORYBOOK_URL": "<YOUR_STORYBOOK_URL>",
        "NODE_TLS_REJECT_UNAUTHORIZED": "<YOUR_NODE_TLS_REJECT_UNAUTHORIZED>",
        "DEBUG": "<YOUR_DEBUG>"
      }
    }
  }
}

Claude Code

claude mcp add mcp-design-system-extractor --env STORYBOOK_URL=<YOUR_STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<YOUR_NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<YOUR_DEBUG> -- npx -y mcp-design-system-extractor