mcp design system extractor for VS Code
io.github.freema/mcp-design-system-extractor
MCP server for Storybook design systems — extract component HTML, styles and metadata.
client:VS Code
transport:stdio
runtime:npm
Install mcp design system extractor in VS Code
.vscode/mcp.json
{
"inputs": [
{
"type": "promptString",
"id": "storybook-url",
"description": "STORYBOOK_URL",
"password": true
},
{
"type": "promptString",
"id": "node-tls-reject-unauthorized",
"description": "NODE_TLS_REJECT_UNAUTHORIZED",
"password": true
},
{
"type": "promptString",
"id": "debug",
"description": "DEBUG",
"password": true
}
],
"servers": {
"mcp-design-system-extractor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
],
"env": {
"STORYBOOK_URL": "${input:storybook-url}",
"NODE_TLS_REJECT_UNAUTHORIZED": "${input:node-tls-reject-unauthorized}",
"DEBUG": "${input:debug}"
}
}
}
}VS Code prompts for each input the first time the server starts, so no secret is written to the file. VS Code docs