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.
┌──────────────┐ ┌──────────────┐ ┌────────────────────────┐
│ Tailwind │ │ │ │ Material 3 (Kotlin) │
│ CSS Vars │────▶│ Universal │────▶│ SwiftUI (Swift) │
│ Figma Vars │ │ Token │ │ Tailwind Config │
│ W3C DTCG │ │ Schema │ │ CSS Variables │
└──────────────┘ └──────────────┘ └────────────────────────┘
Extractors Bridge GeneratorsInstall
From npm
npm install -g design-token-bridge-mcpFrom source
git clone https://github.com/kenneives/design-token-bridge-mcp.git
cd design-token-bridge-mcp
npm install && npm run buildConfigure with Claude Code
Add to your Claude Code MCP settings (~/.claude/settings.json or project .mcp.json):
