mcp-design-system-extractor and design-critique-mcp

About mcp-design-system-extractor

freema/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.

Uses Puppeteer to headlessly render Storybook components and extract rendered HTML with computed styles, supporting both async job queuing for large components and synchronous extraction. Provides nine MCP tools including component discovery, dependency analysis, and design token extraction from CSS, with configurable Storybook URL and optional SSL bypass for self-signed certificates. Integrates directly with Claude Desktop via the Claude CLI and works with any built Storybook instance.

About design-critique-mcp

haasonsaas/design-critique-mcp

MCP server for comprehensive visual design analysis - composition, color harmony, typography, and accessibility compliance