Design System Extractor
MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.
What is Design System Extractor?
Design System Extractor is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp (model context protocol) server that enables ai assistants to interact with storybook design systems. extract component html, analyze styles, and help with design system adoption and refactoring.
MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- MCP (Model Context Protocol) server that enables AI assistan
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx mcp-design-system-extractorConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Design System Extractor
MCP Design System Extractor is an MCP server that connects AI assistants directly to your Storybook design system, enabling them to list components, render HTML, extract theme tokens, and analyze CSS. It exposes nine tools covering everything from component discovery and dependency mapping to async job management, making it practical for design system adoption, refactoring, and codebase migration workflows. Teams use it to let an AI understand the real component library rather than working from outdated documentation.
Prerequisites
- Node.js 18 or newer
- Chrome or Chromium installed (required by Puppeteer for rendering)
- A running Storybook instance (default: http://localhost:6006)
- An MCP-compatible client such as Claude Desktop or the Claude CLI
Start your Storybook instance
The extractor connects to a live Storybook server to render components. Make sure your project's Storybook is running before adding the MCP server. The default URL is http://localhost:6006.
npm run storybookAdd the server via Claude CLI (recommended)
Use the Claude CLI to register the MCP server and point it at your Storybook URL. This is the fastest path and avoids manual JSON editing.
claude mcp add design-system npx mcp-design-system-extractor@latest \
--env STORYBOOK_URL=http://localhost:6006Handle self-signed certificates (if needed)
If your Storybook runs behind HTTPS with a self-signed certificate, disable TLS verification by setting the NODE_TLS_REJECT_UNAUTHORIZED variable to 0.
claude mcp add design-system npx mcp-design-system-extractor@latest \
--env STORYBOOK_URL=https://my-storybook.example.com \
--env NODE_TLS_REJECT_UNAUTHORIZED=0Or install globally and configure manually
Install the package globally with npm, then add the JSON configuration block to your Claude Desktop config file at ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows).
npm install -g mcp-design-system-extractorRestart your MCP client
Restart Claude Desktop or reload the CLI session so the new server is picked up. The server will connect to Storybook and make all nine tools available.
Design System Extractor Examples
Client configuration
Manual JSON configuration for Claude Desktop pointing at a remote Storybook over HTTPS.
{
"mcpServers": {
"design-system": {
"command": "npx",
"args": ["mcp-design-system-extractor@latest"],
"env": {
"STORYBOOK_URL": "https://storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}Prompts to try
Use these prompts once the server is connected to explore and migrate your design system.
- "List all Button components in the design system"
- "Get the rendered HTML for the Button--primary story"
- "What are the spacing and color tokens in the theme?"
- "Which components depend on the Icon component?"
- "Search for all form-related components in the library"
- "Extract the external CSS design tokens from the Storybook"Troubleshooting Design System Extractor
Error: Could not connect to Storybook at http://localhost:6006
Ensure your Storybook development server is running before starting Claude. Run `npm run storybook` in your project directory and verify the URL is reachable in a browser.
SSL certificate errors when connecting to a remote Storybook
Add NODE_TLS_REJECT_UNAUTHORIZED=0 to your environment config. For production Storybooks, use a valid certificate instead of disabling verification.
get_component_html times out or returns no result
The tool uses async mode by default. After calling get_component_html, use job_status with the returned job ID to poll for completion. You can also call job_list to see all pending jobs.
Frequently Asked Questions about Design System Extractor
What is Design System Extractor?
Design System Extractor is a Model Context Protocol (MCP) server that mcp (model context protocol) server that enables ai assistants to interact with storybook design systems. extract component html, analyze styles, and help with design system adoption and refactoring. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Design System Extractor?
Follow the installation instructions on the Design System Extractor GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Design System Extractor?
Design System Extractor works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Design System Extractor free to use?
Yes, Design System Extractor is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Design System Extractor Alternatives — Similar Developer Tools Servers
Looking for alternatives to Design System Extractor? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Design System Extractor in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Design System Extractor?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.