Mcp Design System Extractor

Overview

Mcp Design System Extractor is a Model Context Protocol server that connects AI assistants directly to Storybook design systems. It lets you extract component HTML, styles, and metadata programmatically, so Claude and other MCP clients can inspect and work with your design system without manual copying between tools.

The server runs locally on your machine via npx -y mcp-design-system-extractor. No authentication is required. It communicates with MCP clients over stdio and speaks the protocol natively. Version v1.2.0 is released under the MIT license, with source code at freema/mcp-design-system-extractor on GitHub.

Mcp Design System Extractor is listed in the Design category on mcp.site and works with any MCP client including Claude Desktop, Claude Code, Cursor, VS Code, Windsurf, and Zed. If you maintain this server, claim the listing to verify ownership and keep information up to date.

Installation

// claude_desktop_config.json
{
  "mcpServers": {
    "mcp_design_system_extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ]
    }
  }
}