使用说明

项目简介

本项目是一个 MCP (Model Context Protocol) 服务器，旨在为 LLM (大型语言模型) 应用提供关于设计系统的信息。它通过工具 (Tools) 的形式暴露了设计系统中组件的属性 (Props) 和设计令牌 (Design Tokens)，使得 LLM 能够理解和利用设计系统的上下文信息。

主要功能点

获取组件属性 (getComponentProps): 允许 LLM 查询指定 React 组件的属性定义，包括属性名称、类型和描述信息。这有助于 LLM 理解组件的使用方式和可配置项。
获取设计令牌 (getTokens): 允许 LLM 获取设计系统中预定义的各种设计令牌，例如颜色、字体、间距、圆角等。这使得 LLM 能够感知设计系统的风格规范，并生成与之对齐的内容。

安装步骤

安装 Deno: 本项目使用 Deno 运行时环境。如果您的机器上尚未安装 Deno，请访问 https://deno.land/ 按照官方指引进行安装。

克隆仓库: 将 GitHub 仓库 'https://github.com/yajihum/design-system-mcp' 克隆到本地。

git clone https://github.com/yajihum/design-system-mcp
cd design-system-mcp

服务器配置

MCP 客户端需要配置以下信息以连接到 Design System MCP Server。以下是一个 JSON 格式的配置示例，您可以将其添加到您的 MCP 客户端配置中：

{
  "serverName": "DesignSystem",  // MCP 服务器名称，与 server.ts 中定义的名称一致
  "command": "deno run",      // 启动服务器的命令，使用 deno 运行时
  "args": [                     // 启动命令的参数
    "src/design-system/mcp/server.ts" // 服务器入口文件路径
  ]
}

配置说明:

'serverName': 指定 MCP 服务器的名称，必须与 'src/design-system/mcp/server.ts' 文件中 'new McpServer({...})' 定义的 'name' 属性值 '"DesignSystem"' 一致。
'command': 指定用于启动 MCP 服务器的命令。由于本项目使用 Deno 编写，因此这里设置为 'deno run'。
'args': 一个字符串数组，包含传递给启动命令的参数。这里指定了服务器入口文件 'src/design-system/mcp/server.ts' 的路径。

注意: 确保您的 MCP 客户端能够正确执行 'deno run' 命令，并且 Deno 运行时环境已正确安装和配置。

基本使用方法

启动 MCP 服务器: 在仓库根目录下，使用 Deno 运行 'src/design-system/mcp/server.ts' 文件来启动 MCP 服务器。
```
deno run src/design-system/mcp/server.ts
```
启动成功后，您应该看到控制台输出 'Design System MCP Server started'。
配置 MCP 客户端: 根据您的 MCP 客户端的指引，配置上述提供的服务器连接信息。

使用 MCP 客户端调用工具: 通过 MCP 客户端，您可以调用服务器提供的工具 (Tools) 来获取设计系统信息。

调用 'getComponentProps' 工具: 查询组件属性。例如，查询名为 'Button' 的组件的属性信息。

{
  "method": "callTool",
  "params": {
    "toolName": "getComponentProps",
    "arguments": {
      "name": "Button"
    }
  }
}

服务器将返回包含 'Button' 组件属性信息的 JSON 响应。

调用 'getTokens' 工具: 获取设计令牌。

{
  "method": "callTool",
  "params": {
    "toolName": "getTokens",
    "arguments": {}
  }
}

服务器将返回包含设计令牌信息的 JSON 响应。

您可以参考 'src/design-system/mcp/debug-in-memory.ts' 文件中的示例代码，了解如何通过 MCP 客户端调用工具并处理响应。

注意事项

本项目假设设计系统组件的 React 代码 ('.tsx' 文件) 位于 'src/design-system/ui' 目录下，设计令牌 JSON 文件位于 'src/design-system/tokens' 目录下。您可以根据实际项目结构调整 'src/design-system/mcp/server.ts' 文件中的路径配置。
'getComponentProps' 工具当前通过解析 TypeScript 代码来获取组件属性信息，可能无法处理所有复杂的组件定义情况。
设计令牌的生成和管理依赖于 Style Dictionary，具体配置和流程请参考 'README.md' 文件中关于 "Design Token Generation" 的部分。

关键词