Official description7 sourcesMCP servers8d ago

kenneives/design-token-bridge-mcp

MCP server that translates design tokens between platforms — Tailwind, Figma, CSS to Material 3, SwiftUI, and CSS Variables. Built for the v0 → Figma → Claude Code pipeline.

View on GitHub ↗Direct link · no redirect page

Config template (adjust for your client)

claude mcp add design-token-bridge-mcp -- npx -y design-token-bridge-mcp

A pasteable skeleton generated from the repository name. Check the project README for the exact package and arguments.

Star count: 5 ★ · kenneives/design-token-bridge-mcp · read from the GitHub search API · (checked 2026-10-16 20:00:20)
Source: collected from the punkpeye/awesome-mcp-servers list · type: MCP server
Harvest history: first seen 2026-10-09 · last seen 2026-10-16 · seen 32× · listed by 7 sources
Score: score 703 · 5 ★ · 7 sources · mcp

FAQ (answers come from our records)

How do I install it?

We did not find an install command for this repository (our install coverage is only about 4%). Check its README or releases page.

Who is it for?

We filed it under these tags: MCP 服务. The tags come from the entry itself, not a taxonomy we imposed.

Who maintains it?

repository kenneives/design-token-bridge-mcp；first catalogued 2026-10-09；last seen 2026-10-16。There is no official certification or quality rating here — we record sources and dates only.

Third-party quality signals

— signed, offline-verifiable tool-safety grade

以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →

design-token-bridge-mcp
Verified on AgentGraph — trust infrastructure for AI agents. View profile
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.
Install
From npm
From source
Configure with Claude Code
Add to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):
Or if installed from source:
Tools (9 total)
Extractors — Input → Universal Tokens
| 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 |
Generators — Universal Tokens → Output
| 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 |
Validation
| Tool | Description |
|------|-------------|
| validate_contrast | WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |
Universal Token Schema
All tools speak this common format:
Example: Full Pipeline
1. Extract tokens from a Tailwind config
2. Generate native themes from the extracted tokens
3. Validate accessibility
Example Output
See the examples/qt-games/ directory for a complete responsive landing page built entirely from MCP-generated tokens, including:
- qt-games-tokens.json — extracted universal tokens
- tailwind.config.js — generated Tailwind config
- variables.css — generated CSS custom properties
- contrast-report.json — WCAG validation (AAA pass)
- index.html + styles.css — responsive landing page using the generated tokens