Design System
Extracts component information, HTML, and styles from Storybook design systems for AI assistant interaction.
Acerca de
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.
Características Principales
- Extract rendered HTML and styles for any component variant
- Analyze component props, dependencies, and composition examples
- Search components by name, purpose, or category
- Get design system theme information (colors, typography, spacing)
- Fetch and analyze external CSS files for design tokens
- 1 GitHub stars
Casos de Uso
- Enable AI assistants to understand and interact with Storybook design systems
- Extract design tokens and theme information for integration or analysis
- Automate design system adoption by extracting component details for AI-guided refactoring
- Facilitate code generation and UI development by providing AI with precise component information