mcp-design-system-extractor

Overview

The MCP Design System Extractor connects to Storybook instances to extract component information, rendered HTML, styles, and design tokens. It uses Puppeteer with headless Chrome for dynamic JavaScript rendering and provides both synchronous and asynchronous modes for component extraction. The server features a job queue system for long-running operations with concurrent processing capabilities. It supports comprehensive design system analysis including theme extraction, component dependency analysis, and CSS token extraction.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• list_components

  Lists all available components from the Storybook instance

  Try:Show me all available componentsTry:List components in the navigation category
• get_component_html

  Extracts HTML from a specific component story

  Try:Get the HTML for the button componentTry:Extract HTML for card--default
• search_components

  Search components by name, title, category, or purpose

  Try:Find button componentsTry:Search for form input components by purpose
• get_component_dependencies

  Analyzes rendered HTML to find which other components are used internally

  Try:Show what components are used in the modal dialogTry:Analyze dependencies of the navigation bar
• get_theme_info

  Extracts design system theme (colors, spacing, typography, breakpoints)

  Try:Extract the color palette from the design systemTry:Get typography and spacing tokens
• get_external_css

  Extracts and categorizes CSS tokens from external CSS files

  Try:Extract design tokens from main.cssTry:Get color and spacing variables from the CSS
• job_status

  Check status of an async job

  Try:Check status of job job_xxxTry:Is my HTML extraction complete?
• job_cancel

  Cancel a queued or running job

  Try:Cancel job job_xxxTry:Stop the current HTML extraction
• job_list

  List all jobs with their status

  Try:Show all active jobsTry:List completed jobs

Comparable tools

Installation

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

npm install -g mcp-design-system-extractor

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

FAQ

Does it work with all versions of Storybook?

It works with built Storybook distributions that expose the standard `/index.json` and `/iframe.html` endpoints. The most recent versions are supported.

What if my component takes a long time to render?

The server uses asynchronous job processing by default for long-running operations. You can poll job status to track completion without timeout errors.

Compare mcp-design-system-extractor with