JinDaGe - mcp-modus MCP Details

article

README

🚀 MCP Modus

Modus Web组件的AI助手 - 直接在你的集成开发环境（IDE）中，即时获取组件文档、设计规则和设置指南相关的帮助。

🚀 快速开始

本MCP服务器允许AI助手（如Cursor、Claude、VS Code）访问完整的Modus Web组件文档。你可以提出如下问题：

“如何使用原色的Modus按钮？”
“Modus的颜色指南是什么？”
“展示如何使用Modus组件设置一个React项目”
“哪些组件具有禁用属性？”

📦 安装指南

你可以从以下两种安装方式中任选其一：

选项1：NPX（推荐 - 无需安装）

适用于任何支持MCP的IDE：

{
  "mcpServers": {
    "modus-docs": {
      "command": "npx",
      "args": ["-y", "@julianoczkowski/mcp-modus"]
    }
  }
}

优点：无需安装，始终使用最新版本，无权限问题。

选项2：全局安装

全局安装：

npm install -g @julianoczkowski/mcp-modus

注意：在某些系统上，你可能需要使用 sudo npm install -g @julianoczkowski/mcp-modus

使用以下配置：

{
  "mcpServers": {
    "modus-docs": {
      "command": "mcp-modus"
    }
  }
}

优点：启动速度更快，安装后可离线使用。

📚 详细文档

特定IDE的设置说明

对于Cursor IDE

转到 设置 → 功能 → MCP
点击“添加新的MCP服务器”
使用上述JSON配置之一

对于VS Code（搭配Continue）

使用上述JSON配置之一添加到 ~/.continue/config.json。

对于Claude桌面版

使用上述JSON配置之一添加到你的配置文件：

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%/Claude/claude_desktop_config.json

你将获得的内容

📚 组件文档（43 + 个组件）

所有Modus Web组件的完整API文档
使用示例和最佳实践
属性和事件参考

🎨 设计系统指南

调色板和使用规则
图标指南和可用图标
间距、排版和布局系统
边框半径和边框指南

⚙️ 项目设置指南

HTML项目设置说明
React项目集成指南
主题实现和定制
测试指南和最佳实践

💻 使用示例

配置完成后，你可以向AI助手提问，如：

"创建一个带有警告颜色和中等大小的Modus按钮"
"在我的Modus设计中应该使用哪些间距值？"
"如何使用Modus Web组件设置一个新的React项目？"
"展示所有Modus表单组件"
"可用的Modus颜色令牌有哪些？"

AI将使用MCP服务器获取最新文档，并提供准确、最新的答案。

🔧 技术细节

故障排除

服务器无法连接

确保已安装Node.js 18 +：node --version
对于全局安装：使用 mcp-modus --help 进行验证
检查IDE日志中的错误消息

删除下载的文档

如果你使用的是 NPX选项（选项1），文档由NPX临时缓存。要清除此缓存：

# 清除此包的NPX缓存
npx clear-npx-cache @julianoczkowski/mcp-modus

# 或者清除整个NPX缓存
npm cache clean --force

如果你使用的是 全局安装选项（选项2），请使用以下命令卸载：

npm uninstall -g @julianoczkowski/mcp-modus

需要帮助？

为使用Modus Web组件的开发者打造 | MIT许可证 | 由Julian Oczkowski创建

mcp-modus