{"repo":"freema/mcp-design-system-extractor","free":true,"listed":false,"github":"https://github.com/freema/mcp-design-system-extractor","clone":"git clone https://github.com/freema/mcp-design-system-extractor.git","description":"MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.","language":"TypeScript","stars":69,"topics":["design-system","mcp","mcp-server"],"license":"MIT","category":"mcp-servers","readme_excerpt":"MCP Design System Extractor A Model Context Protocol (MCP) server that extracts component information from Storybook design systems. Connects to Storybook instances and extracts HTML, styles, and component metadata. Installation Using Claude CLI (Recommended) With self-signed certificate: Using npm Then configure in your MCP client (see Environment Variables). From Source Key Dependencies - Puppeteer : Uses headless Chrome for dynamic JavaScript component rendering - Chrome/Chromium : Required for Puppeteer (automatically handled in Docker) - Works with built Storybook distributions Features - List Components : Get all available components from your Storybook with compact mode - Extract HTML : Get the rendered HTML of any component (async or sync mode) - Search Components : Find components by name, title, category, or purpose - Component Dependencies : Analyze which components are used within other components - Theme Information : Extract design system theme (colors, spacing, typography) - External CSS Analysis : Fetch and analyze CSS files to extract design tokens - Async Job Queue : Long-running operations run in background with job tracking Environment Variables Variable Description Default ---------- ------------- --------- STORYBOOK URL URL of your Storybook instance http://localhost:6006 NODE TLS REJECT UNAUTHORIZED Set to 0 to skip SSL certificate verification (for self-signed certs) 1 Example with self-signed certificate: Usage See DEVELOPMENT.md for detailed setup in","default_branch":null,"files":null,"tree":[],"storefront":"/r/freema","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/freema/mcp-design-system-extractor/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}