Log inSubmit server
MCP Design System Extractor logo

MCP Design System Extractor

by freema

Extracts Storybook component markup, styles, metadata, dependencies, and design tokens for AI-assisted design system analysis.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install MCP Design System Extractor

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "freema-mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor@latest"
      ],
      "env": {
        "STORYBOOK_URL": "YOUR_VALUE_HERE",
        "NODE_TLS_REJECT_UNAUTHORIZED": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

The install command started, but didn't respond the way we expected when we tried to talk to it.

npx -y mcp-design-system-extractor@latest

initialize succeeded but no response to tools/list.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 1mo ago.

Overview

The freema/mcp-design-system-extractor MCP server connects to a Storybook instance and extracts rendered component information for AI agents. It uses Storybook's index and iframe endpoints with Puppeteer and headless Chrome to inspect components, styles, theme variables, and dependencies. Reach for it when an agent needs to discover available components, inspect variants, recreate markup, or analyze an existing design system. Long-running HTML extraction can run asynchronously through an in-memory job queue.

Use cases

  • Discover components available in a Storybook design system
  • Inspect rendered HTML and styles for a component variant
  • Extract theme colors, spacing, typography, and CSS variables
  • Analyze dependencies used inside rendered components
  • Find design system components by purpose such as forms or navigation

Key features

  • Storybook component discovery and search
  • Rendered HTML and optional CSS extraction
  • Theme and design token analysis
  • Rendered component dependency analysis
  • Asynchronous job queue with status and cancellation
  • Support for Storybook 7 through 10

Tools4

What MCP Design System Extractor lets your agent do. Expand a tool for its parameters.

Self-reported~60 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

21/21 checks healthy over the last 80d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 9d ago via OSV.dev · mcp-design-system-extractor@latest (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars72Stargazers on the source repository.
npm downloads349Package downloads in the last 30 days.
Last commit3d agoMost recent push to the default branch.
Install checkInconclusiveStarted but did not complete the MCP handshake in our test.
Tools exposed4Callable tools this server registers over MCP.
Directory activity5 viewsConfig copies, upvotes, and views on AllMCPs.

How MCP Design System Extractor works

What freema/mcp-design-system-extractor MCP server does

The freema/mcp-design-system-extractor MCP server exposes a Storybook design system through MCP tools. It can list components, search by name, title, category, or purpose, and retrieve rendered HTML for a selected story. HTML results can include CSS extracted from the rendered component, with Storybook's own CSS filtered out.

The server also exposes design-system analysis capabilities. It can inspect component dependencies in rendered HTML, extract theme information such as colors, spacing, typography, and breakpoints, and read CSS custom properties. External CSS analysis categorizes tokens including colors, spacing, typography, and shadows. By default, external CSS results contain design tokens and file statistics rather than the full stylesheet.

How it works

The server reads the Storybook story index from /index.json, with /stories.json as a fallback, and renders stories through /iframe.html. Puppeteer drives headless Chrome so JavaScript-rendered components can be inspected rather than treated as static files.

HTML extraction is asynchronous by default. The request returns a job identifier, and the job_status tool can be used to retrieve the result after completion. Synchronous extraction is available when a timeout is supplied. The queue supports up to two concurrent jobs and retains completed jobs for one hour. Job listing and cancellation are available through separate MCP tools.

Storybook versions 7 through 10 are supported. Storybook 6 and earlier are not supported because they use different endpoints.

Setup and configuration

Install the package globally with npm or run mcp-design-system-extractor@latest through npx. The server requires Node.js 20 or newer, a running Storybook instance, and Chrome or Chromium for Puppeteer. Docker handles Chrome or Chromium automatically when used in that environment.

Set STORYBOOK_URL to the Storybook address. It defaults to http://localhost:6006, so it can be omitted when the local default is appropriate. For a Storybook using a self-signed certificate, set NODE_TLS_REJECT_UNAUTHORIZED=0; this disables certificate verification and should be used only when that behavior is acceptable.

The repository documents setup through the Claude CLI, npm installation, and a source build followed by npm run setup for an interactive Claude Desktop configuration.

Tools and capabilities

The MCP tool set includes:

  • list_components for paginated component discovery, with compact output and category filtering.
  • search_components for searches across names, titles, categories, or purposes; "*" can request all matches.
  • get_component_html for story markup, variants, optional styles, synchronous extraction, or asynchronous jobs.
  • get_component_dependencies for identifying React components, web components, and CSS class patterns in rendered HTML.
  • get_theme_info for theme values and CSS variables, including an option to return all variables.
  • get_external_css for same-domain stylesheet analysis and token extraction.
  • job_status, job_cancel, and job_list for asynchronous job management.

Limitations and notes

The freema/mcp-design-system-extractor MCP server depends on a reachable Storybook deployment and compatible Storybook endpoints. External CSS requests are restricted to URLs on the same domain as the configured Storybook. Full CSS output can be large, so token-only output is the default. Large component renders are better suited to asynchronous mode, while variantsOnly provides a faster way to discover available variants.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about MCP Design System Extractor

Run `npx -y mcp-design-system-extractor@latest`, or install it globally with npm using `npm install -g mcp-design-system-extractor`. The repository also documents installation from source.

Set `STORYBOOK_URL` to the Storybook instance URL. It defaults to `http://localhost:6006`.

Yes. The repository documents an interactive `npm run setup` flow for Claude Desktop configuration and provides an MCP configuration example.

Use `get_component_html` with a component or story ID. It runs asynchronously by default; poll the returned job with `job_status`, or set `async: false` for synchronous extraction.

Yes. `get_theme_info` extracts theme values and CSS variables, while `get_external_css` categorizes tokens such as colors, spacing, typography, and shadows. External CSS URLs must use the Storybook's domain.

Related MCP servers

All in Finance & Fintech All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewMCP Design System Extractor AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/freema-mcp-design-system-extractor?style=directory)](https://allmcps.com/mcp/freema-mcp-design-system-extractor)
HTML Embed
<a href="https://allmcps.com/mcp/freema-mcp-design-system-extractor"><img src="https://allmcps.com/api/badge/freema-mcp-design-system-extractor?style=directory" alt="MCP Design System Extractor on AllMCPs" /></a>