WunderUI

WunderUI MCP

一个 MCP 服务，可将 WunderUI 设计系统提供给 AI 编码 Agent：包括设计令牌、包含真实属性签名的组件清单、页面模板和入门代码片段。Agent 可以使用这个库构建界面，而不是用一堆原始 div 重新实现数据网格。

claude mcp add wunderui -- npx -y wunderui-mcp

兼容 Claude Code、Cursor、Windsurf、Cline、Codex、VS Code，以及任何支持通过 stdio 使用 MCP 的其他客户端。无需密钥或账号。

工具

工具	Agent 可获取的内容
list_components	组件清单，可按类别、套餐（free 或 pro）或自由文本筛选
get_component	导出项、TypeScript 属性签名、导入语句、示例、文档 URL
get_tokens	JSON 格式的浅色和深色令牌、CSS 代码块或 Tailwind @theme 映射
get_design_md	完整的 DESIGN.md，或其中一个部分（rules、donts、tasks、tokens、inventory、reference、templates、starters）
list_templates	完整页面模板及其构成
get_starter	可直接复制粘贴的 TSX：应用外壳、仪表板、数据网格、AI 聊天、主题设置
get_library_info	包名称、版本、安装命令、技术栈、数量、数据来源
get_instructions	简短且始终生效的规则（组件、令牌、动效、文案），用于 CLAUDE.md / AGENTS.md
list_skills	WunderUI Agent 技能，包含免费版和 Pro 版
get_skill	某项技能的说明（SKILL.md），Agent 无需安装即可遵循；Pro 技能需要 WUNDERUI_LICENSE_KEY
get_block_source	UI 区块及其共享辅助项的 React 源码；需要在 WUNDERUI_LICENSE_KEY 中提供 Pro 密钥

每个组件都会标明所属套餐。使用 Free 套餐时，Agent 应仅使用标记为 free 的组件；其他组件需要 WunderUI Core 或 Pro。

资源

支持 MCP 资源的客户端无需调用工具即可附加设计上下文。这些资源为只读，数据与上述工具提供的数据相同：

资源 URI	内容
wunderui://design-md	完整的 DESIGN.md（markdown）
wunderui://design-json	机器可读的设计数据（令牌、组件清单、模板、技能）
wunderui://tokens	浅色和深色令牌值
wunderui://instructions	用于 CLAUDE.md / AGENTS.md 的简短规则
wunderui://components	组件清单：名称、类别、套餐、描述
wunderui://components/{slug}	单个组件的完整信息（服务端会为每个组件列出一个资源）

对于不支持资源的客户端，仍可使用这些工具。

安装

Claude Code

claude mcp add wunderui -- npx -y wunderui-mcp

Cursor：.cursor/mcp.json

{
  "mcpServers": {
    "wunderui": { "command": "npx", "args": ["-y", "wunderui-mcp"] }
  }
}

Windsurf、Cline、Codex、VS Code：在相应编辑器的 MCP 配置中使用相同格式。

安装 WunderUI 本身

该服务描述的是这个库；它不包含该库。npm 上的 @wunderui/react 是 WunderUI Free（仅包含免费组件）。Core 和 Pro 许可证持有者从 wunderui-core 下载中安装完整库（wunderui-setup Agent 技能会为你完成此操作），而该服务会向 Agent 明确说明这一点。

数据来源

每次发布时，都会从 WunderUI 源代码生成 data/design.json 和 data/DESIGN.md：样式表中的设计令牌、构建后的类型定义中的属性，以及文档中的名称和描述。

服务启动时会使用捆绑的副本并立即响应。随后，它会在后台从 wunderui.com 获取最新的 design.json 和 DESIGN.md，并在它们至少同样新时切换使用，这样 Agent 无需更新软件包就能看到新组件。get_library_info 会报告当前使用的数据来源。

变量	效果
WUNDERUI_OFFLINE=1	永不访问网络，使用捆绑的副本
WUNDERUI_SITE=<url>	从其他源站获取实时数据
WUNDERUI_LICENSE_KEY=<key>	你的 WunderUI Pro 密钥——解锁 Pro 技能（get_skill）和区块源代码（get_block_source）；仅发送至 wunderui.com

不使用 MCP

对于不支持 MCP 的 Agent 和编辑器，同一份数据也以静态文件形式提供：

• https://wunderui.com/DESIGN.md：粘贴到提示词顶部
• https://wunderui.com/llms.txt：llms.txt 约定
• https://wunderui.com/design.json：相同的结构化索引

验证

npm install
npm run smoke

使用真实的 MCP 客户端启动服务，并逐一调用每个工具。

许可证

服务代码采用 MIT 许可证。它所描述的 WunderUI 组件按方案授权，详见 wunderui.com/pricing。