┌──────────────┐     ┌──────────────┐     ┌────────────────────────┐
│  Tailwind     │     │              │     │  Material 3 (Kotlin)   │
│  CSS Vars     │────▶│  Universal   │────▶│  SwiftUI (Swift)       │
│  Figma Vars   │     │  Token       │     │  Tailwind Config       │
│  W3C DTCG     │     │  Schema      │     │  CSS Variables         │
└──────────────┘     └──────────────┘     └────────────────────────┘
    Extractors           Bridge              Generators

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

{
  "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"]
    }
  }
}

{
  "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.js

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)

Run validate_contrast on those tokens at AAA level

# 91 unit tests
npm test

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