mcp-design-system-extractor
Installation
How to install and set up mcp-design-system-extractor
Installation
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 DesktopEnvironment Setup
export STORYBOOK_URL=http://localhost:6006Claude Desktop Configuration
Add to Claude Desktop config file:
{
"mcpServers": {
"design-system-extractor": {
"command": "node",
"args": ["/path/to/mcp-design-system-extractor/dist/index.js"],
"env": {
"STORYBOOK_URL": "http://localhost:6006"
}
}
}
}Claude Code Configuration
Add to .claude_code_config.json:
{
"mcpServers": {
"design-system-extractor": {
"command": "npm",
"args": ["run", "dev"],
"env": {
"STORYBOOK_URL": "http://localhost:6006"
}
}
}
}Development Setup
git clone https://github.com/freema/mcp-design-system-extractor.git
cd mcp-design-system-extractor
npm install
npm run buildNotes
- Ensure your Storybook instance is running before using the MCP server
- The server uses Puppeteer for dynamic JavaScript rendering
- Works with built Storybook distributions from storybook.js.org