Lets agents extract component HTML, styles, props, dependencies and theme tokens from Storybook design systems.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add design-system-extractor -- npx -y mcp-design-system-extractor~/.codex/config.toml
[mcp_servers.design-system-extractor]
command = "npx"
args = ["-y", "mcp-design-system-extractor"]
# codex mcp add design-system-extractor -- npx -y mcp-design-system-extractor~/.cursor/mcp.json
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}.vscode/mcp.json
{
"servers": {
"design-system-extractor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
]
}
}
}