mcp-design-system-extractor — Claude Code MCP server
Connects an AI assistant to a Storybook instance to pull component HTML, CSS tokens, and metadata. Helpful when building UI screens matching an existing design system.
claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractorWhat mcp-design-system-extractor does
This server connects to Storybook via STORYBOOK_URL, pointing by default to http://localhost:6006. Dynamic components render through headless Chrome powered by Puppeteer. Because of that, Chrome or Chromium must exist in your environment.
Nine distinct tools handle discovery and extraction. They search the component tree by purpose, read theme variables, and isolate component HTML without Storybook shell wrapper styles. Fetching markup runs asynchronously by default to avoid timeouts on heavy stories.
The tool also reads external CSS from the same host to categorize tokens for colors and typography. Without a working Chromium executable, rendering fails immediately.
What it helps with
- Extract rendered HTML for any Storybook story
- Read design tokens directly from theme definitions and stylesheets
- Search component libraries by functional role
- Inspect internal component dependencies before assembling new layouts
Example prompts for the agent
- List all available Storybook components in compact format
- Search the component catalog for navigation elements
- Get the rendered HTML and styles for story
button--primary
How to install mcp-design-system-extractor
Platform CLI
claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractorReplace <…> with your own values
Platform CLI
codex mcp add mcp-design-system-extractor --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> -- npx -y mcp-design-system-extractorReplace <…> with your own values
Config file
{
"mcpServers": {
"mcp-design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
],
"env": {
"STORYBOOK_URL": "<STORYBOOK_URL>",
"NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
"DEBUG": "<DEBUG>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"mcp-design-system-extractor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
],
"env": {
"STORYBOOK_URL": "<STORYBOOK_URL>",
"NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
"DEBUG": "<DEBUG>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e STORYBOOK_URL=<STORYBOOK_URL> -e NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> -e DEBUG=<DEBUG> mcp-design-system-extractor npx -y mcp-design-system-extractorReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about mcp-design-system-extractor
How to install mcp-design-system-extractor in Claude Code?
Run the setup command: claude mcp add mcp-design-system-extractor -- npx -y mcp-design-system-extractor. When targeting custom hosts or self-signed certificates, pass environment flags: `claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractor`.
What does mcp-design-system-extractor do?
It inspects a running Storybook instance to hand component markup, CSS variables, and hierarchy directly to your coding assistant.
Why does this server require Puppeteer and Chrome?
It relies on headless Chrome to execute client-side JavaScript inside the story iframe. Puppeteer needs a local Chromium binary to capture the final DOM tree.
