{ "markdown": "[![AgentAvow Trust](https://agentavow.com/api/v1/public/scan/kenneives/design-token-bridge-mcp/badge)](https://agentavow.com/check/kenneives/design-token-bridge-mcp) — signed, offline-verifiable tool-safety grade\n\n# design-token-bridge-mcp\n\n\n \n\n
\n\n \"AgentGraph\n\n\nVerified on AgentGraph — trust infrastructure for AI agents. View profile\n\nAn 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.\n\nBuilt for the **v0 → Figma → Claude Code** design pipeline.\n\n```\n┌──────────────┐ ┌──────────────┐ ┌────────────────────────┐\n│ Tailwind │ │ │ │ Material 3 (Kotlin) │\n│ CSS Vars │────▶│ Universal │────▶│ SwiftUI (Swift) │\n│ Figma Vars │ │ Token │ │ Tailwind Config │\n│ W3C DTCG │ │ Schema │ │ CSS Variables │\n└──────────────┘ └──────────────┘ └────────────────────────┘\n Extractors Bridge Generators\n```\n\n## Install\n\n### From npm\n\n```bash\nnpm install -g design-token-bridge-mcp\n```\n\n### From source\n\n```bash\ngit clone https://github.com/kenneives/design-token-bridge-mcp.git\ncd design-token-bridge-mcp\nnpm install && npm run build\n```\n\n## Configure with Claude Code\n\nAdd to your Claude Code MCP settings (`~/.claude/settings.json` or project `.mcp.json`):\n\n```json\n{\n \"mcpServers\": {\n \"design-token-bridge\": {\n \"type\": \"stdio\",\n \"command\": \"npx\",\n \"args\": [\"-y\", \"design-token-bridge-mcp\"]\n }\n }\n}\n```\n\nOr if installed from source:\n\n```json\n{\n \"mcpServers\": {\n \"design-token-bridge\": {\n \"type\": \"stdio\",\n \"command\": \"node\",\n \"args\": [\"/path/to/design-token-bridge-mcp/build/index.js\"]\n }\n }\n}\n```\n\n## Tools (9 total)\n\n### Extractors — Input → Universal Tokens\n\n| Tool | Input | Description |\n|------|-------|-------------|\n| `extract_tokens_from_tailwind` | `tailwind.config.js` content | Parses colors, fontSize, spacing, borderRadius, boxShadow |\n| `extract_tokens_from_css` | CSS file content | Extracts `--color-*`, `--space-*`, `--radius-*`, `--shadow-*` custom properties |\n| `extract_tokens_from_figma_variables` | Figma Variables API JSON | Parses COLOR, FLOAT types, resolves aliases, handles multi-mode |\n| `extract_tokens_from_json` | W3C DTCG format JSON | Parses `$value`/`$type`/`$description`, resolves `{aliases}`, handles groups |\n\n### Generators — Universal Tokens → Output\n\n| Tool | Output | Description |\n|------|--------|-------------|\n| `generate_material3_theme` | Kotlin (Jetpack Compose) | `lightColorScheme()`, `Typography`, `Shapes` with M3 naming |\n| `generate_swiftui_theme` | Swift (SwiftUI) | Color extensions, Font structs, optional Liquid Glass (iOS 26+) |\n| `generate_tailwind_config` | `tailwind.config.js` | Theme extend block with rem units, ESM or CJS |\n| `generate_css_variables` | CSS custom properties | `:root` block with light/dark mode via `prefers-color-scheme` |\n\n### Validation\n\n| Tool | Description |\n|------|-------------|\n| `validate_contrast` | WCAG AA/AAA contrast checking for color pairs with pass/fail + ratios |\n\n## Universal Token Schema\n\nAll tools speak this common format:\n\n```json\n{\n \"colors\": {\n \"primary\": { \"value\": \"#6750A4\", \"description\": \"Brand primary\", \"category\": \"primary\" }\n },\n \"typography\": {\n \"display-large\": { \"fontSize\": 57, \"lineHeight\": 64, \"fontWeight\": 400, \"fontFamily\": \"Inter\" }\n },\n \"spacing\": { \"xs\": 4, \"sm\": 8, \"md\": 16 },\n \"radii\": { \"sm\": 8, \"md\": 12, \"lg\": 16 },\n \"elevation\": {\n \"low\": {\n \"shadowColor\": \"#000000\",\n \"shadowOffset\": { \"x\": 0, \"y\": 2 },\n \"shadowRadius\": 4,\n \"shadowOpacity\": 0.1\n }\n },\n \"motion\": {\n \"fast\": { \"duration\": 150, \"easing\": \"ease-out\" }\n }\n}\n```\n\n## Example: Full Pipeline\n\n### 1. Extract tokens from a Tailwind config\n\n```\nUse extract_tokens_from_tailwind with the contents of my tailwind.config.js\n```\n\n### 2. Generate native themes from the extracted tokens\n\n```\nTake those tokens and run them through:\n- generate_tailwind_config (for the web app)\n- generate_material3_theme (for Android)\n- generate_swiftui_theme with liquidGlass=true (for iOS)\n- generate_css_variables (for a vanilla CSS fallback)\n```\n\n### 3. Validate accessibility\n\n```\nRun validate_contrast on those tokens at AAA level\n```\n\n## Example Output\n\nSee the [`examples/qt-games/`](./examples/qt-games/) directory for a complete responsive landing page built entirely from MCP-generated tokens, including:\n\n- `qt-games-tokens.json` — extracted universal tokens\n- `tailwind.config.js` — generated Tailwind config\n- `variables.css` — generated CSS custom properties\n- `contrast-report.json` — WCAG validation (AAA pass)\n- `index.html` + `styles.css` — responsive landing page using the generated tokens\n\n## v0 + Figma Free Tier Setup\n\nThis MCP works with free tiers of both v0 and Figma. See the setup guides:\n\n- [v0 Setup Guide](./docs/v0-setup.md) — free tier signup, web UI workflow\n- [Figma Setup Guide](./docs/figma-setup.md) — free tier MCP config (6 calls/month)\n- [Claude Code Setup](./docs/claude-setup.md) — full pipeline configuration\n- [Token Extraction Guide](./docs/token-extraction.md) — manual extraction when APIs aren't available\n\n## Tech Stack\n\n- TypeScript + Node.js\n- [@modelcontextprotocol/sdk](https://github.com/modelcontextprotocol/typescript-sdk) v1.x (stdio transport)\n- [Zod](https://github.com/colinhacks/zod) for schema validation\n- Zero heavyweight dependencies — no Babel, no PostCSS, no Style Dictionary\n\n## Tests\n\n```bash\n# 91 unit tests\nnpm test\n\n# 31 Playwright visual/responsive tests\nnpm run test:e2e\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup, project structure, and PR guidelines.\n\n## License\n\nMIT — see [LICENSE](./LICENSE).\n", "bytes": 6450, "sha": "a688bd8829afed4cd484162c12481b0eef3555793e9ac008a5131fa1e6c4ab92", "repo_slug": "kenneives/design-token-bridge-mcp", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_kenneives_design_token_bridge__a05f5a28/readme" }