AI导哈

设计系统指南服务

Muibook Guidelines MCP Server 是一个为 Cursor Desktop 提供设计系统指南和组件文档的 MCP 服务器，帮助开发者获取准确的 UI 组件、模式和最佳实践建议。

  • by michaeltrilford
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 michaeltrilford/muibook-guidelines-mcp

使用说明

Muibook指南MCP服务器

MCP（模型上下文协议）服务器，为Cursor Desktop提供设计系统指南和组件文档。

概述

此MCP服务器直接向Cursor提供全面的设计系统指南，使其能够从您的设计系统中提供有关UI组件、模式和最佳实践的准确、一致的建议。

特性

  • 组件指南：UI组件（按钮、表单、导航等）的详细文档
  • 视觉参考：直接链接到组件解剖图和示例
  • 普及标准：内置无障碍要求和最佳实践
  • 设计标记：访问颜色、排版、间距和其他设计标记
  • 使用模式：真实世界的示例和使用指南

安装

先决条件

  • Node.js（v16或更高版本）
  • 光标桌面应用程序

设置

  1. 克隆此存储库
git clone https://github.com/your-org/muibook-guidelines-mcp.git
cd muibook-guidelines-mcp
  1. 安装依赖项
npm install
  1. 配置光标桌面

编辑光标桌面配置文件：

  • macOS: ~/Library/Application Support/Cursor/mcp_config.json
  • 视窗: %APPDATA%\Cursor\mcp_config.json

添加此服务器：

{
  "mcpServers": {
    "muibook-guidelines": {
      "command": "node",
      "args": ["/absolute/path/to/muibook-guidelines-mcp/server.js"]
    }
  }
}

替换 /absolute/path/to/muibook-guidelines-mcp/ 使用克隆此存储库的实际路径。

  1. 重新启动光标桌面

完全退出并重新打开Cursor Desktop以加载MCP服务器。

用法

安装后，您可以向Cursor询问设计准则：

示例：

  • “显示按钮组件指南”
  • “按钮的可访问性要求是什么？”
  • “有哪些按钮变体可供选择？”
  • “我应该如何使用主按钮和辅助按钮？”

可用提示

serve_guidelines -返回全面的设计系统指南，包括组件解剖、使用模式、可访问性要求和视觉参考。

包含内容

按钮组件指南

  • 用可视化图表完成解剖分解
  • 使用指南和最佳实践
  • 五种按钮变体（主、次、三级、链接、图标）
  • 无障碍要求
  • 组件状态和行为

完整文档： https://guides.muibook.com/button

故障排除

光标桌面中的红色指示器

服务器未连接。请尝试以下步骤：

  1. 验证路径 配置文件中的内容是正确和绝对的
  2. 检查Node.js版本：运行 node --version （需要v16+）
  3. 手动测试服务器:
    cd /path/to/muibook-guidelines-mcp
node server.js
  4. 检查错误 在控制台输出中
  5. 重新启动游标 完全（退出并重新打开）

指南未出现

  • 确认服务器在光标中显示为已连接（非红色）
  • 试着明确地问：“给我看看serve_guidelines提示符”
  • 检查Cursor的MCP日志是否有错误

图像未加载

  • 确保您有互联网连接（图像托管在外部）
  • 检查指南中的网址是否可访问
  • 尝试直接在浏览器中获取图像URL

发展

在本地运行服务器

node server.js

进行更改

  1. 编辑 server.js 修改指南
  2. 重新启动光标桌面以重新加载更改
  3. 测试您的提示

添加新组件

在中编辑提示内容 server.js:

if (request.params.name === "serve_guidelines") {
  return {
    messages: [
      {
        role: "user",
        content: {
          type: "text",
          text: `# Add your new component guidelines here`,
        },
      },
    ],
  };
}

项目结构

muibook-guidelines-mcp/
├── server.js            # MCP server implementation
├── package.json         # Dependencies and metadata
└── README.md           # This file

资源

贡献

我们欢迎捐款！要添加或改进指南：

  1. 分叉此存储库
  2. 创建要素分支(git checkout -b feature/new-component)
  3. 在中添加或更新组件指南 server.js
  4. 使用光标桌面进行测试
  5. 提交拉取请求

许可证

[您的许可证在这里]

支持

对于问题或疑问：

  • 在GitHub上打开一个问题
  • 检查上面的故障排除部分
  • 联系设计系统团队

NPM包

版本控制

  • 跟随 语义版本控制: major.minor.patch
    • 补丁：错误修复，没有API更改
    • 次要的：新功能，向后兼容
    • 主修：中断更改，API更改
  • 保持 package.json 和 server.json 版本已同步。

颠簸版本

补丁：

npm version patch

未成年人：

npm version minor

专业：

npm version major

这将更新package.json版本并自动创建Git标记。

向NPM发布

选项A–直接发布（如果需要，NPM将提示提供凭据）：

npm publish --access public

选项B–预登录（建议重复发布）：

npm login
npm publish --access public
  • --access public确保包是公开可用的。
  • 确保package.json包含MCP标识符：
"mcpName": "io.github.YOURUSERNAME/muibook-guidelines-mcp"

⸻

可选MCP注册表更新

确保server.json与当前版本匹配：

"version": "1.0.0"

发布到MCP注册表：

mcp-publisher publish

⸻

GitHub版本（可选）

标记发布：

git tag v1.0.0
git push origin v1.0.0

在GitHub中添加发布说明以跟踪更改。

⸻

本地开发和测试

安装依赖项：

npm install

在本地运行：

npm start

通过MCP客户端（Cursor、Cline等）或MCP.json连接：

{
  "servers": {
    "muibook-guidelines-mcp": {
      "command": "node",
      "args": ["./node_modules/muibook-guidelines-mcp/server.js"]
    }
  }
}

发布检查表

•在本地测试MCP服务器 •更新package.json和server.json版本 •凹凸版本（补丁、次要或主要） •承诺并推动变革 •发布到NPM（--公开访问） •可选择发布到MCP注册表（MCP发布者发布） •可选择创建带有注释的GitHub版本

参考文献

•NPM发布文档 •MCP注册文件 •语义版本控制

相关 MCP