Design Token Bridge Mcp — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited Design Token Bridge Mcp (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<a href="https://glama.ai/mcp/servers/kenneives/design-token-bridge-mcp"> <img width="380" height="200" src="https://glama.ai/mcp/servers/kenneives/design-token-bridge-mcp/badge" /> </a> <br> <a href="https://agentgraph.co/profile/1e7b584d-2621-47a8-a314-20b9a908353a"> <img src="https://agentgraph.co/api/v1/badges/trust/1e7b584d-2621-47a8-a314-20b9a908353a.svg?style=detailed&theme=dark" alt="AgentGraph Trust Score" height="30" /> </a>
<sub>Verified on <a href="https://agentgraph.co">AgentGraph</a> — trust infrastructure for AI agents. <a href="https://agentgraph.co/profile/1e7b584d-2621-47a8-a314-20b9a908353a">View profile</a></sub>
An MCP server that translates design tokens between platforms. Extract tokens from Tailwind, CSS, Figma, or W3C DTCG format — then generate native themes for Material 3 (Kotlin), SwiftUI (with Liquid Glass), Tailwind, and CSS Variables.
Built for the v0 → Figma → Claude Code design pipeline.
┌──────────────┐ ┌──────────────┐ ┌────────────────────────┐
│ Tailwind │ │ │ │ Material 3 (Kotlin) │
│ CSS Vars │────▶│ Universal │────▶│ SwiftUI (Swift) │
│ Figma Vars │ │ Token │ │ Tailwind Config │
│ W3C DTCG │ │ Schema │ │ CSS Variables │
└──────────────┘ └──────────────┘ └────────────────────────┘
Extractors Bridge Generatorsnpm install -g design-token-bridge-mcpgit clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run buildAdd to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):
{
"mcpServers": {
"design-token-bridge": {
"type": "stdio",
"command": "npx",
"args": ["-y", "design-token-bridge-mcp"]
}
}
}Or if installed from source:
{
"mcpServers": {
"design-token-bridge": {
"type": "stdio",
"command": "node",
"args": ["/path/to/design-token-bridge-mcp/build/index.js"]
}
}
}| Tool | Input | Description |
|---|---|---|
extract_tokens_from_tailwind | tailwind.config.js content | Parses colors, fontSize, spacing, borderRadius, boxShadow |
extract_tokens_from_css | CSS file content | Extracts --color-*, --space-*, --radius-*, --shadow-* custom properties |
extract_tokens_from_figma_variables | Figma Variables API JSON | Parses COLOR, FLOAT types, resolves aliases, handles multi-mode |
extract_tokens_from_json | W3C DTCG format JSON | Parses $value/$type/$description, resolves {aliases}, handles groups |
| Tool | Output | Description |
|---|---|---|
generate_material3_theme | Kotlin (Jetpack Compose) | lightColorScheme(), Typography, Shapes with M3 naming |
generate_swiftui_theme | Swift (SwiftUI) | Color extensions, Font structs, optional Liquid Glass (iOS 26+) |
generate_tailwind_config | tailwind.config.js | Theme extend block with rem units, ESM or CJS |
generate_css_variables | CSS custom properties | :root block with light/dark mode via prefers-color-scheme |
| Tool | Description |
|---|---|
validate_contrast | WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
All tools speak this common format:
{
"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" }
}
}Use extract_tokens_from_tailwind with the contents of my tailwind.config.jsTake 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)Run validate_contrast on those tokens at AAA levelSee the examples/qt-games/ directory for a complete responsive landing page built entirely from MCP-generated tokens, including:
qt-games-tokens.json — extracted universal tokenstailwind.config.js — generated Tailwind configvariables.css — generated CSS custom propertiescontrast-report.json — WCAG validation (AAA pass)index.html + styles.css — responsive landing page using the generated tokensThis MCP works with free tiers of both v0 and Figma. See the setup guides:
# 91 unit tests
npm test
# 31 Playwright visual/responsive tests
npm run test:e2eSee CONTRIBUTING.md for development setup, project structure, and PR guidelines.
MIT — see LICENSE.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.