Ui Toolkit MCP

UI工具包MCP服务器

](https://www.npmjs.com/package/@elsahafy/ui-toolkit-mcp)      

可用的最全面的UI MCP服务器。13个工具、5个资源、3个端到端UI开发提示：生成组件、管理设计令牌、审核可访问性、自动修复问题、检查实时页面、比较截图、生成故事书故事、提取Figma样式、编写布局和预览响应式设计——跨React、Vue、Svelte、Angular和Web组件。

适用于任何MCP兼容客户端 包括Claude Desktop、Claude Code、Cursor IDE、Continue.dev、Cline和Zed。

安装

npx（未安装）

npx -y @elsahafy/ui-toolkit-mcp

npm（全球）

npm install -g @elsahafy/ui-toolkit-mcp

克劳德代码CLI

claude mcp add ui-toolkit -- npx -y @elsahafy/ui-toolkit-mcp

克劳德桌面

添加 claude_desktop_config.json:

{
  "mcpServers": {
    "ui-toolkit": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ui-toolkit-mcp"]
    }
  }
}

光标IDE

添加 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "ui-toolkit": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ui-toolkit-mcp"]
    }
  }
}

可选：浏览器工具

对于 inspect_page, live_audit，以及 responsive_preview，单独安装Playwright：

npm install playwright
npx playwright install chromium

所有其他工具都可以在没有Playwright的情况下工作。

工具（13）

组件生成

generate_component

从自然语言生成生产就绪的UI组件。自动审核输出并在线报告问题。

"Generate a card component with image, title, and action buttons in React"

参数：

• description （必填）--构建什么
• framework （必填）-- react | vue | svelte | angular | web-components
• component_name （必填）-PascalCase名称（例如。， ProductCard)
• variant -- default | outlined | filled | ghost | elevated
• size -- sm | md | lg | xl
• auto_audit --自动审核生成的输出（默认值：true）
• include_styles --包含带有设计标记的CSS（默认值：true）
• include_tests --生成测试文件（默认值：false）
• responsive --包含断点（默认值：true）

生成的组件会自动在组件注册表中注册。

compose_layout

从注册表中以前生成的组件组成完整的页面布局。

"Compose a page from Hero, Features, and Footer components in React"

参数：

• component_names （必需）--注册表中的组件名称数组
• framework （必填）--目标框架
• layout_description --页面布局说明

生成具有导入、语义结构的完整页面(`, , `)，并跳过导航。

设计代币

import_design_tokens

从Figma令牌JSON、样式字典或CSS自定义属性导入设计令牌。

参数：

• tokens_json （必需）--原始JSON令牌字符串
• format （必填）-- figma-tokens | style-dictionary | css-custom-properties
• namespace --可选前缀（例如。， brand)
• merge_strategy -- replace | merge-overwrite | merge-keep

extract_figma_styles

通过REST API直接从Figma文件中提取设计令牌。

参数：

• figma_file_key （必填）--来自Figma URL的字母数字文件密钥
• figma_pat （必填）--Figma个人访问令牌（从未存储或记录）
• node_ids --要提取的可选特定节点
• namespace --可选CSS变量前缀
• merge_strategy --如何处理现有代币

export_tokens

将活动令牌存储导出为CSS自定义属性、JSON或样式字典格式。

参数：

• format -- css | json | style-dictionary （默认值： css)

clear_tokens

从活动存储中清除所有设计令牌。

审计与修复

audit_component

审核WCAG可访问性、性能和响应式设计问题的标记。返回带有修复建议的评分结果。

参数：

• markup （必填）--HTML/JSX/Vue/Svelte标记
• component_name --用于报告标签
• categories -- ["accessibility", "performance", "responsive"]
• wcag_level -- A | AA | AAA
• framework --影响标记的解析方式

29条内置规则： 12可访问性（WCAG），9性能，8响应式设计。

auto_fix_component

根据审计结果自动修复常见的可访问性和性能问题。

"Auto-fix the accessibility issues in this component"

参数：

• markup （必填）--要修复的标记
• findings （必需）--来自以下位置的AuditSetting对象数组 audit_component

支持的自动修复程序： 缺少alt文本、缺少lang属性、缺少延迟加载、正tabindex、px字体大小为rem。

live_audit

