SERVER

MCP Design System Extractor

Rank #6,612

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

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

1 version

70 GitHub stars

by freema (6 servers)View repository ↗

First listed

Jun 4, 2025

Last publish date

Jul 27, 2026

PURPOSE

What you can do with MCP Design System Extractor

MCP Design System Extractor is a Model Context Protocol (MCP) server published by freema. It ranks #6,612 of 144,396 active servers on MCP Toplist, and its repository has 70 GitHub stars. MCP Design System Extractor is listed across 3 registries — Official MCP, Glama and mcp.so, with 1 tracked version. It was first listed on Jun 4, 2025 and most recently updated on Jul 27, 2026.

Not verifiedMCP Toplist has not yet written a checked profile for this server, so the paragraph above is assembled from registry data only. The repository README is the authority on what it does.

CAPABILITIES AND LIMITATIONS

What MCP Design System Extractor can and cannot do

Not verifiedMCP Toplist has not catalogued this server's tools or limitations. The repository README lists them.

REQUIREMENTS

What you need before using MCP Design System Extractor

DeclaredNo credentialsNo credentials declared

The registry listing declares no required environment variables or authentication. This is declared metadata, not a verified install — the repository README is the authority.

Declared by Glama, last synced Oct 16, 2026. Not independently verified by MCP Toplist.

Declared in the registry install config

STORYBOOK_URL · optional
NODE_TLS_REJECT_UNAUTHORIZED · optional
DEBUG · optional

INSTALLATION AND FIRST TASK

Connect MCP Design System Extractor and confirm it works

npm package

claude mcp add mcp-design-system-extractor -e "STORYBOOK_URL=<your STORYBOOK_URL>" -e "NODE_TLS_REJECT_UNAUTHORIZED=<your NODE_TLS_REJECT_UNAUTHORIZED>" -e "DEBUG=<your DEBUG>" -- npx -y mcp-design-system-extractor

Replace each placeholder with your own value before saving.

npm package

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

[mcp_servers.mcp-design-system-extractor.env]
STORYBOOK_URL = "<your STORYBOOK_URL>"
NODE_TLS_REJECT_UNAUTHORIZED = "<your NODE_TLS_REJECT_UNAUTHORIZED>"
DEBUG = "<your DEBUG>"

Add to ~/.codex/config.toml. Replace each placeholder with your own value before saving.

npm package

{
  "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>"
      }
    }
  }
}

Add to claude_desktop_config.json (Settings → Developer → Edit Config). Replace each placeholder with your own value before saving.

npm package

{
  "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>"
      }
    }
  }
}

Add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (per project). Replace each placeholder with your own value before saving.

npm package

{
  "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>"
      }
    }
  }
}

Save as .vscode/mcp.json in your workspace. Replace each placeholder with your own value before saving.

npm package

{
  "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>"
      }
    }
  }
}

Add to ~/.codeium/windsurf/mcp_config.json. Replace each placeholder with your own value before saving.

npm package

{
  "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>"
      }
    }
  }
}

Replace each placeholder with your own value before saving.

First successful task

After adding the config, ask your client to list this server's tools. A tool list confirms the connection; an empty list or an error means the server did not start or needs credentials.

ALTERNATIVES

When to choose another server

Other servers by freema

View all freema servers →

No task-specific alternatives are catalogued for MCP Design System Extractoryet; the list above is its publisher's other servers.

MAINTENANCE AND EVIDENCE

What changed, and when this was checked

First listed: Jun 4, 2025
Latest version published: Jul 27, 2026
Version history: 1 version tracked (below)
Requirements evidence: Declared by Glama, last synced Oct 16, 2026. Not independently verified by MCP Toplist.
Profile checked: Not yet — purpose, capabilities and requirements above come from registry data only
Ranking data as of: Oct 16, 2026

Registry sightings

Glama ↗listed since Apr 26, 2026 · still listed
mcp.so ↗listed since Jun 4, 2026 · still listed
Official MCP ↗listed since Jul 27, 2026 · still listed

Do you maintain MCP Design System Extractor? to correct or enrich this profile.

VERSIONS

Available versions (1)

Version	Published
1.2.0	Jul 27, 2026

STANDING

#6,612of 144,396 active serversTop 5%

Ranks ahead of 137,784 of 144,396 servers on MCP Toplist.

BADGE

Show your rank

Maintain this server? Add the live rank badge to your README — it updates automatically as the leaderboard changes.

Markdown

[![MCP Toplist](https://mcptoplist.com/badge/io.github.freema%2Fmcp-design-system-extractor.svg)](https://mcptoplist.com/server/io.github.freema%2Fmcp-design-system-extractor)

HTML

<a href="https://mcptoplist.com/server/io.github.freema%2Fmcp-design-system-extractor"><img src="https://mcptoplist.com/badge/io.github.freema%2Fmcp-design-system-extractor.svg" alt="MCP Toplist: Top 5% of 144,396" /></a>

Variants: append ?metric=score or ?metric=stars to the image URL.

FAQ

Frequently asked questions

Who maintains MCP Design System Extractor?: MCP Design System Extractor is maintained by freema, which publishes 6 MCP servers (27 total versions) tracked on MCP Toplist.
Is MCP Design System Extractor listed on the Official MCP Registry?: Yes — MCP Design System Extractor is listed on the Official MCP Registry, alongside Glama and mcp.so.
How many versions does MCP Design System Extractor have?: MCP Toplist tracks 1 version of MCP Design System Extractor, most recently published on Jul 27, 2026.
Where can I find the source code for MCP Design System Extractor?: The source code for MCP Design System Extractor is hosted at github.com/freema/mcp-design-system-extractor.

Used in projects

Do you run this server?

Community projects list the MCP servers behind real agents and apps. Publish yours and this page will link to it.

EXPLORE

All MCP Servers Official MCP Servers GitHub MCP Servers Best MCP Servers Most Active MCP Servers New MCP Servers Best New MCP Servers