Design Token Bridge MCP

设计令牌桥mcp

已验证 AgentGraph --AI代理的信任基础设施。 查看资料

在平台之间转换设计令牌的MCP服务器。从Tailwind、CSS、Figma或W3C DTCG格式中提取标记，然后为Material 3（Kotlin）、SwiftUI（带Liquid Glass）、Tailwind和CSS变量生成原生主题。

为 v0 → Figma→ 克劳德代码 设计管道。

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  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代码进行配置

添加到您的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个）

提取器——输入→ 通用代币

生成器——通用代币→ 输出

验证

通用令牌模式

所有工具都使用这种通用格式：

{
  "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 --生成的顺风配置
• variables.css --生成的CSS自定义属性
• contrast-report.json --WCAG验证（AAA通过）
• index.html + styles.css --使用生成的令牌的响应式登录页面

v0+Figma免费等级设置

此MCP适用于v0和Figma的自由层。请参阅设置指南：

• v0安装指南 --免费层注册，web UI工作流程
• Figma设置指南 --免费MCP配置（每月6次通话）
• Claude代码设置 --完整管道配置
• 令牌提取指南 --API不可用时手动提取

技术栈

• TypeScript+Node.js
• @模型上下文协议/sdk v1.x（标准输入输出传输）
• 黄道带 用于模式验证
• 零重量级依赖——没有Babel，没有PostCSS，没有样式字典

测试

# 91 unit tests
npm test

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

贡献

看 贡献.md 用于开发设置、项目结构和PR指南。

许可证

麻省理工学院——见 许可证.