What is the Design Token Bridge?

The Design Token Bridge is an MCP server that translates design tokens from various sources like Figma, Tailwind, CSS, or W3C DTCG, into native themes for platforms such as Material 3, SwiftUI, Tailwind, and CSS Variables.

Does Design Token Bridge include accessibility features?

Yes, it features a `validate_contrast` tool that performs WCAG AA/AAA contrast checking for color pairs, helping to ensure the generated themes are accessible and compliant.

What platforms can Design Token Bridge extract tokens from?

It supports multi-platform token extraction from Tailwind configs, CSS files, Figma Variables API JSON, and W3C DTCG format JSON, providing a unified input approach.

What native theme formats can Design Token Bridge generate?

It can generate native themes for Material 3 (Kotlin/Jetpack Compose), SwiftUI (Swift), Tailwind CSS configurations, and standard CSS custom properties (CSS Variables).

How does Design Token Bridge integrate with Claude Code?

It's designed as an MCP (Model Context Protocol) server, allowing seamless integration with Claude Code via configuration in your `~/.claude/settings.json` or project `.mcp.json` files.

Design Token Bridge

Name: Design Token Bridge
Author: kenneives

Translates design tokens between various platforms like Tailwind, CSS, Figma, and W3C DTCG to generate native themes for Material 3, SwiftUI, Tailwind, and CSS Variables.

Design Token Bridge

Translates design tokens between various platforms like Tailwind, CSS, Figma, and W3C DTCG to generate native themes for Material 3, SwiftUI, Tailwind, and CSS Variables.

概要

The Design Token Bridge is an MCP server engineered to seamlessly translate design tokens across diverse platforms. It extracts tokens from sources like Tailwind configurations, CSS files, Figma Variables, or the W3C DTCG format, then converts them into native themes for Material 3 (Kotlin), SwiftUI (with optional Liquid Glass), Tailwind configurations, and standard CSS Variables. This tool is a critical component in the v0 → Figma → Claude Code pipeline, enabling designers and developers to maintain a consistent design language across web and mobile applications while integrating with AI-powered code generation workflows.

主な機能

Multi-platform token extraction from Tailwind, CSS, Figma, and W3C DTCG.
Native theme generation for Material 3 (Kotlin), SwiftUI, Tailwind, and CSS Variables.
Seamless integration as an MCP server with Claude Code settings.
Utilizes a Universal Token Schema for consistent data representation.
0 GitHub stars
WCAG AA/AAA contrast validation for accessibility compliance.

ユースケース

Automating design token synchronization across web, Android, and iOS platforms.
Integrating design systems into AI-powered code generation workflows (v0 → Figma → Claude Code).
Ensuring accessibility compliance for generated themes through automated contrast checking.

概要

主な機能

Multi-platform token extraction from Tailwind, CSS, Figma, and W3C DTCG.
Native theme generation for Material 3 (Kotlin), SwiftUI, Tailwind, and CSS Variables.
Seamless integration as an MCP server with Claude Code settings.
Utilizes a Universal Token Schema for consistent data representation.
0 GitHub stars
WCAG AA/AAA contrast validation for accessibility compliance.

ユースケース

Automating design token synchronization across web, Android, and iOS platforms.
Integrating design systems into AI-powered code generation workflows (v0 → Figma → Claude Code).
Ensuring accessibility compliance for generated themes through automated contrast checking.