MCP Design System Extractor MCP Server

Extracts component information, including HTML, styles, and metadata, from Storybook design systems.

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.

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

claude mcp add design-system npx mcp-design-system-extractor@latest \ --env STORYBOOK_URL=https://my-storybook.example.com \ --env NODE_TLS_REJECT_UNAUTHORIZED=0

npm install -g mcp-design-system-extractor

Then configure in your MCP client (seeEnvironment Variables).

git clone https://github.com/freema/mcp-design-system-extractor.git cd mcp-design-system-extractor npm install && npm run build npm run setup # Interactive setup for Claude Desktop

- Puppeteer: Uses headless Chrome for dynamic JavaScript component rendering
- Chrome/Chromium: Required for Puppeteer (automatically handled in Docker)
- Works with built Storybook distributions

- List Components: Get all available components from your Storybook with compact mode
- Extract HTML: Get the rendered HTML of any component (async or sync mode)
- Search Components: Find components by name, title, category, or purpose
- Component Dependencies: Analyze which components are used within other components
- Theme Information: Extract design system theme (colors, spacing, typography)
- External CSS Analysis: Fetch and analyze CSS files to extract design tokens
- Async Job Queue: Long-running operations run in background with job tracking

{ "mcpServers": { "design-system": { "command": "node", "args": ["/path/to/dist/index.js"], "env": { "STORYBOOK_URL": "https://my-storybook.example.com", "NODE_TLS_REJECT_UNAUTHORIZED": "0" } } } }

SeeDEVELOPMENT.mdfor detailed setup instructions.

- Lists all available components from the Storybook instance
- Usecompact: truefor minimal output (reduces response size)
- Filter bycategoryparameter
- Supports pagination withpageandpageSize(default: 20)

- Extracts HTML from a specific component story
- Async by default: Returnsjob_id, usejob_statusto poll for results
- Setasync: falsefor synchronous mode (usestimeoutparameter)
- UsevariantsOnly: trueto get list of available variants (sync, fast)
- OptionalincludeStyles: truefor CSS extraction (Storybook CSS filtered out)
- Story ID format:"component-name--story-name"or just"component-name"(auto-resolves to default variant)

- Search components by name, title, category, or purpose
- query: Search term (use"*"for all)
- purpose: Find by function ("form inputs", "navigation", "feedback", "buttons", etc.)
- searchIn: "name", "title", "category", or "all" (default)
- Supports pagination withpageandpageSize
- get_component_dependencies

- Analyzes rendered HTML to find which other components are used internally
- Detects React components, web components, and CSS class patterns
- Requires story ID format:"component-name--story-name"

- Extracts design system theme (colors, spacing, typography, breakpoints)
- Gets CSS custom properties/variables
- UseincludeAll: truefor all CSS variables

- DEFAULT: Returns only design tokens + file stats (avoids token limits)
- Extracts & categorizes tokens: colors, spacing, typography, shadows
- UseincludeFullCSS: trueonly when you need full CSS content
- Security-protected: only accepts URLs from same domain as Storybook

- Check status of an async job
- Returns:status,result(when completed),error(when failed)
- Poll this after callingget_component_htmlin async mode

- Cancel a queued or running job
- Returns whether cancellation was successful

- List all jobs with their status
- Filter bystatus: "all" (default), "active" (queued/running), "completed"
- Returns job list + queue statistics

// List all components (compact mode recommended) await list_components({ compact: true }); // Search for components await search_components({ query: "button", searchIn: "name" }); // Find components by purpose await search_components({ purpose: "form inputs" }); // Get variants for a component await get_component_html({ componentId: "button", variantsOnly: true }); // Returns: { variants: ["primary", "secondary", "disabled"] } // Get HTML (async mode - default) await get_component_html({ componentId: "button--primary" }); // Returns: { job_id: "job_xxx", status: "queued" } // Poll for result await job_status({ job_id: "job_xxx" }); // Returns: { status: "completed", result: { html: "...", classes: [...] } } // Get HTML (sync mode) await get_component_html({ componentId: "button--primary", async: false, timeout: 30000 }); // Returns: { html: "...", classes: [...] } // Get HTML with styles await get_component_html({ componentId: "button--primary", async: false, includeStyles: true }); // Check all running jobs await job_list({ status: "active" }); // Extract theme info await get_theme_info({ includeAll: false }); // Get design tokens from CSS await get_external_css({ cssUrl: "https://my-storybook.com/assets/main.css" });

- Start with discovery: Uselist_componentswithcompact: true
- Get variants first: Useget_component_htmlwithvariantsOnly: true
- Use async for HTML: Default async mode prevents timeouts on large components
- Poll job_status: Check job completion before reading results
- Search by purpose: Usesearch_componentswithpurposeparameter

Once connected, you can use natural language prompts with Claude:

Show me all available button components in the design system

I need to create a user profile card. Find relevant components from the design system and show me their HTML structure.

Extract the color palette and typography tokens from the design system. I want to ensure my new component matches the existing styles.

Get the HTML and styles for the "alert" component. I need to recreate it in a different framework while keeping the same look.

First list all form-related components, then get the HTML for the input and select components. I'm building a registration form.

Connects to Storybook via/index.jsonand/iframe.htmlendpoints. Uses Puppeteer with headless Chrome for dynamic JavaScript rendering. Long-running operations use an in-memory job queue with max 2 concurrent jobs and 1-hour TTL for completed jobs.

- Ensure Storybook is running andSTORYBOOK_URLis correct
- Uselist_componentsfirst to see available components
- For large components, use async mode (default) and polljob_status
- Check/index.jsonendpoint directly in browser
- SSL certificate errors: SetNODE_TLS_REJECT_UNAUTHORIZED=0for self-signed certificates
- SeeDEVELOPMENT.mdfor detailed troubleshooting

- Node.js 20+
- Chrome/Chromium (for Puppeteer)
- Running Storybook instance (see below for supported versions)

Storybook 7, 8, 9 and 10.The server reads the story index from/index.json, falling back to/stories.json, and renders stories through/iframe.html?id=<storyId>— endpoints that have been stable across all four major versions.

Storybook 6 and earlier are not supported: they predate/index.jsonand use a different story-id scheme.

Both a dev server (npm run storybook) and a built static Storybook served over HTTP will work.

See DEVELOPMENT.mdfor detailed development instructions.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB

MCP Design System Extractor

About

Details

Jump to

About

Details

Jump to

More like this

Sentry

Github

Google Maps

Git

GitLab

Context 7