mcp-design-system-extractor

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.

Features

• Component Discovery - List all available components with categories and stories
• HTML Extraction - Get rendered HTML of any component variant
• Component Search - Find components by name, title, or category
• Props Documentation - Extract component props/API including types and defaults
• Dependency Analysis - Analyze which components are used within others
• Theme Information - Extract design system theme (colors, spacing, typography)
• Purpose-Based Search - Find components by their function
• CSS Analysis - Extract design tokens and variables

Requirements

• Node.js 18+
• Chrome/Chromium (for Puppeteer)
• Running Storybook instance

Quick Start

npm install && npm run build
npm run setup  # Interactive setup for Claude Desktop

Or set manually:

export STORYBOOK_URL=http://localhost:6006

Available Tools

Core Tools

• list_components - List all components from Storybook
• get_component_html - Extract HTML from a component story
• get_component_variants - Get all story variants for a component
• search_components - Search by name, title, or category

Component Analysis

• get_component_props - Extract props/API documentation
• get_component_dependencies - Analyze component dependencies

Design System Tools

• get_theme_info - Get theme information (colors, spacing, typography)
• get_external_css - Fetch and analyze CSS files for design tokens

How It Works

Connects to Storybook via /index.json and /iframe.html endpoints. Uses Puppeteer with headless Chrome for dynamic JavaScript rendering. Extracts component HTML, styles, props, dependencies, and design tokens with smart caching and timeout protection.

Links

• GitHub Repository
• npm Package