Design Token MCP

设计令牌MCP服务器

用于管理CSS自定义属性（设计令牌）的生产就绪模型上下文协议（MCP）服务器。该服务器使AI助手和其他MCP客户端能够从CSS/SCSS文件中读取、查询、搜索和更新设计令牌，包括全局品牌令牌和组件级令牌。

特性

• 📖 多文件支持 -从多个CSS和SCSS文件中读取标记
• 🧩 组件令牌 -发现并检查50多个单独UI组件的设计标记
• 🔍 高级查询 -按文件、类别、前缀、组件或语义类型筛选
• 📊 统计 -获取令牌计数和跨文件和组件的分布
• 🎨 调色板工具 -支持比例的颜色标记专用工具
• ✏️ 排版工具 -查询字体系列、粗细、大小和行高
• 📐 间距工具 -按大小或类型获取间距标记
• 🔄 更新令牌 -修改令牌值并保持更改
• 🖼️ 图片主题 -使用LLM视觉从网站截图或设计图像生成品牌主题
• 🌐 CSS主题 -通过获取和分析网站的CSS提取品牌主题
• ⚡ 分页 -高效处理大型令牌集

支持的令牌文件

全局令牌文件

组件令牌文件（50个文件 tokens/componentToken/)

组件标记控制单个UI组件的视觉样式。它们按类别组织：

安装

npm install

用法

启动服务器（stdio--本地）

npm start

这使用stdio传输，适用于像Claude Desktop这样的本地MCP客户端。

启动服务器（HTTP--远程/云）

npm run start:http

或者直接：

MCP_TRANSPORT=http PORT=3000 node index.js

这将使用MCP Streamable HTTP传输启动HTTP服务器，适用于反向代理后面的云部署。

MCP客户端配置

对于 本地 使用（stdio）：

{
  "mcpServers": {
    "design-tokens": {
      "command": "node",
      "args": ["/path/to/design-tokens-mcp/index.js"]
    }
  }
}

对于 远程 使用（流式HTTP）：

{
  "mcpServers": {
    "design-tokens": {
      "type": "streamable-http",
      "url": "https://tokens.yourdomain.com/mcp"
    }
  }
}

可用工具（共16个）

核心工具

get_token

按名称及其源文件和类别检索特定令牌。

{ "name": "ks-brand-color-primary" }

list_tokens

列出具有过滤和分页功能的令牌。集 includeComponentTokens: true 在结果中还包括组件级令牌。

{
  "file": "branding",
  "category": "color",
  "prefix": "ks-brand",
  "includeComponentTokens": false,
  "limit": 50,
  "offset": 0
}

list_files

列出所有带有描述和令牌计数的令牌文件。集 includeComponentFiles: true 以包括50个组件令牌文件。

{ "includeComponentFiles": true }

get_token_stats

获取统计信息：总令牌数、按文件、类别和前缀计数。自动包含组件令牌统计信息（按组件、类别、属性类型和值类型）。

search_tokens

按名称或值中的模式搜索标记。集 includeComponentTokens: true 还可以搜索组件令牌。

{
  "pattern": "primary",
  "searchIn": "name",
  "file": "color",
  "includeComponentTokens": false,
  "limit": 50
}

语义类型工具

get_tokens_by_type

按语义类型获取令牌：

• interactive -悬停、活动、选定、禁用状态
• inverted -暗模式变体
• scale -阿尔法/混合标度变体
• base -基础代币
• responsive -断点特定令牌
• sizing -大小比例标记（xxs-xxl）

{ "type": "interactive", "file": "background-color" }

领域特定工具

get_color_palette

获取按类型组织的颜色标记。

{
  "colorType": "primary",
  "includeScales": true
}

颜色类型： primary, positive, negative, informative, notice, fg, bg, link

get_typography_tokens

获取按字体类型或属性过滤的排版标记。

{
  "fontType": "display",
  "property": "size"
}

字体类型： display, copy, interface, mono 属性： family, weight, size, line-height

get_spacing_tokens

按大小或类型获取间距标记。

{
  "size": "m",
  "type": "stack"
}

尺寸： xxs, xs, s, m, l, xl, xxl 类型： stack, inline, inset, base

get_branding_tokens

获取核心品牌标识（为主题化而修改的主要标识）。

{ "type": "colors" }

类型： colors, fonts, spacing, borders, shadows, all

update_token

更新其源文件中的令牌值。

{
  "name": "ks-brand-color-primary",
  "value": "#4075d0"
}

组件令牌工具

list_components

列出所有可用组件及其令牌计数和类别。可选择按类别筛选。

{ "category": "forms" }

类别： navigation, content, blog, cards, heroes, forms, layout, data-display, utility

get_component_tokens

使用结构元数据（元素、变量、CSS属性、状态、值类型、引用的全局变量）获取特定组件的所有令牌。

