The value is grounding UI work in the actual design system: get_component_html returns the rendered markup a component produces, and get_component_dependencies shows what it composes internally, so generated code reuses your components rather than reinventing buttons and cards. The token-extraction default is a nice touch — get_external_css returns only the tokens and stats unless you ask for the full CSS, which is what keeps a design-system read from flooding the context.
A server that extracts component information from a Storybook design system: 9 tools that list and search components, pull their rendered HTML, analyze what they depend on, and read theme and CSS design tokens. It renders dynamic components with headless Chrome.
- list_components enumerates every component in the Storybook with its name, category and variant count, and search_components finds them by name or by purpose — form inputs, navigation, feedback, data display, layout, buttons
- get_component_html extracts a component's rendered HTML, defaulting to async (returns a job_id you poll) with a sync mode available, and variantsOnly=true to get the variant list
- get_component_dependencies reads the rendered HTML to find which other components it uses internally, detecting React components, web components and CSS class patterns
- get_theme_info returns the design system's colors, spacing, typography and breakpoints, and get_external_css extracts design tokens from CSS files — by default just the tokens and file stats to stay small, with includeFullCSS=true when you want the CSS itself
- Async jobs are first-class: job_status polls a running extraction, job_list shows all jobs and their state, and job_cancel stops a queued or running one
A running Storybook instance, its base URL in STORYBOOK_URL (default http://localhost:6006). Node, run as npx mcp-design-system-extractor over stdio; it uses Puppeteer's headless Chrome to render dynamic components. Set NODE_TLS_REJECT_UNAUTHORIZED=0 if the Storybook host has a self-signed certificate.
One command — npx -y mcp-design-system-extractor