Keyflow

Search Keyflow

Find a shortcut, workflow, MCP server or skill

mcp-design-system-extractor

local MCP server

Installation

Terminal

claude mcp add mcp-design-system-extractor -e STORYBOOK_URL=... -e NODE_TLS_REJECT_UNAUTHORIZED=... -e DEBUG=... -- npx -y mcp-design-system-extractor

Run in your project folder. Add --scope user to use it everywhere.

Claude Desktop, Cursor & other clients

Add to claude_desktop_config.json or .cursor/mcp.json.

{
  "mcpServers": {
    "mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ],
      "env": {
        "STORYBOOK_URL": "...",
        "NODE_TLS_REJECT_UNAUTHORIZED": "...",
        "DEBUG": "..."
      }
    }
  }
}

Fill in the environment variables with your own credentials.

Summary

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

Questions

mcp-design-system-extractor is a local MCP server distributed as the npm package mcp-design-system-extractor.

Run: claude mcp add mcp-design-system-extractor -e STORYBOOK_URL=... -e NODE_TLS_REJECT_UNAUTHORIZED=... -e DEBUG=... -- npx -y mcp-design-system-extractor

Run: codex mcp add mcp-design-system-extractor --env STORYBOOK_URL=... --env NODE_TLS_REJECT_UNAUTHORIZED=... --env DEBUG=... -- npx -y mcp-design-system-extractor

Similar MCP servers

NameStars
  1. raxolio.github.DROOdotFOO/raxol79
  2. DBHubio.github.bytebase/dbhub3,574
  3. brightdata-mcpio.github.brightdata/brightdata-mcp2,660
  4. Figma MCP Servercom.figma.mcp/mcp2,027
  5. TypeUIio.github.bergside/typeui1,987
  6. StyleKitio.github.AnxForever/stylekit-mcp549
  7. mcp-ssh-managerio.github.bvisible/mcp-ssh-manager493
  8. Network Sketcher (Local MCP)io.github.cisco-open/network-sketcher399
Buy me a coffee