{ "component": "button" }

返回丰富的令牌数据，包括：

• 元素 --子元素（例如。， icon, label)
• 变体 --视觉变体（例如。， primary, clear)
• cssProperty --CSS属性被设置（例如。， color, background-color)
• 状态 --交互状态（例如。， hover, active)
• 值类型 — literal, global-reference, component-reference，或 calculated
• referencedToken --正在引用的全局令牌（如果有的话）

search_component_tokens

按模式、属性、状态或值类型搜索所有组件令牌文件。

{
  "pattern": "primary",
  "property": "color",
  "state": "hover",
  "valueType": "global-reference",
  "component": "button",
  "limit": 50
}

主题生成工具

generate_theme_from_image

分析网站截图或设计图像以生成品牌主题。接受base64编码的图像或图像URL。返回图像以进行LLM视觉分析，同时返回当前主题模式以及字段描述和提示。

{ "imageUrl": "https://example.com/screenshot.png" }

或者使用base64：

{ "imageBase64": "iVBORw0KGgo...", "mimeType": "image/png" }

支持的格式： image/png, image/jpeg, image/webp

extract_theme_from_css

从网站获取所有CSS（内联 ` 块和链接 ` 样式表）并返回以供分析。提取精确的颜色值、字体族、字体大小、CSS自定义属性等。

{ "url": "https://example.com" }

包含完整的原始CSS：

{
  "url": "https://example.com",
  "includeRawCSS": true,
  "maxStylesheets": 10
}

退货：

• 预解析摘要（唯一的十六进制/RGB/HSL颜色、字体系列、自定义属性计数）
• :root / html CSS自定义属性（对主题化最有价值）
• 已找到所有CSS自定义属性（最多200个）
• 带有字段描述的当前主题架构
• （可选）完整的原始CSS文本

令牌架构

设计令牌系统遵循分层架构：

1. 品牌代币 (branding-token.css)

- 核心价值观：原色、字体系列、基本尺寸 - 这些是要修改主题的标记

1. 衍生代币 （SCSS文件）

- 根据品牌代币计算，使用 var() 参考文献 - 包括规模、状态和响应变量

1. 语义令牌

- 专用标记（背景、文本、边框颜色） - 交互状态（悬停、活动、选中、禁用） - 暗模式的倒置变体

1. 组件令牌 (tokens/componentToken/ --50个文件）

- 遵循命名约定的每个组件样式标记： --dsa-{component}[__{element}][_{variant}]--{property}[_{state}] - 通过引用全局/派生令牌 var() 为了一致性 - 在不接触全局令牌的情况下启用组件级自定义 - 分为9类：导航、内容、博客、卡片、英雄、表单、布局、数据显示、实用程序

示例工作流

获取令牌系统的概述

1. list_files → See all token files with counts
2. get_token_stats → See distribution by category

查找和修改品牌颜色

1. get_branding_tokens { type: "colors" } → See editable colors
2. update_token { name: "ks-brand-color-primary", value: "#new-color" }

探索色彩系统

1. get_color_palette { colorType: "primary" } → See primary colors
2. get_color_palette { colorType: "primary", includeScales: true } → With alpha scales

查询交互状态

1. get_tokens_by_type { type: "interactive", file: "background-color" }

从网站截图生成主题

1. generate_theme_from_image { imageUrl: "https://example.com/screenshot.png" }
   → LLM analyzes the image using vision
2. update_theme_config { path: "color.primary", value: "#extracted-color" }
   → Apply each extracted value

从网站的CSS生成主题

1. extract_theme_from_css { url: "https://example.com" }
   → Returns parsed CSS with colors, fonts, custom properties
2. update_theme_config { path: "color.primary", value: "#exact-color-from-css" }
   → Apply each extracted value

发现和探索组件令牌

1. list_components → See all 50 components by category
2. list_components { category: "forms" } → Filter to form components
3. get_component_tokens { component: "button" } → See all button tokens with variants/states

自定义组件的样式

1. get_component_tokens { component: "hero" } → See all hero tokens
2. search_component_tokens { property: "color", state: "hover" } → Find hover color tokens
3. search_component_tokens { valueType: "global-reference", component: "hero" } → See which globals hero uses

结合图像和CSS以获得最佳效果

1. extract_theme_from_css { url: "https://example.com" }
   → Get exact values (colors, font families, sizes)
2. generate_theme_from_image { imageUrl: "https://screenshot-url.png" }
   → Get visual cues (spacing density, personality, layout rhythm)
3. update_theme_config for each value

错误处理

所有错误都返回一致的JSON：

{
  "error": "Error message",
  "tool": "tool_name",
  "timestamp": "2026-01-22T12:00:00.000Z"
}

需求

• Node.js 16+（支持ES模块）
• @模型上下文协议/sdk^1.25.3

环境变量

许可证

国际学生委员会