design-token-bridge-mcp

— 已签名、可离线验证的工具安全评级

design-token-bridge-mcp

_{已通过 AgentGraph 验证 — 为 AI Agent 提供的信任基础设施。查看个人资料}

一个用于在不同平台间转换设计令牌的 MCP 服务。可从 Tailwind、CSS、Figma 或 W3C DTCG 格式中提取令牌，然后为 Material 3（Kotlin）、SwiftUI（支持 Liquid Glass）、Tailwind 和 CSS Variables 生成原生主题。

专为 v0 → Figma → Claude Code 设计流程打造。

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  Tailwind     │     │              │     │  Material 3 (Kotlin)   │
│  CSS Vars     │────▶│  Universal   │────▶│  SwiftUI (Swift)       │
│  Figma Vars   │     │  Token       │     │  Tailwind Config       │
│  W3C DTCG     │     │  Schema      │     │  CSS Variables         │
└──────────────┘     └──────────────┘     └────────────────────────┘
    Extractors           Bridge              Generators

安装

从 npm 安装

npm install -g design-token-bridge-mcp

从源码安装

git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run build

在 Claude Code 中配置

将其添加到 Claude Code MCP 设置中（~/.claude/settings.json 或项目的 .mcp.json）：

{
  "mcpServers": {
    "design-token-bridge": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "design-token-bridge-mcp"]
    }
  }
}

如果从源码安装，则使用：

{
  "mcpServers": {
    "design-token-bridge": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/design-token-bridge-mcp/build/index.js"]
    }
  }
}

工具（共 9 个）

提取器 — 输入 → 通用令牌

工具	输入	说明
extract_tokens_from_tailwind	tailwind.config.js 内容	解析颜色、fontSize、spacing、borderRadius、boxShadow
extract_tokens_from_css	CSS 文件内容	提取 --color-*、--space-*、--radius-*、--shadow-* 自定义属性
extract_tokens_from_figma_variables	Figma Variables API JSON	解析 COLOR、FLOAT 类型，解析别名并处理多模式
extract_tokens_from_json	W3C DTCG 格式 JSON	解析 $value/$type/$description，解析 {aliases} 并处理分组

生成器 — 通用令牌 → 输出

工具	输出	说明
generate_material3_theme	Kotlin（Jetpack Compose）	使用 M3 命名生成 lightColorScheme()、Typography、Shapes
generate_swiftui_theme	Swift（SwiftUI）	生成 Color 扩展、Font 结构体，可选支持 Liquid Glass（iOS 26+）
generate_tailwind_config	tailwind.config.js	使用 rem 单位生成主题扩展块，支持 ESM 或 CJS
generate_css_variables	CSS 自定义属性	生成 :root 块，通过 prefers-color-scheme 支持浅色/深色模式

验证

工具	说明
validate_contrast	对颜色对进行 WCAG AA/AAA 对比度检查，并返回通过/未通过结果和比率

通用令牌架构

所有工具都使用以下通用格式：

{
  "colors": {
    "primary": { "value": "#6750A4", "description": "Brand primary", "category": "primary" }
  },
  "typography": {
    "display-large": { "fontSize": 57, "lineHeight": 64, "fontWeight": 400, "fontFamily": "Inter" }
  },
  "spacing": { "xs": 4, "sm": 8, "md": 16 },
  "radii": { "sm": 8, "md": 12, "lg": 16 },
  "elevation": {
    "low": {
      "shadowColor": "#000000",
      "shadowOffset": { "x": 0, "y": 2 },
      "shadowRadius": 4,
      "shadowOpacity": 0.1
    }
  },
  "motion": {
    "fast": { "duration": 150, "easing": "ease-out" }
  }
}

示例：完整流程

1. 从 Tailwind 配置中提取令牌

Use extract_tokens_from_tailwind with the contents of my tailwind.config.js

2. 根据提取的令牌生成原生主题

Take those tokens and run them through:
- generate_tailwind_config (for the web app)
- generate_material3_theme (for Android)
- generate_swiftui_theme with liquidGlass=true (for iOS)
- generate_css_variables (for a vanilla CSS fallback)

3. 验证无障碍性

Run validate_contrast on those tokens at AAA level

输出示例

完整的响应式落地页示例请参阅 examples/qt-games/ 目录。该页面完全使用 MCP 生成的令牌构建，包含：

• qt-games-tokens.json — 提取的通用令牌
• tailwind.config.js — 生成的 Tailwind 配置
• variables.css — 生成的 CSS 自定义属性
• contrast-report.json — WCAG 验证（通过 AAA）
• index.html + styles.css — 使用生成令牌构建的响应式落地页

v0 + Figma 免费版配置

此 MCP 服务可与 v0 和 Figma 的免费版配合使用。请参阅配置指南：

• v0 配置指南 — 免费版注册、Web UI 工作流
• Figma 配置指南 — 免费版 MCP 配置（每月 6 次调用）
• Claude Code 配置 — 完整流程配置
• 令牌提取指南 — API 不可用时的手动提取方法

技术栈

• TypeScript + Node.js
• @modelcontextprotocol/sdk v1.x（stdio 传输）
• 使用 Zod 进行架构验证
• 无重量级依赖——不使用 Babel、PostCSS 或 Style Dictionary

测试

# 91 unit tests
npm test

# 31 Playwright visual/responsive tests
npm run test:e2e

贡献

开发环境设置、项目结构和 PR 指南请参阅 CONTRIBUTING.md。

许可证

MIT——详见 LICENSE。