Design System Extractor MCP Server

A Model Context Protocol (MCP) server that extracts component information from Storybook design systems. Connects to Storybook instances and extracts HTML, styles, and component metadata. It runs locally over stdio via the published package.

People connecting design tools to Claude, Cursor, VS Code, or another MCP client. The project is written in TypeScript.

VERIFIED ACTIVE

LAST COMMIT 2026-07-27 · ★ 69 · #21 OF 74 MAINTAINED DESIGN · VERIFIED 2026-08-25

MIT · TypeScript servers · how we verify → /methodology

01 · Install Design System Extractor

before you install - you'll need

Set STORYBOOK_URL, NODE_TLS_REJECT_UNAUTHORIZED before connecting.

Claude Code

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

Claude Desktop / Cursor / VS Code - add to config

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

Same JSON for Cursor. For VS Code, rename the top-level key from `mcpServers` to `servers`.

Using another client? Same JSON, different key

Claude Desktop · mcpServers

Cursor · mcpServers

VS Code · servers

Windsurf · mcpServers

Zed · context_servers

Cline · mcpServers

Roo Code · mcpServers

Continue · mcpServers

LibreChat · mcpServers

Gemini CLI · mcpServers

Codex CLI · mcp_servers

Full setup guides: every client.

02 · Evidence

Security posture

What to check before giving this server access to your agent - from the registry, GitHub, and our own probes. We don't score safety; we show what's verifiable.

runs as local process (stdio) - runs on your machine with your user's permissions

license MIT - declared in the repository

npm package mcp-design-system-extractor - unscoped; check the name against the project README before installing

registry namespace io.github.freema is GitHub-verified and matches the repo owner

03 · What Design System Extractor can do

Prose above is summarized from the project's README and registry record - no invented capabilities.

Latest releases

v1.2.0 · 2026-07-27

repair get_component_html, upgrade SDK 0.5 -> 1.29 and refresh toolchain

1.1.1 · 2026-02-04

New Features · Claude Code Plugin with: · - Commands: /design:list, /design:extract, /design:theme · - Agents: ui-builder · - Skills: design-extraction (auto-triggers)

1.1.0 · 2026-01-10

Update README with personal website link · Feat/new async tools

04 · Who maintains Design System Extractor

mcp-design-system-extractor is maintained by freema. We track 4 MCP servers from freema - 4 actively maintained, 361 combined GitHub stars, oldest repo from May 2025. Full record: all servers from freema.

05 · Facts

repository: github.com/freema/mcp-design-system-extractor
category: design - ranked #21 of 74 actively-maintained design servers as of 2026-08-25.
release cadence: 1 release in the last 90 days (latest 2026-07-27)
registry: io.github.freema/mcp-design-system-extractor (active, first published 2026-07-27)
packages: npm:mcp-design-system-extractor

06 · Design System Extractor FAQ

What is Design System Extractor?

Is Design System Extractor still maintained?

Yes - as of 2026-08-25, its last commit was 2026-07-27 and it shipped 1 release in the last 90 days. We re-verify nightly.

How do I install Design System Extractor?

Run `npx -y mcp-design-system-extractor`. The README documents 2 environment variables (STORYBOOK_URL, NODE_TLS_REJECT_UNAUTHORIZED) to set first. Set STORYBOOK_URL, NODE_TLS_REJECT_UNAUTHORIZED before connecting. You can also paste the ready-made client config above.

Does Design System Extractor run locally?

Yes - it's a stdio server: it runs on your machine (via npx) with your user's permissions. Your data stays local unless the server itself calls external APIs.

07 · Alternatives to Design System Extractor

Alternatives to Design System Extractor

Maintained design servers if Design System Extractor isn't the fit.

More design MCP servers · useVyre Context · SCORM Packager (HTML → SCORM 2004) · Mellos Mapping · Saglitzdesign MCP

More TypeScript MCP servers · Gsheets · Jira Stdio · OpenClaw MCP Server · Docker MCP Server (friendlygeorge) · Frihet ERP · see all