项目简介

该项目是D-ZERO前端开发环境的Model Context Protocol (MCP) 服务器实现。它旨在为LLM客户端（如AI助手）提供访问Figma设计数据和D-ZERO前端编码规范的能力。通过集成此MCP服务器，开发人员可以通过与AI助手的自然语言对话，方便地获取Figma设计稿信息和查阅编码规范，从而提升开发效率。

主要功能点

Figma数据获取: 通过Figma API获取Figma文件或节点的数据，使AI助手能够理解和利用Figma设计稿中的信息。
前端编码规范提供: 提供D-ZERO前端开发团队的编码规范文档，帮助开发人员快速查阅和遵循团队的开发规约。
CLINE 集成: 可以作为 CLINE 客户端的 MCP 服务器运行，与 CLINE 提供的 AI 助手无缝集成。
标准 MCP 协议: 基于 Model Context Protocol 标准构建，易于与其他 MCP 客户端集成。

安装步骤

该项目以 npm 包形式发布，可以通过 npm 或 npx 运行。

安装 Node.js 和 npm: 确保你的开发环境中已安装 Node.js 和 npm (或 yarn)。
安装 npm 包 (可选): 如果你希望全局安装该 MCP 服务器，可以运行以下命令：
```
npm install -g @d-zero/mcp-server
```
或者，你可以选择不全局安装，直接使用 'npx' 运行。

服务器配置

MCP 服务器需要配置 Figma API 访问令牌才能正常访问 Figma 数据。你需要从 Figma 开发者平台获取 Personal Access Token，并将其设置为环境变量 'FIGMA_ACCESS_TOKEN'。

以下是在 MCP 客户端（例如 CLINE）中配置该 MCP 服务器的示例 'cline_mcp_settings.json' 配置：

{
  "mcpServers": {
    "coding_guidelines": {
      "command": "npx",  // 启动命令，使用 npx 运行 npm 包
      "args": ["-y", "@d-zero/mcp-server"], // 启动参数，-y 表示自动确认，@d-zero/mcp-server 是要执行的 npm 包名
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN" // 环境变量，用于配置 Figma API 访问令牌，请替换为你的 Figma Access Token
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

配置说明:

'"command": "npx"': 指定使用 'npx' 命令来运行 npm 包。
'"args": ["-y", "@d-zero/mcp-server"]': 'npx' 的参数，'-y' 表示自动确认执行，'@d-zero/mcp-server' 是要运行的 npm 包名称。
'"env": { "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN" }': 设置环境变量，'FIGMA_ACCESS_TOKEN' 用于存储你的 Figma API 访问令牌。 请务必将 '"YOUR_FIGMA_ACCESS_TOKEN"' 替换为你自己的 Figma Access Token。 你可以在 Figma 开发者 API 页面获取访问令牌。

注意: 如果使用 'npx @d-zero/mcp-server' 启动服务器失败，并且你没有全局安装 '@d-zero/mcp-server'，可能需要全局安装或者使用 'npm install' 在项目本地安装后，使用 'node ./node_modules/.bin/mcp-server' (或其他根据实际情况的路径) 作为 'command' 的值，并调整 'args' 为空数组 '[]'。具体可以参考仓库 README 中提供的参考Issue。

基本使用方法

配置 MCP 客户端: 根据你的 MCP 客户端（例如 CLINE）的文档，配置上述 'cline_mcp_settings.json' 文件或类似的配置，将该 MCP 服务器添加到客户端的 MCP 服务器列表中。
启动 MCP 服务器: 当客户端尝试连接到该 MCP 服务器时，客户端会根据配置的 'command' 和 'args' 启动 MCP 服务器进程。
使用 AI 助手: 在 MCP 客户端中，你可以通过 AI 助手的对话界面，使用以下工具来获取信息：
- 'get_figma_data': 获取 Figma 数据。你需要提供 Figma 文件 URL 作为参数。
- 'get_coding_guidelines': 获取 D-ZERO 前端编码规范。无需参数。

例如，在 CLINE 中，你可以向 AI 助手提问：

"请帮我获取这个 Figma 文件的数据：[Figma 文件 URL]" (AI 助手会调用 'get_figma_data' 工具)
"D-ZERO 的前端编码规范是什么？" (AI 助手可能会调用 'get_coding_guidelines' 工具)

AI 助手会根据你的问题，自动调用相应的工具，并从 MCP 服务器获取数据，然后将结果返回给你。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息