mcp-design-system-extractor
by freema
Overview
Extracts UI component information, HTML, CSS, and design tokens from Storybook instances for analysis and integration into development workflows.
Installation
npx mcp-design-system-extractor@latestEnvironment Variables
- STORYBOOK_URL
- NODE_TLS_REJECT_UNAUTHORIZED
- NODE_ENV
- CI
- DEBUG
Security Notes
The server connects to external Storybook instances and uses Puppeteer to render dynamic content. Puppeteer is launched with several security-disabling flags (`--no-sandbox`, `--disable-setuid-sandbox`, `--disable-web-security`, `--ignore-certificate-errors`), which significantly reduce the isolation and security of the browsing context. Additionally, the `NODE_TLS_REJECT_UNAUTHORIZED=0` environment variable, used for self-signed certificates, bypasses critical SSL/TLS security checks, making connections vulnerable to man-in-the-middle attacks. While `get_external_css` includes domain validation, these broader configurations expose the system to risks, especially if connecting to untrusted or compromised Storybook instances. The dependency `pac-resolver` (indirectly via `proxy-agent`) uses `degenerator`, which can involve `eval` for PAC file processing, adding a minor attack surface, though typically constrained.
Similar Servers
shadcn-ui-mcp-server
Provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata across multiple frameworks (React, Svelte, Vue, React Native) for UI development and code generation.
figma-console-mcp
Provides AI assistants with real-time console access, visual debugging, design system extraction, and design creation capabilities for Figma.
flowbite-mcp
Enables AI assistants to create UI components using the Flowbite library and generate custom Tailwind CSS themes.
daisyui-mcp
Provides DaisyUI component documentation to AI assistants via the Model Context Protocol (MCP) to help in generating UI code.