Design System Extractor MCP
mcp-design-system-extractor
An MCP server pulling component information and design tokens from Storybook and analyzing CSS. One-command connection with claude mcp add
- 70 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- Reads data from your Storybook
- Does not generate stories
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/mcp-design-system-extractorDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Reads data from your Storybook
- Does not generate stories
This is third-party code. Review the repository files before installing.
What it does
Design System Extractor MCP gives an agent component information and design tokens from Storybook, including CSS analysis. Connection to Claude Code: `claude mcp add design-system npx mcp-design-system-extractor@latest`, global installation `npm install -g mcp-design-system-extractor`. Version 1.2.0 from 27.07.2026, MIT license.
Who it is for. For developers who maintain a design system in Storybook and want an agent to know its components and tokens.
Good fit when
- An agent must know your design system's components
- You need to extract tokens from Storybook
- You need CSS analysis of components
Not a fit when
- There is no Storybook in the project
- You need story generation: the server reads and does not create
Example request
Extract from our Storybook the list of components with variants and color tokens, then pick ready ones for a sign-in formMCP
- Transport
- stdio
- Authentication
- not required
Limitations
The server reads data from your Storybook, so access is minimal: check the address it connects to. It extracts information but does not generate stories.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What does the server do?
It pulls component information and design tokens from Storybook and analyzes CSS.
How do I connect it?
claude mcp add design-system npx mcp-design-system-extractor@latest.
Does it create stories?
No, it only reads Storybook data.
Discussion
No questions or reviews yet.
Related
MCP serversStorybook MCP
storybook-mcp
An MCP server of Storybook documentation and components for an agent. Launched through npx, Chromium installs in the background on first run
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
Inspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
Story UI
story-ui
Storybook story generation with AI for any framework and design system, with an MCP server. An Anthropic
An MCP server and plugin to build UI with the agent: curated design systems, UI prompts and layout variations
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Design System Extractor MCP (this entry) | no | not required | 70 | |
| Story UI | no | 234 | AI Storybook story generation, a provider key is needed | |
| Storybook MCP | no | not required | 46 | Storybook documentation and components for an agent |
README in short
The README describes an MCP server extracting components and tokens from Storybook. MIT license.