MCP Design System Extractor MCP Server

by freema Your server? Claim it

local only

MCP Design System Extractor runs on your own machine — the client starts it, so there is no endpoint to ping. 180 installs a week from npm. Last commit 27 Jul 2026.

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

Installs per day peak 194 · avg 17 · +377% w/w

a month agotoday

180

Installs / week

npm · mcp-design-system-extractor

Stars

0 open issues

27 Jul 2026

Last commit

0 releases in 90 days

MIT

License

TypeScript

Nothing serious here today

Today is the operative word: we check MCP Design System Extractor every 15 minutes and re-read its code on every release. Watch it and you find out the day that stops being true.

Connect this server

This server runs on your own machine — install it with the package manager and the client starts it for you. Package name taken from the official registry entry.

Claude Code Claude Desktop Codex Cursor VS Code

run in your terminal

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

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

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

~/.codex/config.toml

[mcp_servers.mcp-design-system-extractor]
command = "npx"
args = ["-y", "mcp-design-system-extractor"]

.cursor/mcp.json

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

.vscode/mcp.json

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

This one needs environment variables set before it will start: 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). The author declared them in the registry entry; get the values from the project itself.

Alternatives to MCP Design System Extractor

same job, measured the same way

Tapsite

by mgriffen

MCP server for web inspection, design system extraction, and accessibility audits

41 installs/wk local only

melta UI

by tsubotax

AI-Ready design system MCP: melta UI tokens, component contracts, 99 rules, check_html self-verify

131 installs/wk local only

Fragments MCP

by conanmcn

Design system MCP with 9 tools for component discovery, rendering, and a11y auditing

89 installs/wk local only

Optics MCP

by rolemodel

MCP Server for Optics Design System documentation and token usage.

50 installs/wk local only

Taste Bank

by quasarg

Reusable visual design systems for AI coding agents — browse, fetch, and submit styles via MCP.

local only

Anima MCP Server

by animaapp

Connect AI coding agents to Anima Playground, Figma, and your design system.

answering

Figma Context MCP Air

by compassalessandrolorenz

Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.

34 installs/wk local only

HTML to Figma — Design System

by miapre

Translate HTML prototypes into Figma using your design system's real components and tokens.

26 installs/wk local only

MCP Design System Extractor — questions

Answers built from our own checks of this server.

Why is there no uptime for MCP Design System Extractor?

MCP Design System Extractor runs on your own machine over stdio — there is no network address to reach, so uptime cannot be measured for it by anyone. What can be measured is adoption: the npm package mcp-design-system-extractor was installed 180 times last week.

How do I connect MCP Design System Extractor?

Copy the ready config from this page — we generate it for Claude Code, Claude Desktop, Codex, Cursor and VS Code, each with the file path that client actually reads. It runs locally, so the command pulls mcp-design-system-extractor straight from npm; nothing to host, nothing to sign up for.

How many people use MCP Design System Extractor?

The npm package mcp-design-system-extractor was installed 180 times in the last week. Week over week that is +377%. We show installs rather than GitHub stars on purpose: a star is a bookmark, an install is someone actually running it.

Is MCP Design System Extractor open source?

Yes — it is published under the MIT licence, written in TypeScript and 69 stars on GitHub. The source link is on this page, so you can read exactly what it does with your data before you connect it.