导航到实时URL并审核呈现的HTML。在一次调用中将浏览器检查与标记审核相结合。需要剧作家。

参数：

• target_url （必需）--HTTP/HTTPS URL（阻止私有IP）
• categories --要运行的审核类别
• wcag_level --WCAG合规级别

浏览器工具（剧作家）

单独安装： npm install playwright && npx playwright install chromium

inspect_page

导航到实时URL并提取可访问性树、组件结构、性能指标和屏幕截图。

参数：

• target_url （必需）--HTTP/HTTPS URL（阻止私有IP）
• viewport_width / viewport_height --视口大小
• wait_for -- load | domcontentloaded | networkidle
• timeout_ms --导航超时
• include_screenshot --Base64 PNG屏幕截图（默认值：true）

visual_diff

用于视觉回归测试的逐像素PNG比较。不需要剧作家。

参数：

• before_image （必填）--Base64 PNG
• after_image （必填）--Base64 PNG
• threshold --每通道容差（0-255，默认值：10）

responsive_preview

在移动端（375px）、平板电脑（768px）和桌面（1280px）视口截取URL的屏幕截图。需要剧作家。

参数：

• target_url （必需）--HTTP/HTTPS URL（阻止私有IP）

故事书

generate_story

使用道具检测、播放功能和辅助功能插件配置自动生成CSF3故事书故事。

参数：

• component_code （必填）--完整组件源代码
• framework （必填）-- react | vue | svelte | angular
• component_name （必填）--PascalCase名称
• story_title --故事书路径（默认： Components/{name})

通过正则表达式检测道具 from：TypeScript接口（React）， defineProps （视图）， export let （斯维尔特）， @Input() （角度）。

资源（5）

提示（3）

主要特点

生成时的审计

生成的每个组件 generate_component 会自动审核可访问性、性能和响应问题。关键发现已在线报告。没有其他UI MCP服务器这样做。

组件注册表

所有生成的组件都使用元数据（框架、使用的令牌、审计分数、时间戳）进行跟踪。使用 compose_layout 将它们汇编成整页。

设计令牌管道

从Figma、样式字典或CSS自定义属性导入标记。以任何格式导出。令牌会自动应用于生成的组件。

框架不可知

所有13个工具都支持React、Vue、Svelte、Angular和Web组件。一台服务器，任何框架。

建筑

src/
  index.ts                          # Server entry (thin orchestrator)
  lib/
    types.ts                        # Shared TypeScript interfaces
    token-store.ts                  # In-memory design token state
    component-registry.ts           # Component tracking
    framework-templates.ts          # 5 framework component generators
    story-templates.ts              # CSF3 story templates + prop detection
    accessibility-rules.ts          # 12 WCAG audit rules
    performance-rules.ts            # 9 performance audit rules
    responsive-rules.ts             # 8 responsive design rules
    pattern-library.ts              # 12 component patterns
    browser.ts                      # Playwright lifecycle + URL validation
    validation.ts                   # Shared input validation
    utils.ts                        # Shared utilities (kebab, clamp, fileExt)
  tools/
    generate-component.ts           # + auto-audit + registry
    import-design-tokens.ts
    audit-component.ts
    auto-fix-component.ts
    inspect-page.ts
    visual-diff.ts
    generate-story.ts
    extract-figma-styles.ts
    export-tokens.ts
    clear-tokens.ts
    live-audit.ts
    responsive-preview.ts
    compose-layout.ts
    index.ts                        # Tool registry + dispatch
  resources/
    index.ts                        # 5 resources
  prompts/
    index.ts                        # 3 workflow prompts
tests/
  lib/                              # 11 library test files
  tools/                            # 12 tool test files

184测试 在23个测试文件中。所有源文件都有专门的测试覆盖率。

安全

• 无代码执行--全部 markup 参数通过正则表达式进行分析，从不计算
• URL验证阻止私有IP（127.x、10.x、172.16-31.x、192.168.x、fe80:：、fc00:：、localhost）
• 浏览器工具只允许HTTP/HTTPS方案
• Figma PAT从不存储、记录或在响应中返回（已清除错误消息）
• 所有字符串输入都有 maxLength 运行时强制执行的约束
• 资源URI中没有凭据关键字
• 所有工具处理程序共享的输入验证助手

许可证

麻省理工学院