Name: MCP Design System Extractor: AI Agent Skill
Rating: 8 (1 reviews)
Author: freema

Question 1

What is MCP Design System Extractor?

Accepted Answer

MCP Design System Extractor is a free, open-source AI agent skill. A Model Context Protocol (MCP) server that extracts component information from Storybook design systems. Connects to Storybook instances and extracts HTML, styles, and component metadata. With self-signed certificate: Then configure in your MCP client (see Environment Variables). - Puppeteer: Uses headless Chrome for dynamic JavaScript component rendering - Chrome/Chromium: Required for Puppeteer

Question 2

How do I install MCP Design System Extractor?

Accepted Answer

Install MCP Design System Extractor with a single command: npx mdskills install freema/mcp-design-system-extractor. This downloads the skill files into your project and your AI agent picks them up automatically.

Question 3

What platforms support MCP Design System Extractor?

Accepted Answer

MCP Design System Extractor works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Gemini Cli, Amp, Roo Code, Goose. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

MCP Design System Extractor

Select your AI client

Generic install (all platforms)