Design SystemCAUTION
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
From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.
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 Que
1b7fdae43a14OBSERVED · 2026-10-07Connect
Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.
claude mcp add mcp-design-system-extractor -- npx -y [email protected]
Exposed tools (8)
8 read · 0 write · 0 destructive.
| Tool | Risk | Description |
|---|---|---|
get_component_dependencies | read | 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 | read | 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_theme_info | read | Get design system theme information (colors, spacing, typography, breakpoints) |
job_cancel | read | Cancel a queued or running job. Returns whether the cancellation was successful. |
job_list | read | List all jobs with their status. Shows what each job is processing and whether it is still running. |
job_status | read | 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 | read | 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= |
search_components | read | 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: |
Trust audit
CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.
| Layer | What it checks | Result |
|---|---|---|
| L0 | Provenance & inventory | PASS |
| L1 | Static analysis of the code | FAIL |
| L2 | Instruction surface (what it tells the agent) | PASS |
| L3 | Class-specific surface | PASS |
| L4 | Behavioural (sandbox) | SKIPPED |
What the source does
- Filesystem
- none-observed
- Network
- declared (8 observation(s))
- Shell
- declared (2 observation(s))
- Dependencies
- not all pinned
- Secrets in source
- none-found
Findings (9)
'Set NODE_TLS_REJECT_UNAUTHORIZED=0 environment variable before starting the MCP server (not recommended for production)',
.prettierignore
import type { ComponentHTML } from '../../src/types/storybook.js';import { OUTPUT_SCHEMAS } from '../../../src/config/output-schemas.js';} from '../../helpers/storybook-fixture.js';
vi.mock('../../../src/utils/storybook-client.js', () => ({const toolsModule = await import('../../../src/tools/index.js');@modelcontextprotocol/sdk, node-html-parser, puppeteer, zod, @eslint/js, @types/node, @vitest/coverage-v8, @vitest/ui
assets/demo.gif
Gates applied: no_behavioural_pass.
1b7fdae43a14full audit observations/trust-audit/mcp-server/freema__design-system-1.json · Report an issue / request a re-scanAudit history
Every audit this server has had. A grade with a past is a grade somebody is still checking.
| Date | Source | Verdict | Grade | Score | Change |
|---|---|---|---|---|---|
| 2026-10-07 | 1b7fdae43a14 | CAUTION | B | 89 | first audit |
Questions
What is the Design System MCP server?
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.
What tools does Design System expose?
8 in total: 8 read-only, 0 that write, and 0 that can delete or overwrite. Every one is listed on this page with its risk.
Is Design System safe to connect to an agent?
With care. The audit graded it B (89/100) and found 9 things worth knowing before you trust this server, listed below with the exact line each was found on.
What credentials does Design System need?
No credential environment variables were found in its source, so it appears to need none.
How does Design System run?
It speaks stdio, so it runs as a local process your client starts. It is published on npm as mcp-design-system-extractor at 1.2.0.
How current is this page?
The grade is for one exact copy of the source (1b7fdae43a14), read on 2026-10-07. The repository is watched and re-audited when it changes.