freema/mcp-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.
Uses Puppeteer to headlessly render Storybook components and extract rendered HTML with computed styles, supporting both async job queuing for large components and synchronous extraction. Provides nine MCP tools including component discovery, dependency analysis, and design token extraction from CSS, with configurable Storybook URL and optional SSL bypass for self-signed certificates. Integrates directly with Claude Desktop via the Claude CLI and works with any built Storybook instance.
Available on npm.
Stars
56
Forks
13
Language
TypeScript
License
MIT
Category
Last pushed
Feb 04, 2026
Commits (30d)
0
Dependencies
4
Get this data via API
curl "https://pt-edge.onrender.com/api/v1/quality/mcp/freema/mcp-design-system-extractor"
Open to everyone — 100 requests/day, no key needed. Get a free key for 1,000/day.
Related servers
Jpisnice/shadcn-ui-mcp-server
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and...
Kargatharaakash/stitch-mcp
Universal MCP Server for Google Stitch. Connect AI agents to your UI designs.
hanzili/comet-mcp
MCP Server connecting to Perplexity Comet browser
heroui-inc/heroui-mcp
⚙️ MCP servers for HeroUI React v3 and HeroUI Native.
MetroStar/comet
React with TypeScript Component Library based on USWDS 3.0