# io.github.freema/mcp-design-system-extractor (npm · mcp-design-system-extractor)

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

- Trust score: 75/100 (medium)
- Change this week: +67
- Registry status: active
- Liveness: live
- Owner verified: no
- Last scored: 2026-08-03

## Components

- npm · `mcp-design-system-extractor`: 75/100 (this document), [markdown](https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor.md), [page](https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor)

## Channel facts

- Registry: `npm`
- Package: `mcp-design-system-extractor`
- Version: `1.2.0`
- Transport: `stdio`

## Trust breakdown

How this component scores in each security and reliability category. Every signal is checked automatically from public evidence about the published package, including repeated runs of it in an isolated sandbox, and we only credit what we can confirm. Scores are 0–100 per category. Scoring method: https://verifymcp.io/docs/scoring (what has changed: https://verifymcp.io/docs/scoring/changelog)

Scored 2026-08-03.

- **Supply Chain Security**: 87/100
  - No malware found by supply-chain analysis.
  - Only part of the dependency tree could be resolved (131 of 135), so this covers what we could see, not the whole tree.
  - No install/post-install scripts declared.
  - Only part of the dependency tree could be resolved (131 of 135), so this covers what we could see, not the whole tree.
- **Provenance & Transparency**: 97/100
  - Source repository is publicly reachable at the declared URL.
  - Cryptographically verified build provenance (signed, bound to freema/mcp-design-system-extractor).
  - Clear OSI-approved license (MIT).
  - Actively maintained (last published 6 days ago).
  - Disclosure check failed: no security disclosure policy was found in the source repository.
- **Schema Quality & AI Usability**: 74/100
  - AI-judged instruction clarity (excellent).
  - Context-footprint check failed: tool/resource definitions use about 1128 tokens (~125/item across 9 items; 9 tools + 0 resources), over budget; trim descriptions and params.
  - Usage-examples check failed: none of the tools include examples.
- **Stability & Change Management**: 0/100
  - Stability not yet verified: not enough scan history yet (needs a 30-day window).
- **Tool Coverage**: 100/100
  - 100% of tools have a non-trivial description (not blank, and not just the tool's name).
  - 100% of tool parameters carry a description.
- **Capabilities**: 100/100
  - Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.

**Unverified: 1 category.** A category scored 0 because we could not verify it: a data source with nothing on this package, evidence we could not reach, or a check we could not run. We only credit what we can confirm.

## Install

### Claude

```bash
claude mcp add freema-mcp-design-system-extractor -- npx -y mcp-design-system-extractor
```

### Codex

```bash
codex mcp add freema-mcp-design-system-extractor -- npx -y mcp-design-system-extractor
```

### opencode

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "freema-mcp-design-system-extractor": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "mcp-design-system-extractor"
      ],
      "enabled": true
    }
  }
}
```

### OpenClaw

```bash
openclaw mcp add freema-mcp-design-system-extractor --command npx --arg -y --arg mcp-design-system-extractor
```

### Hermes

```yaml
mcp_servers:
  freema-mcp-design-system-extractor:
    command: "npx"
    args: ["-y", "mcp-design-system-extractor"]
