Tea Color to Vars MCP Server

一个基于最新版本 @modelcontextprotocol/sdk (v1.20.1) 的 Model Context Protocol (MCP) 服务器，专注于 Tea Design 设计系统的颜色 token 管理和转换。

功能特性

🛠️ 工具 (Tools)

• getCssTokens: 根据颜色类型和颜色值生成 CSS 令牌，支持语义化 token 优先匹配

快速开始

方式一：使用 npx（推荐）

无需安装，直接运行：

# 使用完整命令名
npx tea-color-to-vars-mcp-server

# 或使用简短别名
npx tea-color-to-vars

方式二：全局安装

# 全局安装
npm install -g tea-color-to-vars-mcp-server

# 运行
tea-color-to-vars-mcp-server
# 或
tea-color-to-vars

方式三：本地开发

1. 安装依赖

npm install

2. 运行服务器

开发模式（带热重载）：

npm run dev

构建后运行：

npm run build
npm start

连接 MCP 客户端

服务器使用 stdio 模式运行，支持以下客户端：

• Claude Desktop
• VS Code with MCP extension
• Cursor
• 其他支持 MCP stdio 协议的客户端

在 Claude Desktop 中配置：

编辑 ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "tea-color-to-vars": {
      "command": "npx",
      "args": ["-y", "tea-color-to-vars-mcp-server"]
    }
  }
}

项目结构

tea-color-to-vars-mcp-server/
├── src/
│   ├── tools/            # 工具目录
│   │   ├── index.ts      # 工具注册入口
│   │   ├── getCssTokens.ts  # CSS 令牌工具
│   │   └── README.md     # 工具文档
│   └── index.ts          # 主服务器代码
├── dist/                 # 编译输出目录
├── package.json          # 项目依赖
├── tsconfig.json         # TypeScript 配置
└── README.md            # 项目文档

工具开发

添加新工具

1. 在 src/tools/ 目录下创建新的工具文件
2. 实现工具逻辑并导出注册函数
3. 在 src/tools/index.ts 中导入并注册

详细说明请参考 src/tools/README.md

getCssTokens 工具

功能： 根据颜色类型和颜色值生成 CSS 令牌，支持语义化 token 优先匹配

参数：

• colorType (string): 颜色类型
  • textColor: 文本颜色
  • bgColor: 背景颜色
  • borderColor: 边框颜色
• colorValue (string): 颜色值（支持 HEX、RGB、RGBA、HSL、命名颜色）

返回：

• tokens (string[]): CSS 颜色令牌数组
• closestTokens (string[]): 最接近的 token 名称数组
• distance (number): 颜色距离
• exactMatch (boolean): 是否精确匹配
• tokenType ('semantic' | 'palette'): Token 类型

特性：

• ✅ 语义化 token 优先匹配
• ✅ 支持多个精确匹配
• ✅ LAB 色彩空间精确计算
• ✅ 支持所有主流颜色格式

打包和部署

本地链接测试

# 在项目目录下创建全局链接
npm link

# 测试命令
tea-color-to-vars-mcp-server
# 或
tea-color-to-vars

# 取消链接
npm unlink -g tea-color-to-vars-mcp-server

打包为 npm 包

# 构建并打包
npm run pack

# 这将生成 tea-color-to-vars-mcp-server-1.0.0.tgz

发布到 npm

# 登录 npm（首次）
npm login

# 发布包
npm publish

# 发布后，用户可以直接使用
npx tea-color-to-vars-mcp-server

本地安装打包文件

# 从 .tgz 文件安装
npm install -g ./tea-color-to-vars-mcp-server-1.0.0.tgz

# 运行
tea-color-to-vars-mcp-server

技术栈

• @modelcontextprotocol/sdk: ^1.20.1
• tinycolor2: ^1.6.0 - 颜色解析和转换
• color-diff: ^1.4.0 - LAB 色彩空间距离计算
• change-case: ^4.1.2 - 命名转换
• Zod: ^3.22.4 - 参数验证
• TypeScript: ^5.3.3

许可证

MIT

参考资源

• MCP 官方文档
• SDK GitHub
• MCP 规范