Tokven MCP

托克文·麦克普

为AI代理和开发人员生成WCAG安全颜色系统。给它一个品牌十六进制，得到一个CSS、Tailwind或DTCG JSON格式的对比验证令牌系统。在本地运行，无需帐户。

它做什么

赋予它一种品牌色彩和氛围。它返回一个完整的令牌系统：颜色（亮+暗模式）、排版配对、间距比例、边框半径、阴影——所有WCAG都经过对比度验证。输出为CSS自定义属性、Tailwind v4、Tailwind v3或DTCG JSON。在本地运行，无需帐户。

安装

{
  "mcpServers": {
    "tokven": {
      "command": "npx",
      "args": ["-y", "tokven-mcp"]
    }
  }
}

光标： 设置→ MCP → 添加上面的配置

克劳德桌面： 添加 claude_desktop_config.json

克劳德代码：

claude mcp add tokven -- npx -y tokven-mcp

用作项目依赖项

如果tokven mcp安装在本地（例如 node_modules)，代理可以直接通过stdio调用它，而无需 npx:

{
  "mcpServers": {
    "tokven": {
      "command": "node",
      "args": ["node_modules/tokven-mcp/bin.js"]
    }
  }
}

推荐的工作流程

为了获得最佳结果，特别是当代理代表用户应用令牌时，请遵循以下三步流程：

1. 先预览。 呼叫 get_token_preview 品牌六角形和情绪。它返回关键颜色、字体、对比度摘要和 视觉预览URL 在tokven.dev上。
2. 共享预览URL。 表面 url 字段给用户（例如。 https://tokven.dev/?hex=2563eb&mood=corporate)这样他们在提交之前就可以直观地看到调色板。
3. 生成令牌。 一旦用户批准了调色板，调用 generate_tokens 对于完整的CSS/Tailwind/DTCG输出，具有相同的参数。

这避免了应用用户从未视觉确认的调色板的常见陷阱。

工具

generate_tokens

从十六进制颜色生成完整的令牌系统。

示例提示：

为#2563eb生成一个具有企业氛围的设计系统，如Tailwind v4

退货： 完整的CSS/顺风/DTCG输出，谷歌字体 @import URL、亮模式和暗模式的WCAG对比度结果，以及 url 链接到tokven.dev上的视觉预览。

______________________________________________________________________

get_token_预览

无需完整CSS的快速摘要。 推荐的第一步 --以前叫这个 generate_tokens 因此用户可以视觉上批准调色板。

示例提示：

以柔和的心情预览#e05aad的代币

退货： 原色、字体配对、半径、阴影样式、对比度通过/失败计数和 url 链接到tokven.dev上的视觉预览。在生成完整令牌之前，与用户共享此URL以进行视觉确认。

______________________________________________________________________

validate_contrast

WCAG 2.1两种颜色之间的对比度检查。

示例提示：

#2563eb上的#ffffff是否通过WCAG AA？

退货： 对比度，正常和大文本的AA/AAA通过/失败。

______________________________________________________________________

list_moods

返回所有14个带有描述的情绪预设。没有参数。

响应结构

generate_tokens

{
  "css": "/* full token output — CSS custom properties, Tailwind, or DTCG */",
  "fonts": {
    "heading": "Raleway",
    "body": "Noto Sans",
    "importUrl": "https://fonts.googleapis.com/css2?family=Raleway:wght@600&family=Noto+Sans:wght@400&display=swap"
  },
  "contrast": { "light": "31/31 pass", "dark": "31/31 pass" },
  "mood": "corporate",
  "format": "css",
  "url": "https://tokven.dev/?hex=2563eb&mood=corporate"
}

get_token_预览

{
  "mood": "corporate",
  "colors": {
    "primary": "#2563eb",
    "background": "#f6f7fa",
    "surface": "#f0f2f6",
    "text": "#0e1016"
  },
  "fonts": { "heading": "Raleway", "body": "Noto Sans" },
  "radius": "6px",
  "shadow": "medium",
  "contrast": { "light": "31/31 pass", "dark": "31/31 pass" },
  "url": "https://tokven.dev/?hex=2563eb&mood=corporate"
}

输出示例

generate_tokens 随着 hex: "#2563eb", mood: "corporate" 返回：

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@600&family=Noto+Sans:wght@400&display=swap");

:root {
  /* Background */
  --color-bg: #f6f7fa;
  --color-bg-surface: #f0f2f6;
  --color-bg-elevated: #eaecf1;
  --color-border-subtle: #e2e4ea;
  --color-border-default: #d8dbe2;
  --color-border-strong: #c7cad2;

  /* Text */
  --color-text: #0e1016;
  --color-text-muted: #454856;
  --color-text-subtle: #6a6e7b;

  /* Primary */
  --color-primary: #2563eb;
  --color-primary-on: #ffffff;
  --color-primary-container: #e8edf8;
  /* ... 45 more color tokens, typography, spacing, radius, shadows */
}

加上WCAG对比验证：

{ "light": "31/31 pass", "dark": "31/31 pass" }

例子

示例1：为品牌颜色生成标记

用户提示： “使用品牌颜色#2563eb为我的应用程序生成设计系统”

预期行为：

• 呼叫 generate_tokens 带十六进制 #2563eb，心情 "cool"
• 返回完整的CSS自定义属性块
• 包括谷歌字体 @import 统一资源定位符
• 显示WCAG对比度结果：亮模式和暗模式均为31/31通过

示例2：预览和比较情绪

用户提示： “在我提交之前，以柔和的心情向我展示#e05aad的预览”

预期行为：

• 呼叫 get_token_preview
• 返回简洁摘要：原色、字体配对、半径、阴影样式、对比度遍数
• 包括a url 到tokven.dev进行可视化预览——在提交完整版本之前与用户共享
• 没有完整的CSS——快速比较视图

示例3：检查颜色是否可用

用户提示： “#2563eb上的白色文本是否通过WCAG AA？”

预期行为：

• 呼叫 validate_contrast 随着 #ffffff 和 #2563eb
• 返回比率（4.52:1），大文本AA通过，正常文本AA失败，AAA失败
• 清除每个WCAG标准的通过/失败

隐私

tokven mcp完全在您的本地机器上运行。在令牌生成过程中不收集数据，不发出网络请求，也不需要帐户。MCP服务器不收集使用数据。

完整政策：https://tokven.dev/#/privacy

需求

Node.js>=18

许可证

麻省理工学院