Token MCP Server

Generate complete design token systems with natural language through your AI assistant

Try it with your AI assistant

Try something like...

Generate a complete design token system for my healthtech app with a deep blue primary color (#1e40af) and warm orange secondary (#f97316). Include all color scales, typography, spacing, and shadows. Export as Tailwind v4 CSS variables.

What is MCP?

The Model Context Protocol (MCP) allows AI assistants like Claude, GitHub Copilot, and others to connect to external tools and services. This means you can ask your AI assistant to generate design tokens for you directly!

Installation

🌐

Hosted Server

Use our hosted MCP server - no installation required. Always up-to-date.

https://tokens.flett.cc/mcp

📦

NPM Package

Install locally via npm for offline use and privacy.

View on NPM →

Setup

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)

Option 1: Hosted Server

{
  "mcpServers": {
    "tokens": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://tokens.flett.cc/mcp"]
    }
  }
}

Option 2: Local NPM Package

First: npm install -g @flett/design-tokens-mcp-server

{
  "mcpServers": {
    "tokens": {
      "command": "toke-mcp"
    }
  }
}

VS Code + GitHub Copilot

Add to settings.json:

{
  "github.copilot.chat.mcp": {
    "servers": {
      "tokens": {
        "url": "https://tokens.flett.cc/mcp"
      }
    }
  }
}

Cursor

Add to ~/.cursor/mcp.json:

{
  "tokens": {
    "url": "https://tokens.flett.cc/mcp"
  }
}

Example Prompts

"Generate a token system with blue as the primary color"

"Create dark mode tokens for a health tech app"

"Make a warm color palette with orange and brown"

"Export my tokens as Tailwind v4 CSS"