关键词

设计系统UI组件图标设计令牌前端资产

项目简介

该仓库包含Ameba设计系统Spindle的各个部分，其中包括一个遵循Model Context Protocol (MCP) 标准的服务器实现。这个MCP服务器的主要目标是为LLM客户端提供对Spindle设计系统中UI组件、图标和设计令牌等资产的标准化访问能力。

主要功能点

本MCP服务器提供了以下核心功能，通过工具的形式暴露给LLM客户端：

  • 获取组件列表: 提供Spindle设计系统中所有可用UI组件的名称列表。
  • 获取组件详情: 根据指定的组件名称，获取该组件的详细信息，包括实现代码、样式、文档、测试文件及Figma信息（如果存在）。
  • 获取所有设计令牌: 获取Spindle定义的所有类别的设计令牌（如颜色、动画、字体、阴影）及其值。
  • 获取特定设计令牌: 根据指定的类别（如“color”、“animation”、“font”、“shadow”），获取该类别的所有设计令牌。
  • 获取图标列表: 提供Spindle图标库中所有可用图标的名称列表。
  • 获取图标详情: 根据指定的图标名称，获取该图标的详细信息及相关文档。

通过这些工具，LLM客户端可以编程化地查询和理解Spindle设计系统的各种元素及其属性。

安装步骤

Spindle MCP服务器是Ameba Design System Spindle仓库中的一个子项目（package）。要使用此服务器，您需要：

  1. 克隆整个Spindle GitHub仓库。
  2. 进入MCP服务器的目录（通常是'packages/spindle-mcp-server'）。
  3. 使用Node.js包管理器（如npm或yarn）安装依赖并构建项目。具体命令通常包括：
    • 安装依赖：'npm install' 或 'yarn install'
    • 构建项目：根据'package.json'中的构建脚本执行相应命令，例如 'npm run build' 或 'yarn build'。
  4. 成功构建后，服务器的可执行文件通常会生成在'dist'目录下。

服务器配置（供MCP客户端使用）

MCP客户端需要通过配置来连接并启动这个MCP服务器。以下是客户端配置中所需的关键信息描述：

  • 服务器名称 (name): 'ameba-spindle' （客户端用于识别服务器）
  • 启动命令 (command): 'node' （用于在Node.js环境中执行服务器脚本）
  • 命令参数 (args): '["packages/spindle-mcp-server/dist/index.js"]' （指定要执行的服务器主脚本路径。请注意，此路径相对于您克隆仓库并构建后的文件结构。）
  • 描述 (description): '为Ameba设计系统Spindle提供组件、图标、设计令牌等上下文信息的MCP服务器。' （对此服务器功能的简要说明）

客户端应根据其特定的配置方式（通常是一个JSON或YAML文件）使用上述信息来建立与服务器的连接。服务器默认使用Stdio传输协议进行通信。

基本使用方法

连接建立后，MCP客户端可以通过发送JSON-RPC请求来调用服务器提供的工具。例如，客户端可以发送一个包含'method: "get_components"'的请求来获取组件列表，或者发送一个包含'method: "get_icon_info"'和'params: { "name": "Clock" }'的请求来获取特定图标的信息。服务器将返回标准的JSON-RPC响应，其中包含请求的结果数据。

信息

分类

开发者工具

访问项目