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.
This tool helps frontend developers, UI/UX designers, and anyone building web interfaces to deeply understand and work with existing design systems. It connects to your Storybook instance, extracts rendered component HTML, analyzes styles like colors and typography, and identifies component dependencies. The output provides structured information about your design system, making it easier to adopt existing components, refactor parts of your UI, or migrate designs across frameworks.
Available on npm.
Use this if you need to programmatically access, analyze, or integrate information from your Storybook-driven design system into other tools or workflows.
Not ideal if you are looking for a visual editor or a tool to create new components from scratch, as this focuses on extracting information from an existing Storybook.
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.
Compare
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.
MetroStar/comet
React with TypeScript Component Library based on USWDS 3.0
hanzili/comet-mcp
MCP Server connecting to Perplexity Comet browser
vectorize-io/vectorize-mcp-server
Official Vectorize MCP Server