# mcp-design-system-extractor

Connects an AI assistant to a Storybook instance to pull component HTML, CSS tokens, and metadata. Helpful when building UI screens matching an existing design system.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 72
- Author: freema
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/freema/mcp-design-system-extractor
- Updated: 2026-09-19
- HTML: https://affpapa.org/en/nevibecode/mcp/mcp-design-system-extractor

## What it does

This server connects to Storybook via `STORYBOOK_URL`, pointing by default to `http://localhost:6006`. Dynamic components render through headless Chrome powered by Puppeteer. Because of that, Chrome or Chromium must exist in your environment.

Nine distinct tools handle discovery and extraction. They search the component tree by purpose, read theme variables, and isolate component HTML without Storybook shell wrapper styles. Fetching markup runs asynchronously by default to avoid timeouts on heavy stories.

The tool also reads external CSS from the same host to categorize tokens for colors and typography. Without a working Chromium executable, rendering fails immediately.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `STORYBOOK_URL`, `NODE_TLS_REJECT_UNAUTHORIZED`, `DEBUG` — keys and tokens: ask the human for the values, never commit them or put them in shared files.

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractor
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add mcp-design-system-extractor --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> -- npx -y mcp-design-system-extractor
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp-design-system-extractor": {
            "command": "npx",
            "args": [
                "-y",
                "mcp-design-system-extractor"
            ],
            "env": {
                "STORYBOOK_URL": "<STORYBOOK_URL>",
                "NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
                "DEBUG": "<DEBUG>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp-design-system-extractor": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "mcp-design-system-extractor"
            ],
            "env": {
                "STORYBOOK_URL": "<STORYBOOK_URL>",
                "NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
                "DEBUG": "<DEBUG>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e STORYBOOK_URL=<STORYBOOK_URL> -e NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> -e DEBUG=<DEBUG> mcp-design-system-extractor npx -y mcp-design-system-extractor
```
Replace <…> with your own values

## When to use it
- Extract rendered HTML for any Storybook story
- Read design tokens directly from theme definitions and stylesheets
- Search component libraries by functional role
- Inspect internal component dependencies before assembling new layouts

## Example prompts
- List all available Storybook components in compact format
- Search the component catalog for navigation elements
- Get the rendered HTML and styles for story `button--primary`

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md