Active
freema/mcp-design-system-extractor
MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems.
Install this MCP
Pick your client, then copy the config.
{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}{
"servers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}# Add to ~/.codex/config.toml (or .codex/config.toml in a trusted project) [mcp_servers.design-system] command = "node" args = ["/path/to/dist/index.js"] [mcp_servers.design-system.env] STORYBOOK_URL = "https://my-storybook.example.com" NODE_TLS_REJECT_UNAUTHORIZED = "0"
Set up with your agent
Uses the same client as above (Cursor). Paste into that agent.
Install the "freema/mcp-design-system-extractor" MCP for Cursor in this workspace.
1. Read official install docs: https://github.com/freema/mcp-design-system-extractor
2. Merge this JSON into .cursor/mcp.json (project) or ~/.cursor/mcp.json (global):
{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}
3. Required environment variables / secrets (ask the user; never invent secrets):
- STORYBOOK_URL (required): See repository README.
- NODE_TLS_REJECT_UNAUTHORIZED (required): See repository README.
4. Restart Cursor if needed, then run a smoke test (list tools or one safe call). Confirm with the user before writing secrets.
Catalog: https://averlo.xyz/launches/design-system-extractor.htmlInstall the "freema/mcp-design-system-extractor" MCP for Claude Desktop in this workspace.
1. Read official install docs: https://github.com/freema/mcp-design-system-extractor
2. Merge this JSON into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}
3. Required environment variables / secrets (ask the user; never invent secrets):
- STORYBOOK_URL (required): See repository README.
- NODE_TLS_REJECT_UNAUTHORIZED (required): See repository README.
4. Restart Claude Desktop if needed, then run a smoke test (list tools or one safe call). Confirm with the user before writing secrets.
Catalog: https://averlo.xyz/launches/design-system-extractor.htmlInstall the "freema/mcp-design-system-extractor" MCP for VS Code in this workspace.
1. Read official install docs: https://github.com/freema/mcp-design-system-extractor
2. Merge this JSON into .vscode/mcp.json:
{
"servers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}
3. Required environment variables / secrets (ask the user; never invent secrets):
- STORYBOOK_URL (required): See repository README.
- NODE_TLS_REJECT_UNAUTHORIZED (required): See repository README.
4. Restart VS Code if needed, then run a smoke test (list tools or one safe call). Confirm with the user before writing secrets.
Catalog: https://averlo.xyz/launches/design-system-extractor.htmlInstall the "freema/mcp-design-system-extractor" MCP for Windsurf in this workspace.
1. Read official install docs: https://github.com/freema/mcp-design-system-extractor
2. Merge this JSON into ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"design-system": {
"command": "node",
"args": [
"/path/to/dist/index.js"
],
"env": {
"STORYBOOK_URL": "https://my-storybook.example.com",
"NODE_TLS_REJECT_UNAUTHORIZED": "0"
}
}
}
}
3. Required environment variables / secrets (ask the user; never invent secrets):
- STORYBOOK_URL (required): See repository README.
- NODE_TLS_REJECT_UNAUTHORIZED (required): See repository README.
4. Restart Windsurf if needed, then run a smoke test (list tools or one safe call). Confirm with the user before writing secrets.
Catalog: https://averlo.xyz/launches/design-system-extractor.htmlInstall the "freema/mcp-design-system-extractor" MCP for Codex in this workspace. 1. Read official install docs: https://github.com/freema/mcp-design-system-extractor 2. Merge this TOML under [mcp_servers.*] into ~/.codex/config.toml (or .codex/config.toml in a trusted project): # Add to ~/.codex/config.toml (or .codex/config.toml in a trusted project) [mcp_servers.design-system] command = "node" args = ["/path/to/dist/index.js"] [mcp_servers.design-system.env] STORYBOOK_URL = "https://my-storybook.example.com" NODE_TLS_REJECT_UNAUTHORIZED = "0" 3. Required environment variables / secrets (ask the user; never invent secrets): - STORYBOOK_URL (required): See repository README. - NODE_TLS_REJECT_UNAUTHORIZED (required): See repository README. 4. Restart Codex if needed, then run a smoke test (list tools or one safe call). Confirm with the user before writing secrets. Catalog: https://averlo.xyz/launches/design-system-extractor.html
Try it
After install, paste one of these into your agent.
- Show me what freema/mcp-design-system-extractor can do
- Set up a simple workflow using freema/mcp-design-system-extractor
- List the tools available in freema/mcp-design-system-extractor
