freema/mcp-design-system-extractor

Overview

MCP server that lets AI assistants connect to Storybook design systems to extract component HTML and analyze styles. It helps with design system adoption and refactoring by providing structured access via the Model Context Protocol.

Best for

Best for
Teams using Storybook who want to automate design system tasks with AI assistants

Use cases

• Extracting component HTML from a Storybook library
• Analyzing style usage across design system components
• Assisting in migrating components to updated design tokens

How to use

Install

npm install -g mcp-design-system-extractor

Tools exposed

• STORYBOOK_URL
• NODE_TLS_REJECT_UNAUTHORIZED

Tested with

Claude Desktop

Notes

MCP server that lets AI assistants connect to Storybook design systems to extract component HTML and analyze styles. It helps with design system adoption and refactoring by providing structured access via the Model Context Protocol.

65 stars on GitHub. Last updated 2026-02-04. Licensed MIT.

Use cases

• Extracting component HTML from a Storybook library
• Analyzing style usage across design system components
• Assisting in migrating components to updated design tokens

Pros

• Directly integrates with existing Storybook workflows
• Uses MCP for standardized AI assistant interaction
• Open source and written in TypeScript

Cons

• Requires a running Storybook instance
• Limited to static extraction and analysis, no dynamic rendering
• Relatively small community (65 stars) may limit support

Indexed from awesome-mcp-servers-punkpeye and enriched against its public facts.