Skip to content
verify mcp Beta VerifyMCP is currently in beta. If you notice any issues, email [email protected] and we’ll put it right.

io.github.freema/mcp-design-system-extractor

NPM · MCP-DESIGN-SYSTEM-EXTRACTOR · SCANNED AUG 3

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

Available components

npm · mcp-design-system-extractor 75
+67 this week 75 Trust /100
Trust breakdown (6 categories)

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. How we score →

Supply Chain Security87
  • No malware found by supply-chain analysis.Pass
  • Only part of the dependency tree could be resolved (131 of 135), so this covers what we could see, not the whole tree.Partial
  • No install/post-install scripts declared.Pass
  • Only part of the dependency tree could be resolved (131 of 135), so this covers what we could see, not the whole tree. View diagnostics → Partial
Provenance & Transparency97
  • Source repository is publicly reachable at the declared URL. View diagnostics → Pass
  • Cryptographically verified build provenance (signed, bound to freema/mcp-design-system-extractor). View diagnostics → Pass
  • Clear OSI-approved license (MIT).Pass
  • Actively maintained (last published 6 days ago).Pass
  • Disclosure check failed: no security disclosure policy was found in the source repository. See how to fix → Fail
Schema Quality & AI Usability74
  • AI-judged instruction clarity (excellent).Pass
  • 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. See how to fix → Fail
  • Usage-examples check failed: none of the tools include examples. See how to fix → Fail
Stability & Change Management0
  • Stability not yet verified: not enough scan history yet (needs a 30-day window).Unverified
Tool Coverage100
  • 100% of tools have a non-trivial description (not blank, and not just the tool's name).Pass
  • 100% of tool parameters carry a description.Pass
Capabilities100
  • Implements a supported MCP spec version (2025-11-25); the latest is 2026-07-28.Pass

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

Add this component to your MCP client. Where a client-specific snippet is available, pick your client below and copy it straight into your config; otherwise use the connection detail shown.

npm · mcp-design-system-extractor

# add to Claude Code
claude mcp add freema-mcp-design-system-extractor -- npx -y mcp-design-system-extractor
# add to Codex CLI
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
    }
  }
}
# add to OpenClaw
openclaw mcp add freema-mcp-design-system-extractor --command npx --arg -y --arg mcp-design-system-extractor
# ~/.hermes/config.yaml
mcp_servers:
  freema-mcp-design-system-extractor:
    command: "npx"
    args: ["-y", "mcp-design-system-extractor"]
// mcp.json
{
  "mcpServers": {
    "freema-mcp-design-system-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-design-system-extractor"
      ]
    }
  }
}
Changelog

Every change we have recorded for this component, newest first. Security-relevant changes are always shown. ▲ marks a change for the better, ▼ a change for the worse; unmarked changes are neutral.

  • 3 Aug 26 +40
    • Install scripts: unverified → pass ▲ security
    • Provenance: unverified → pass ▲ security
    • 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 security
    • Schema quality: unverified → excellent ▲ functional
    • License: unverified → pass ▲ functional
    • Dependency health: unverified → partial ▲ functional
    • Maintenance: unverified → pass ▲ functional
    • MCP protocol: unverified → pass ▲ functional
    • Licence: MIT functional
  • 2 Aug 26 +15
    • Malware scan: unverified → pass ▲ security
  • 31 Jul 26 +14
    • We updated how we score, so this day's move reflects our rubric, not a change to the server See what changed → functional
  • 30 Jul 26 −1
    • Dependency health: partial → unverified ▼ functional
  • 28 Jul 26 −1
    • Security disclosure: unverified → fail ▼ functional
  • 27 Jul 26 8

    First indexed and scored.

Diagnostics

Diagnostic detail from the automated scan of this channel: what the scanner observed at each step, so you can see exactly where a check passed or failed. It is informational only and never changes the trust score.

Captured 3 Aug 2026 · Analysed npm/[email protected]

Provenance verified

Ecosystem: npm · Outcome: verified

Reason: verified

Source repo:
freema/mcp-design-system-extractor
Certificate issuer:
https://token.actions.githubusercontent.com
Certificate SAN:
https://github.com/freema/mcp-design-system-extractor/.github/workflows/publish.yml@refs/tags/v1.2.0
Rekor log index:
2257273493
Predicate type:
https://slsa.dev/provenance/v1
Subject digest:
sha512:a13a9e36a90d56c2b56f1920b183027b49ae14ab6b289fb2122159923aa4f1b791f2cbd9695eebd72771a723a448c8ee04af05d86bbb3e39ce3676192
Discovery method:
attestation_endpoint
Dependencies 131 packages

131 packages in the resolved dependency tree · 129 deprecated · 32 stale.

The dependency tree was only partially resolved, so these counts may be incomplete.

MCP tools — 9 exposed · ~1,128 tokens

The tools this component advertises to a client, with an estimated token cost for each. Expand a tool to see its parameters and schema. The per-tool counts are indicative and are not scored directly; the schema's total context footprint is one signal in Schema Quality & AI Usability.

Tool Tokens
get_component_dependencies ~58

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

NameTypeReqDescription
componentIdstringyesThe story ID of the component (e.g., "example-button--primary")

No output schema declared.

No examples provided.

get_component_html ~216

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.

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

No output schema declared.

No examples provided.

get_external_css ~213

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.

NameTypeReqDescription
cssUrlstringyesURL of CSS file to analyze. IMPORTANT: Tool returns only design tokens by default (not CSS content) to avoid response size limits.
extractTokensboolean—Extract design tokens (colors, spacing, typography, etc.). Default: true. This is the main purpose of this tool.
includeFullCSSboolean—OPTIONAL: Set to true ONLY if you need the actual CSS content. WARNING: Large CSS files may hit token limits. Default: false (recommended).
maxContentSizenumber—OPTIONAL: Max CSS content characters when includeFullCSS=true. Default: 10000. Larger files will be truncated.

No output schema declared.

No examples provided.

get_theme_info ~44

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

NameTypeReqDescription
includeAllboolean—Whether to include all CSS custom properties found (default: false)

No output schema declared.

No examples provided.

job_cancel ~35

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

NameTypeReqDescription
job_idstringyesThe job ID to cancel

No output schema declared.

No examples provided.

job_list ~63

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

NameTypeReqDescription
statusstring—Filter by status: "all" (default), "active" (queued/running), "completed" (completed/failed/cancelled)

No output schema declared.

No examples provided.

job_status ~53

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

NameTypeReqDescription
job_idstringyesThe job ID returned from get_component_html

No output schema declared.

No examples provided.

list_components ~192

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.

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

No output schema declared.

No examples provided.

search_components ~254

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.

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

No output schema declared.

No examples provided.