MCP.Market

Design System Extractor MCP server

by freema·io.github.freema/mcp-design-system-extractor·v1.2.0·69 stars
No reviews yet

MCP server for Storybook design systems — extract component HTML, styles and metadata.

A85/100grade A
Write a reviewInstall
What users say
No reviews yet
Be the first
Safety scan
A85/100

full report

Adoption
Growing

69 stars193 downloads/wk

Reviews

Write one

Nobody has reviewed Design System Extractor yet.

If you have run it, two minutes of your experience saves the next person an afternoon.

Design System Extractor tools (9, 1 write)

write = sends, deletes, buys or posts

Read from the package source without running it. The installed server may list more.

  • get_component_dependencies

    Analyze rendered HTML to find which other components a given component internally uses by detecting React components, web components, and CSS class patterns

  • get_component_html

    Extract HTML from a component. Default is async (returns job_id, poll with job_status). Set async=false for sync mode. Use variantsOnly=true to get variant list.

  • get_external_css

    Extract design tokens from CSS files. DEFAULT BEHAVIOR: Returns ONLY tokens and file statistics (small response ~1-3K tokens). Does NOT return CSS content by default to avoid token limits. For full CSS content, explicitly set includeFullCSS=true and maxContentSize. Perfect for analyzing design system tokens without hitting response size limits.

  • get_theme_info

    Get design system theme information (colors, spacing, typography, breakpoints)

  • job_cancelwrite action

    Cancel a queued or running job. Returns whether the cancellation was successful.

  • job_list

    List all jobs with their status. Shows what each job is processing and whether it is still running.

  • job_status

    Check the status of an async job. Returns status, progress, and result when completed. Poll this endpoint to get results from get_component_html.

  • list_components

    List all UI components available in your design system/Storybook. Returns components like modals, dialogs, buttons, forms, cards, etc. with their names, categories, and variant count. Use this to explore what components are available for building UI features. Use category="all" or omit category parameter to list all components. Supports pagination to handle large component libraries.

  • search_components

    Search design system components by name, title, category, or purpose. Find UI components like modals, dialogs, buttons, forms, cards, etc. Supports text search (query) and semantic search by purpose. Available purposes: "form inputs", "navigation", "feedback", "data display", "layout", "buttons", "progress", "media". Supports pagination for large result sets.

Public scan report

scanner v0.1.9 · 2026-09-24 · same rubric, same numbers if you re-run it

1 medium
  • Code scan2 source files scanned20/25
  • –Live reliabilityno gateway calls yet and no remote to proben/a
  • –Tool poisoningtools not inspected (local package is not executed); not countedn/a
  • Auth qualitylocal package, no credentials required12/15
  • Maintenancelast push 5 days ago15/15
  • Maintainer identityregistry namespace matches repository owner; GitHub account older than a year8/10

