design-token-bridge-mcp

— 署名付きの、オフラインで検証可能なツール安全性評価

design-token-bridge-mcp

_{AgentGraphで検証済み — AI エージェント向けの信頼インフラストラクチャです。プロフィールを見る}

プラットフォーム間でデザイントークンを変換する MCP サーバーです。Tailwind、CSS、Figma、W3C DTCG 形式からトークンを抽出し、Material 3（Kotlin）、SwiftUI（Liquid Glass 対応）、Tailwind、CSS Variables 向けのネイティブテーマを生成します。

v0 → Figma → Claude Code のデザインパイプライン向けに構築されています。

┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  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 Code で設定する

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 の内容	色、fontSize、spacing、borderRadius、boxShadow を解析します
extract_tokens_from_css	CSS ファイルの内容	--color-*、--space-*、--radius-*、--shadow-* のカスタムプロパティを抽出します
extract_tokens_from_figma_variables	Figma Variables API の JSON	COLOR、FLOAT 型を解析し、エイリアスを解決して、複数モードに対応します
extract_tokens_from_json	W3C DTCG 形式の JSON	$value／$type／$description を解析し、{aliases} を解決して、グループに対応します

ジェネレーター — ユニバーサルトークン → 出力

ツール	出力	説明
generate_material3_theme	Kotlin（Jetpack Compose）	M3 の命名規則を使った lightColorScheme()、Typography、Shapes
generate_swiftui_theme	Swift（SwiftUI）	Color 拡張、Font 構造体、オプションの Liquid Glass（iOS 26 以降）
generate_tailwind_config	tailwind.config.js	rem 単位を使ったテーマ拡張ブロック。ESM または CJS に対応
generate_css_variables	CSS カスタムプロパティ	prefers-color-scheme によるライト／ダークモード対応の :root ブロック

検証

ツール	説明
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.js

2. 抽出したトークンからネイティブテーマを生成する

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

出力例

MCP で生成したトークンだけを使って作成された、完全なレスポンシブ対応ランディングページについては、examples/qt-games/ ディレクトリをご覧ください。以下が含まれています。

• qt-games-tokens.json — 抽出されたユニバーサルトークン
• tailwind.config.js — 生成された Tailwind 設定
• variables.css — 生成された CSS カスタムプロパティ
• contrast-report.json — WCAG 検証（AAA 合格）
• index.html + styles.css — 生成されたトークンを使用したレスポンシブ対応ランディングページ

v0 + Figma 無料プランのセットアップ

この MCP は v0 と Figma の両方の無料プランで利用できます。セットアップガイドをご覧ください。

• v0 セットアップガイド — 無料プランへの登録、Web UI のワークフロー
• Figma セットアップガイド — 無料プランの MCP 設定（月 6 回の呼び出し）
• Claude Code セットアップ — パイプライン全体の設定
• トークン抽出ガイド — API が利用できない場合の手動抽出

技術スタック

• TypeScript + Node.js
• @modelcontextprotocol/sdk v1.x（stdio トランスポート）
• スキーマ検証には Zod を使用
• 重量級の依存関係はゼロ — Babel、PostCSS、Style Dictionary は不要

テスト

# 91 unit tests
npm test

# 31 Playwright visual/responsive tests
npm run test:e2e

コントリビューション

開発環境のセットアップ、プロジェクト構成、PR のガイドラインについては、CONTRIBUTING.md を参照してください。

ライセンス

MIT — LICENSE を参照してください。