Best Design Tokens AI Skills & MCP Servers
7 curated Design Tokens skills and MCP servers — install any of them into Claude, Cursor, ChatGPT, n8n, or any AI stack with one command.
Rhizophora
MCP server for React Native spatial integrity and layout audit. Provides Ground Truth for your component tree by detecting margin pollution, token deviations, bridge crossings, and render traps. 15 tools for structural analysis, layout auditing, performan
Design Token Bridge
MCP server that translates design tokens between platforms — Tailwind, Figma, CSS to Material 3, SwiftUI, and CSS Variables
Cli
Design-system memory for coding agents — give Claude Code, Cursor, and Codex memory of your tokens, components, and Figma so they edit your app without breaking the design.
Extract Design System
Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.
Swatchbook
Model Context Protocol server for swatchbook — exposes a DTCG project's tokens, axes, and diagnostics to AI agents without running Storybook.
Spectrum Design Data
Model Context Protocol server for Spectrum design data including tokens, schemas, and component anatomy
Figma Ai Context
MCP server that transforms Figma API data into AI-friendly formats for LLM code generation
About Design Tokens skills on iClaude
iClaude is the universal install layer for AI skills. Every Design Tokens skill on this page can be installed into Claude Code, Claude Desktop, Cursor, ChatGPT, n8n, Codex, and more — using a single copy-paste command. No config drift, no per-stack adapters, no manual MCP wiring.