mcp-design-system-extractor

概述

MCP 设计系统提取器连接到 Storybook 实例，提取组件信息、渲染的 HTML、样式和设计令牌。它使用 Puppeteer 和无头 Chrome 进行动态 JavaScript 渲染，提供同步和异步模式的组件提取功能。服务器具有作业队列系统，可处理长时间运行的操作，并支持并发处理。它提供全面的设计系统分析功能，包括主题提取、组件依赖分析和 CSS 令牌提取。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• list_components

  Lists all available components from the Storybook instance

  试试:Show me all available components试试:List components in the navigation category
• get_component_html

  Extracts HTML from a specific component story

  试试:Get the HTML for the button component试试:Extract HTML for card--default
• search_components

  Search components by name, title, category, or purpose

  试试:Find button components试试:Search for form input components by purpose
• get_component_dependencies

  Analyzes rendered HTML to find which other components are used internally

  试试:Show what components are used in the modal dialog试试:Analyze dependencies of the navigation bar
• get_theme_info

  Extracts design system theme (colors, spacing, typography, breakpoints)

  试试:Extract the color palette from the design system试试:Get typography and spacing tokens
• get_external_css

  Extracts and categorizes CSS tokens from external CSS files

  试试:Extract design tokens from main.css试试:Get color and spacing variables from the CSS
• job_status

  Check status of an async job

  试试:Check status of job job_xxx试试:Is my HTML extraction complete?
• job_cancel

  Cancel a queued or running job

  试试:Cancel job job_xxx试试:Stop the current HTML extraction
• job_list

  List all jobs with their status

  试试:Show all active jobs试试:List completed jobs

可对比工具

安装

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

npm install -g mcp-design-system-extractor

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": ["/path/to/dist/index.js"],
      "env": {
        "STORYBOOK_URL": "http://localhost:6006"
      }
    }
  }
}

FAQ

它适用于所有版本的 Storybook 吗？

它适用于暴露标准 `/index.json` 和 `/iframe.html` 端点的已构建 Storybook 发行版。支持最新版本。

如果我的组件需要很长时间渲染怎么办？

服务器默认使用异步作业处理长时间运行的操作。您可以轮询作业状态以跟踪完成情况，而不会出现超时错误。

mcp-design-system-extractor 对比