MCP Design System Extractor

What it does

MCP Design System Extractor bridges your Storybook instance and AI assistants. Point it at any running Storybook URL and your AI can browse all available components, extract rendered HTML with full CSS, search by name or purpose, analyse design tokens (colours, spacing, typography), and check component dependencies — all without leaving the conversation.

This is particularly useful for teams migrating components across frameworks, enforcing design consistency, or building new features that need to match existing design patterns.

Tools

• list_components — List all components with optional category filtering and pagination; use compact: true to reduce output size
• get_component_html — Extract rendered HTML for a specific component story; runs async by default with job tracking to handle large components
• search_components — Find components by name, title, category, or purpose (e.g. "form inputs", "navigation")
• get_component_dependencies — Analyse which sub-components are used within a given component
• get_theme_info — Extract design system theme: CSS custom properties, colour palette, spacing scale, typography
• get_external_css — Fetch and tokenise external CSS files; returns design tokens by default, full CSS on demand
• job_status — Poll the result of an async component extraction job
• job_cancel — Cancel a queued or running job
• job_list — List all jobs filtered by status (all / active / completed)

Installation

Add to Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "design-system": {
      "command": "npx",
      "args": ["mcp-design-system-extractor@latest"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

Or use the Claude CLI shortcut:

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=http://localhost:6006

For Storybook instances with self-signed certificates, add NODE_TLS_REJECT_UNAUTHORIZED=0 to the env block.

Supported hosts

Confirmed: Claude Desktop, Claude CLI.