Mcp Design System Extractor
MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.
Overview
The MCP Design System Extractor is an innovative tool designed to seamlessly connect with Storybook instances, making it easier for developers and designers to extract and utilize component information. By leveraging the Model Context Protocol (MCP), it enables the extraction of HTML, styles, and component metadata, creating an efficient workflow for managing design systems. Whether you’re working on a new project or maintaining an existing one, this tool streamlines the process of accessing and analyzing essential design components.
The extractor is particularly useful for teams that rely on Storybook to document their UI components. With key features that enhance component discovery, analysis, and theme extraction, users can focus more on building and less on the tedious task of manual information retrieval. This tool promises to elevate the way design systems are managed, ensuring that teams can maintain consistency and efficiency in their workflow.
Features
- List Components: Easily retrieve all available components from your Storybook using compact mode for minimal output.
- Extract HTML: Obtain the rendered HTML of any component in both asynchronous and synchronous modes.
- Search Components: Quickly find components by name, title, category, or purpose, enhancing overall discoverability.
- Component Dependencies: Analyze which components are utilized within others to understand internal relationships and dependencies.
- Theme Information: Extract vital design system theming details such as colors, spacing, typography, and breakpoints.
- External CSS Analysis: Fetch and evaluate CSS files to extract essential design tokens, streamlining style management.
- Async Job Queue: Handle long-running operations efficiently with background job tracking for better performance.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Web Components
Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.