What formats can this MCP convert?

It handles JSON, CSS, SCSS, and Tailwind formats for various platforms.

How does it handle dark mode?

The MCP uses OKLCH lightness adjustments to create dark mode versions of your tokens for visual consistency.

Can it generate color scales?

Yes, you can provide anchor colors and the MCP will produce a full 50 to 950 color weight scale.

Does it resolve token aliases?

Yes, it resolves internal aliases to their primitive values during the transformation process.

Which AI clients can use this?

You can use this MCP with any compatible client like Claude, Cursor, or Windsurf.

How can I convert tokens from JSON to Tailwind?

Use the transform_tokens capability, specifying 'json' as your sourceFormat and 'tailwind' as your targetFormat. Capabilities available: your_tool_name.

Can this capability handle color aliases?

Yes, the transform_tokens capability automatically resolves all internal references and aliases to their primitive values during transformation.

How do I generate a dark mode theme?

Use the generate_dark_mode_tokens capability with your existing light-mode JSON token data. It uses OKLCH lightness inversion for visual consistency.

An astronaut overseeing a futuristic data hub

Download PDF Markdown Version

Connect Design Token Transformer to ChatGPT and Claude

Set it up once and it works in ChatGPT, Claude, Cursor, and any other client you love. It all runs safely in the background, so you can relax and focus on what really matters. Turn design variables into production-ready code instantly.

Ask AI about this Connector

Developed, maintained, and hosted by Vinkius.

MCP VERIFIED · PRODUCTION READY · VINKIUS GUARANTEED

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

Your AI does the work. We keep it safe and sound.

No other AI tool gives you this. Your workflow runs in the client you already love, your account stays protected, and you decide what the agent can and cannot do. It is the whole reason to make the switch.

Each Connector lives inside our infrastructure, the same place where your workflow runs. The three things below are already part of it, working quietly in the background so you never have to think about them. Nothing to add, nothing to set up, nothing to worry about.

V8 Isolate01

Each Connector runs inside its own sealed environment.

Each Connector runs inside its own sealed V8 runtime — no access to your files, your system, or other servers. A Connector never sees past its own request.

Kill Switch02

One switch stops every agent. Instantly.

One action deactivates every Connector, revokes every token, and ends every session at once. AI Governance keeps the record.

FinOps per User03

Spending limits that pause instead of surprise.

Every user keeps their own connections and credentials, isolated from everyone else. Anything that would cross your spending limit is held for your approval, not billed.

Three controls, built into the layer your AI connects through.

One connector, every AI

Design Token Transformer works with the most popular AI clients.

These are the most popular clients, each with a step-by-step guide: one link, set up once, with governance and visibility built in. And because everything runs on the MCP standard, the same connection also works in any other compatible client — nothing to rebuild.

Building your own app? The connector is yours to use.

You don't need a client to put Design Token Transformer to work: the same hosted connection plugs into your own applications and agent code, with the same governance on every request. Build with it, chat with it — one connection for both.

Observed, not estimated

644ms average. Fast in production.

Design Token Transformer is checked daily against the live service.

Daily averagePeak 865ms

Oct 3Today

Fastest day: 525ms
Slowest day: 865ms
14-day trend: Slowing+32%

Connect your client

One URL. Every client.

Activate the Connector, copy your link, and paste it into the client you already use. 0 capabilities arrive ready to run.

Preview access · not provider authentication

The vk_preview_* token belongs to Vinkius preview infrastructure. It lets Claude discover and display the capabilities of Design Token Transformer, so you can see the experience inside your AI.

It does not authenticate your account with Design Token Transformer. Actions requiring credentials or live account data may not run until you activate the Connector and authorize the service.

Design Token Transformer Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp

Claude Desktop

Follow the steps below to connect in seconds.

1In Claude Desktop, open Settings → Connectors.
2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3Click Add and start a new chat — Design Token Transformer capabilities are ready to use.

Configuration · claude_desktop_config.jsonCopy

{
  "mcpServers": {
    "design-token-transformer-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp"
    }
  }
}

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

Step-by-step instructions for each client are in the guide. How to connect

Guided setup for Claude? Set up Design Token Transformer in Claude and other AIs

See all the AI clients this connector works with ↑

Who it's for

Built for the work Design Token Transformer owners hand off.

This MCP is built for teams managing complex design systems across multiple platforms.

01
Design Systems Engineers
They use the MCP to automate the distribution of tokens to various codebases.
02
Frontend Developers
They use it to quickly convert design variables into Tailwind or CSS implementations.
03
UI/UX Designers
They use it to generate consistent color scales and dark mode variants.

FAQ

Questions Design Token Transformer owners ask.

01
What formats can this MCP convert?
It handles JSON, CSS, SCSS, and Tailwind formats for various platforms.
02
How does it handle dark mode?
The MCP uses OKLCH lightness adjustments to create dark mode versions of your tokens for visual consistency.
03
Can it generate color scales?
Yes, you can provide anchor colors and the MCP will produce a full 50 to 950 color weight scale.
04
Does it resolve token aliases?
Yes, it resolves internal aliases to their primitive values during the transformation process.
05
Which AI clients can use this?
You can use this MCP with any compatible client like Claude, Cursor, or Windsurf.
06
How can I convert tokens from JSON to Tailwind?
Use the transform_tokens capability, specifying 'json' as your sourceFormat and 'tailwind' as your targetFormat. Capabilities available: your_tool_name.
07
Can this capability handle color aliases?
Yes, the transform_tokens capability automatically resolves all internal references and aliases to their primitive values during transformation.
08
How do I generate a dark mode theme?
Use the generate_dark_mode_tokens capability with your existing light-mode JSON token data. It uses OKLCH lightness inversion for visual consistency.

Explore

More in Developer Tools

Connect Design Token Transformer to Claude, Cursor, ChatGPT & more

Connect Design Token Transformer to ChatGPT and Claude

Your AI does the work. We keep it safe and sound.