```

### Other

```json
{
  "mcpServers": {
    "freema-mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ]
    }
  }
}
```

## Changelog

Every change recorded for this component, newest first. Days that predate change tracking, or that we cannot explain, say so: "we were watching and nothing happened" and "we were not watching" are different claims.

### 2026-08-03 (score 75, +40)

- [security improvement] Install scripts: unverified → pass
- [security improvement] Provenance: unverified → pass
- [security improvement] Known CVEs: unverified → partial
- [security] Stability: Stability not yet verified: not enough scan history yet (needs a 30-day window).
- [security] The attested source repository moved: freema/mcp-design-system-extractor
- [functional improvement] Schema quality: unverified → excellent
- [functional improvement] License: unverified → pass
- [functional improvement] Dependency health: unverified → partial
- [functional improvement] Maintenance: unverified → pass
- [functional improvement] MCP protocol: unverified → pass
- [functional] Licence: MIT

### 2026-08-02 (score 35, +15)

- [security improvement] Malware scan: unverified → pass

### 2026-07-31 (score 20, +14)

- [functional] We updated how we score, so this day's move reflects our rubric, not a change to the server

### 2026-07-30 (score 6, −1)

- [functional regression] Dependency health: partial → unverified

### 2026-07-28 (score 7, −1)

- [functional regression] Security disclosure: unverified → fail

### 2026-07-27 (score 8)

First indexed and scored.

## MCP tools (9)

### `list_components` (~192 tokens)

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.

Input parameters:

- `category` (string): Filter components by category path (e.g., "Components/Buttons", "Layout"). Use "all" or omit to list all components.
- `compact` (boolean): If true (default), returns compact format with only id, name, title, and variantCount. If false, returns full component data including all stories.
- `page` (number): Page number (1-based). Default is 1.
- `pageSize` (number): Number of components per page (1-100). Default is 20.

### `get_component_html` (~216 tokens)

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.

Input parameters:

- `async` (boolean): If true (default), returns job_id immediately - use job_status to poll for results. If false, waits for result synchronously.
- `componentId` (string, required): The story ID in format "component-name--story-name" (e.g., "button--primary") or component ID (e.g., "button") when using variantsOnly.
- `includeStyles` (boolean): Whether to include extracted CSS styles in the response. Storybook boilerplate CSS is filtered out. Default: false.
- `timeout` (number): Custom timeout in milliseconds (5000-60000). Only used in sync mode (async=false). Default is 15000ms.
- `variantsOnly` (boolean): If true, returns only the list of available variants/stories for the component (synchronous). Use component ID without story suffix.

### `search_components` (~254 tokens)

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.

Input parameters:

- `page` (number): Page number (1-based). Default is 1.
- `pageSize` (number): Number of components per page (1-100). Default is 20.
- `purpose` (string): Semantic search by purpose. Available: "form inputs", "navigation", "feedback", "data display", "layout", "buttons", "progress", "media". Can be combined with query.
- `query` (string): Text search query (e.g., "button", "form", "nav"). Use "*" to list all. Case-insensitive partial matching. Optional if purpose is provided.
- `searchIn` (string): Where to search: "name" (component name only), "title" (full path), "category" (grouping), or "all" (search everywhere, default)

### `get_component_dependencies` (~58 tokens)

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

Input parameters:

- `componentId` (string, required): The story ID of the component (e.g., "example-button--primary")

### `get_theme_info` (~44 tokens)

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

Input parameters:

- `includeAll` (boolean): Whether to include all CSS custom properties found (default: false)

### `get_external_css` (~213 tokens)

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.

Input parameters:

- `cssUrl` (string, required): URL of CSS file to analyze. IMPORTANT: Tool returns only design tokens by default (not CSS content) to avoid response size limits.
- `extractTokens` (boolean): Extract design tokens (colors, spacing, typography, etc.). Default: true. This is the main purpose of this tool.
- `includeFullCSS` (boolean): OPTIONAL: Set to true ONLY if you need the actual CSS content. WARNING: Large CSS files may hit token limits. Default: false (recommended).
- `maxContentSize` (number): OPTIONAL: Max CSS content characters when includeFullCSS=true. Default: 10000. Larger files will be truncated.

### `job_status` (~53 tokens)

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

Input parameters:

- `job_id` (string, required): The job ID returned from get_component_html

### `job_cancel` (~35 tokens)

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

Input parameters:

- `job_id` (string, required): The job ID to cancel

### `job_list` (~63 tokens)

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

Input parameters:

- `status` (string): Filter by status: "all" (default), "active" (queued/running), "completed" (completed/failed/cancelled)

## Diagnostics

Captured diagnostic sections: Provenance, Dependencies. The full working is on the page: https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor#diagnostics

## Score history

- 2026-08-03: 75
- 2026-08-02: 35
- 2026-08-01: 20
- 2026-07-31: 20
- 2026-07-30: 6
- 2026-07-28: 7
- 2026-07-27: 8

## Links

- npm package: https://www.npmjs.com/package/mcp-design-system-extractor
- Socket report: https://socket.dev/npm/package/mcp-design-system-extractor
- Repository: https://github.com/freema/mcp-design-system-extractor
- Changelog RSS feed: https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor/changelog.xml
- Changelog JSON feed: https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor/changelog.json
- HTML version of this page: https://verifymcp.io/servers/freema-mcp-design-system-extractor/mcp-design-system-extractor