设计令牌桥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个）
提取器——输入→ 通用代币
| 工具 | 输入 | 描述 |
|---|---|---|
extract_tokens_from_tailwind | tailwind.config.js content | 解析颜色、字体大小、间距、边框半径、框阴影 |
extract_tokens_from_css | CSS文件内容 | 提取 --color-*, --space-*, --radius-*, --shadow-* 自定义属性 |
extract_tokens_from_figma_variables | Figma变量API JSON | 解析COLOR、FLOAT类型、解析别名、处理多模式 |
extract_tokens_from_json | W3C DTCG格式JSON | 解析 $value/$type/$description，解决 {aliases}，处理组 |
生成器——通用代币→ 输出
| 工具 | 输出 | 描述 |
|---|---|---|
generate_material3_theme | Kotlin（Jetpack作曲） | lightColorScheme(), Typography, Shapes M3命名 |
generate_swiftui_theme | Swift（SwiftUI） | 颜色扩展、字体结构、可选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.js2.从提取的令牌生成本地主题
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指南。
许可证
麻省理工学院——见 许可证.