Findings (1)

  • mediumeval / new Function usedexec.eval
    dist/index.js: …ode, sch); const makeValidate = new Function(`${names_1.default.self}`, `${names_1.de…
Overall 85/100. Components that don't apply are left out of the denominator. Any critical finding is an F.RubricAppeal a findingJSON

How Design System Extractor compares

Against every graded Scraping and browsing MCP server, from our own scans and uptime checks. Updated after each scan run.

Safety score
85/100
higher than 65% of 866 Scraping and browsing servers
Tools
9
the typical Scraping and browsing server has 6
Tools that change things
11%
typical: 0%. Fewer write tools means less an agent can break
GitHub stars
69
more than 90% of 583 Scraping and browsing servers
Downloads a week
193
more than 69% of 309 Scraping and browsing servers with a package

What its tools let an agent do: 8 read · 1 change

Install Design System Extractor in Claude Code, Cursor or VS Code

Runs npx -y mcp-design-system-extractor on your machine. Read the scan report first; the gateway never runs local packages.

claude mcp add mcp-design-system-extractor -- npx -y mcp-design-system-extractor
Add to Cursor

What the publisher says

From the Design System Extractor repository's README, as published. We do not edit it. Read it on GitHub

MCP Design System Extractor

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.

Installation

Using Claude CLI (Recommended)

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=http://localhost:6006

With self-signed certificate:

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=https://my-storybook.example.com \
  --env NODE_TLS_REJECT_UNAUTHORIZED=0

Using npm

npm install -g mcp-design-system-extractor

Then configure in your MCP client (see Environment Variables).

From Source

git clone https://github.com/freema/mcp-design-system-extractor.git
cd mcp-design-system-extractor
npm install && npm run build
npm run setup  # Interactive setup for Claude Desktop

Key Dependencies

  • Puppeteer: Uses headless Chrome for dynamic JavaScript component rendering
  • Chrome/Chromium: Required for Puppeteer (automatically handled in Docker)
  • Works with built Storybook distributions

Features

  • List Components: Get all available components from your Storybook with compact mode
  • Extract HTML: Get the rendered HTML of any component (async or sync mode)
  • Search Components: Find components by name, title, category, or purpose
  • Component Dependencies: Analyze which components are used within other components
  • Theme Information: Extract design system theme (colors, spacing, typography)
  • External CSS Analysis: Fetch and analyze CSS files to extract design tokens
  • Async Job Queue: Long-running operations run in background with job tracking

Environment Variables

Example with self-signed certificate:

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "STORYBOOK_URL": "https://my-storybook.example.com",
        "NODE_TLS_REJECT_UNAUTHORIZED": "0"
      }
    }
  }
}

Usage

See DEVELOPMENT.md for detailed setup instructions.

Available Tools (9 total)

Core Tools

  1. listcomponents**
  • Lists all available components from the Storybook instance
  • Use compact: true for minimal output (reduces response size)
  • Filter by category parameter
  • Supports pagination with page and pageSize (default: 20)
  1. getcomponenthtml
  • Extracts HTML from a specific component story
  • Async by default: Returns jobid, use jobstatus to poll for results
  • Set async: false for synchronous mode (uses timeout parameter)
  • Use variantsOnly: true to get list of available variants (sync, fast)
  • Optional includeStyles: true for CSS extraction (Storybook CSS filtered out)
  • Story ID format: "component-name--story-name" or just "component-name" (auto-resolves to default variant)
  1. searchcomponents**
  • Search components by name, title, category, or purpose
  • query: Search term (use "*" for all)
  • purpose: Find by function ("form inputs", "navigation", "feedback", "buttons", etc.)
  • searchIn: "name", "title", "category", or "all" (default)
  • Supports pagination with page and pageSize

Component Analysis Tools

Shortened. The full README is on GitHub.

Nothing above is checked by us. What we check is on the safety report.

Design System Extractor: common questions

Is Design System Extractor MCP server safe?
Yes, by our scan: it is graded A (85/100). Read the Design System Extractor safety report
How do I install Design System Extractor?
It runs on your machine. Copy the Claude Code, Cursor, VS Code or Claude Desktop config from the install section.
Does Design System Extractor need an API key?
No secret keys are declared. It reads 3 settings from the environment.
Is Design System Extractor maintained?
The last commit was 46 days ago (2026-09-19). The latest release is v1.2.0.
What can I use instead of Design System Extractor?
Servers from other publishers that do the same job: Plumb MCP server, Rendex: Rendering API for Images, PDFs & Content Extraction MCP server and Brightdata MCP server.
How does Design System Extractor compare with other Scraping and browsing MCP servers?
safety score 85/100 (higher than 65% of 866 Scraping and browsing servers); tools 9 (the typical Scraping and browsing server has 6); tools that change things 11% (typical: 0%. Fewer write tools means less an agent can break). Full comparison.

Alternatives to Design System Extractor

Same job from other publishers: the closest match first, then the best rated.

  • Plumb
    Two-way Figma MCP: extract + verify design-to-code, or generate on-brand Figma pages from a prompt.
    C
  • Rendex: Rendering API for Images, PDFs & Content Extraction
    Render HTML, Markdown, or URLs to images, PDF, or branded artifacts; extract and watch pages.
    A
  • Brightdata
    Bright Data's Web MCP server enabling AI agents to search, extract & navigate the web
    B
  • Browser Use
    Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.
    A
  • Skyvern
    AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
    A

More from freema →