Extracts component information, HTML, and styles from Storybook design systems for AI assistant interaction.
The Design System tool acts as a Model Context Protocol (MCP) server, bridging AI assistants with your Storybook design system. It connects directly to a running Storybook instance, pulling out rich details like component HTML, styles, metadata, and API documentation. This enables AI to understand, analyze, and even generate code based on your design system, facilitating tasks like design system adoption, component refactoring, and automated UI development.
Key Features
01Extract rendered HTML and styles for any component variant
02Analyze component props, dependencies, and composition examples
03Search components by name, purpose, or category
04Get design system theme information (colors, typography, spacing)
05Fetch and analyze external CSS files for design tokens
061 GitHub stars
Use Cases
01Enable AI assistants to understand and interact with Storybook design systems
02Extract design tokens and theme information for integration or analysis
03Automate design system adoption by extracting component details for AI-guided refactoring
04Facilitate code generation and UI development by providing AI with precise component information
