freema

mcp-design-system-extractor

Name: freema/mcp-design-system-extractor
Rating: 5 (60 reviews)
Author: freema

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 Servers60 stars13 forks● TypeScriptMITUpdated 2mo ago

ClaudeWave Trust Score

82/100

✓ Trusted

Passed

✓Open-source license (MIT)
✓Recently active
✓Clear description
✓Topics declared

Last scanned: 4/14/2026

Install in Claude Desktop

Method detected: Manual

{
  "mcpServers": {
    "mcp-design-system-extractor": {
      "command": "node",
      "args": ["/path/to/mcp-design-system-extractor/dist/index.js"]
    }
  }
}

1. Copy the snippet above.

2. Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) or %APPDATA%\Claude\claude_desktop_config.json (Windows).

3. Replace any <placeholder> values with your API keys or paths.

4. Restart Claude Desktop. The MCP server appears automatically.

💡 Clone https://github.com/freema/mcp-design-system-extractor and follow its README for install instructions.

Use cases

✨ Design🎨 Creative

About