freema/mcp-design-system-extractor

The MCP Design System Extractor fills a critical gap for developers who rely on AI assistants to navigate and consume component libraries. When teams ship design systems through Storybook, the information lives in a browser‑based UI that is great for humans but hard for language models to parse. This server bridges that divide by programmatically querying a Storybook instance and returning structured, machine‑readable data about every component, its variants, props, dependencies, and the overarching theme. By exposing this knowledge via MCP, Claude or other AI assistants can answer questions like “Show me the primary button with a loading state” or “Which layout components support responsive breakpoints?” without manual inspection.

At its core, the extractor uses headless Chrome (Puppeteer) to render components exactly as they appear in Storybook, capturing both static HTML and dynamic JavaScript output. It then parses the resulting DOM to pull out CSS styles, component props (including types and defaults from Storybook’s argTypes), and even the design tokens that define colors, spacing, typography, and breakpoints. This level of detail enables AI tools to generate accurate snippets, provide documentation, or suggest alternative components based on purpose (e.g., navigation, feedback).

Key capabilities include:

• Component discovery: List all components with categories and pagination.
• Variant extraction: Retrieve every story state for a component, including its unique ID and parameters.
• HTML rendering: Return the fully rendered markup for any variant, preserving dynamic behavior.
• Prop documentation: Export a component’s API surface with type information and default values.
• Dependency analysis: Identify nested components used within a component’s markup, aiding modular understanding.
• Theme introspection: Pull design tokens and layout primitives to inform style‑aware code generation.
• Search & filtering: Find components by name, title, category, or purpose with case‑insensitive matching.

Real‑world scenarios benefit developers in several ways. A front‑end engineer can ask an AI assistant to “give me a form with validation” and receive a ready‑to‑copy snippet that includes the correct component hierarchy, props, and styling references. Product designers can query “what are all available icon components?” and instantly see a list with thumbnails and usage examples. Continuous integration pipelines can leverage the server to generate up‑to‑date component documentation or run automated visual regression tests against rendered HTML.

Integration into AI workflows is straightforward: the MCP server exposes its tools as JSON endpoints, so any client that understands MCP can invoke them directly. For example, a Claude Desktop setup can automatically call during a conversation, then drill down with or as needed. Because the server operates against a live Storybook instance, it stays in sync with ongoing development, ensuring AI assistants always reference the current design system state.

In summary, the MCP Design System Extractor empowers AI assistants to treat Storybook as a first‑class data source, turning a browser UI into a rich, queryable knowledge base. Its blend of rendering fidelity, comprehensive metadata extraction, and search flexibility makes it a standout tool for teams that want AI to seamlessly understand, document, and generate code from their design systems.