AcademyMCP serversDesign and media

MCP Design System Extractor

Design system and frontend teams that want an assistant to read their existing component library.

  • Recommendedour rating
  • 70gitHub stars
  • MITlicence
  • 22 days agolast update
claude mcp add design-system -e STORYBOOK_URL=https://my-storybook.example.com -e NODE_TLS_REJECT_UNAUTHORIZED=0 -- node /path/to/dist/index.js
README.md

Loading the file...

What it does

An MCP server that connects to a Storybook instance and pulls component details. For each component it returns the HTML, styles, props, dependencies, theme tokens and metadata. Puppeteer with headless Chrome renders components that depend on JavaScript.

Use cases

  1. 01Listing the props of a component before building a page
  2. 02Extracting theme tokens to review a brand build
  3. 03Checking a component's dependencies before a refactor

Questions about
MCP Design System Extractor.

What is MCP Design System Extractor used for?

Design system and frontend teams that want an assistant to read their existing component library. An MCP server that connects to a Storybook instance and pulls component details. For each component it returns the HTML, styles, props, dependencies, theme tokens and metadata. Puppeteer with headless Chrome renders components that depend on JavaScript.

How do I install MCP Design System Extractor?

Run this in your terminal: claude mcp add design-system -e STORYBOOK_URL=https://my-storybook.example.com -e NODE_TLS_REJECT_UNAUTHORIZED=0 -- node /path/to/dist/index.js

Is MCP Design System Extractor open source?

Yes. The code is on GitHub (freema/mcp-design-system-extractor) under the MIT licence.

Is MCP Design System Extractor safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.