Design Token Transformer Connector for AI agents.

Q: How can I create a 50-950 color scale with Design Token Transformer?

Provide three anchor colors, and the tool will automatically calculate and produce a full 50-950 weight scale for your design system.

Q: Can Design Token Transformer resolve design aliases?

Yes, when you use the conversion tools, it automatically resolves internal aliases to their primitive values to ensure your tokens are accurate.

Q: How can I convert tokens from JSON to Tailwind?

Use the transformtokens tool, specifying 'json' as your sourceFormat and 'tailwind' as your targetFormat. Tools available: yourtoolname.

Q: Can this tool handle color aliases?

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

5 live capabilities

Sync and convert design tokens across web, mobile, and CSS platforms.

Live agent request Design Token Transformer / Connector

Waiting for input…

AI Agent

Why people use Design Token Transformer

Design Token Transformer for Multi-Platform CSS Syncing

This Connector changes the game by letting your agent handle the heavy lifting. You give it the source tokens, and it spits out the correct syntax for whatever platform you're targeting. You get a perfectly synced design system across your entire stack without the copy-paste errors.

What Vinkius changes

You get perfectly formatted design tokens for any platform without manual calculation.

Use it from Claude, ChatGPT, Cursor or another AI client you already have.

One account · 6,100+ Connectors

Real-world use case 01

Syncing Figma to Tailwind

A designer has a JSON file from Figma and needs it in Tailwind.
Real-world use case 02

Building a Dark Mode

A developer needs a dark theme for a primary brand color.
Real-world use case 03

Creating a Color Palette

A brand manager provides three colors for a new UI.

Complete set · 5capabilities

The complete Design Token Transformer capability set.

These are the exact actions your AI can choose when you ask it to work with Design Token Transformer.

Capability set01 / 02

01—03

3 capabilities in this set.

Part of 5 available through Design Token Transformer.

01 Capability
Convert tokens between syntaxes
Swap design tokens between JSON, CSS, SCSS, and Tailwind formats instantly.
02 Capability
Resolve internal aliases
Automatically map aliases to their primitive values during conversion.
03 Capability
Generate dark mode themes
Create dark mode palettes by adjusting OKLCH lightness for visual consistency.

Capability set02 / 02

04—05

2 capabilities in this set.

Part of 5 available through Design Token Transformer.

04 Capability
Produce color weight scales
Generate a complete 50-950 color weight scale from three anchor colors.
05 Capability
Sync multi-platform styles
Keep your design language consistent across web, iOS, and Android apps.

Set up in minutes

One URL. Then ask Design Token Transformer to work.

Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Design Token Transformer from the conversation.

Choose your client

Live preview

Advanced clients IDE · CLI

Claude · Web + desktop

Official guide ↗

Connector URL · ready to paste

Streamable HTTP

https://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp

Step 01

Open Connectors

In Claude Web or Claude Desktop, open Settings and choose Connectors.
Step 02

Add the URL

Choose Add custom connector, name it Design Token Transformer, and paste the URL above.
Step 03

Turn it on in chat

Select +, open Connectors, and enable Design Token Transformer for the conversation.

ChatGPT · Web + desktop

Official guide ↗

Connector URL · ready to paste

Streamable HTTP

https://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp

Step 01

Open MCP settings

On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
Step 02

Add the URL

Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Design Token Transformer URL.
Step 03

Save and start

Save the connection and enable Design Token Transformer in your conversation. Desktop may ask you to restart once.

Cursor · IDE configuration

Official guide ↗

Advanced setup

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

Step 01

Open MCP Settings

Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
Step 02

Add the server config

Paste the JSON configuration above into the mcp.json file that opens
Step 03

Save the file

Cursor will automatically detect the new Connector
Step 04

Start using Design Token Transformer

Open Agent mode in chat and ask: "Using Design Token Transformer, help me...". 5 tools available

VS Code Copilot · IDE configuration

Official guide ↗

Advanced setup

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

Step 01

Create MCP config

Create a .vscode/mcp.json file in your project root
Step 02

Add the server config

Paste the JSON configuration above
Step 03

Enable Agent mode

Open GitHub Copilot Chat and switch to Agent mode using the dropdown
Step 04

Start using Design Token Transformer

Ask Copilot: "Using Design Token Transformer, help me...". 5 tools available

Windsurf · IDE configuration

Official guide ↗

Advanced setup

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

Step 01

Open MCP Settings

Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
Step 02

Add the server

Paste the JSON configuration above into mcp_config.json
Step 03

Save and reload

Windsurf will detect the new server automatically
Step 04

Start using Design Token Transformer

Open Cascade and ask: "Using Design Token Transformer, help me...". 5 tools available

Cline · IDE configuration

Official guide ↗

Advanced setup

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

Step 01

Open Cline MCP Settings

Click the Connectors icon in the Cline sidebar panel
Step 02

Add remote server

Click "Add Connector" and paste the configuration above
Step 03

Enable the server

Toggle the server switch to ON
Step 04

Start using Design Token Transformer

Ask Cline: "Using Design Token Transformer, help me...". 5 tools available

Claude Code · Terminal command

Official guide ↗

Advanced setup

claude mcp add design-token-transformer --transport http "https://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp"

Step 01

Install Claude Code

Run npm install -g @anthropic-ai/claude-code if not already installed
Step 02

Add the Connector

Run the command above in your terminal
Step 03

Verify the connection

Run claude mcp to list connected servers, or type /mcp inside a session
Step 04

Start using Design Token Transformer

Ask Claude: "Using Design Token Transformer, show me...". 5 tools are ready

Where the request belongs

Work Design Token Transformer can move forward.

Built around the request

This is for designers and engineers who are tired of the copy-paste cycle when launching new features. It's for the person who needs to keep a brand consistent across three different apps but doesn't want to do the math twice.

Frontend Developer

Uses it to sync brand colors from a Figma JSON file directly into a Tailwind config on Tuesday afternoons.

Product Designer

Uses it to quickly generate accessible color scales for new UI components during a sprint.

Mobile Developer

Uses it to convert web-based design tokens into formats compatible with iOS or Android.

Build the capability set

Each Connector adds new actions and data without changing how you work.

Browse Connectors

01 1 capability

Tailwind Excellence Prover

AI agents build bloated styling layers containing arbitrary values, div-only layouts, inaccessible contrast, and legacy configurations. This prover enforces strict design token structures (@theme), utility-first compliance, semantic HTML, mobile-first layouts, and interactive focus states.

View Connector

02 10 capabilities

Pixso

Collaborative design platform and UI/UX capability. manage design files, nodes, and teams via AI.

View Connector

03 6 capabilities

Storybook

Connect your AI to Storybook. Explore your design system, inspect UI components, and retrieve implementation guidance programmatically.

View Connector

04 10 capabilities

Lanhu

Product design collaboration platform. manage design files, handoffs, and team feedback via AI.

View Connector

05 10 capabilities

MasterGo

Collaborative design platform and UI/UX capability. manage design files, nodes, and comments via AI.

View Connector

06 1 capability

Design Prover

Every AI frontend looks identical: hero, 3 cards, 3 cards, CTA, rounded-xl, shadow-lg, blue/gray/white. Design Prover forces the agent to prove its design has dramatic hierarchy, unpredictable layout, intentional whitespace, commanding typography, and color with actual personality.

View Connector

Bring your own AI

Change the model, client or framework. Keep Design Token Transformer connected.

Claude
ChatGPT
Gemini
Cursor
VS Code
Windsurf
ZCode
Cline
Zed
Continue
Kiro
Roo Code
Zencoder
Goose
Void
Augment Code
Amp
Qodo
Tabnine
Pieces
Sourcegraph Cody
JetBrains
Warp
Amazon Q
Antigravity
BoltAI
Raycast
Jan
LM Studio
AnythingLLM
Open WebUI
Msty
Cherry Studio
LibreChat
TypingMind
Chorus
5ire
n8n
LangChain
LlamaIndex
CrewAI
Vercel AI SDK

Before you connect

Questions about Design Token Transformer.

The practical details behind the request, access and result.

How can I use Design Token Transformer to sync my brand colors?

You can provide your source design tokens in JSON or CSS and ask your agent to convert them into your target format, such as Tailwind or SCSS, to ensure your brand colors stay consistent across all platforms.

Can Design Token Transformer convert JSON to Tailwind?

Yes, it can convert JSON tokens into Tailwind syntax while also resolving any internal aliases to their base values so your styles don't break.

How to generate a dark mode theme using Design Token Transformer?

Simply provide your primary tokens and ask the agent to generate a dark mode theme. It uses OKLCH lightness adjustments to create a visually consistent dark version of your brand.

Does Design Token Transformer work for Android and iOS?

Yes, it is designed to help you convert and sync design tokens across web, Android, and iOS platforms, making it easy to maintain a unified design language.

How can I create a 50-950 color scale with Design Token Transformer?

Provide three anchor colors, and the capability will automatically calculate and produce a full 50-950 weight scale for your design system.

Can Design Token Transformer resolve design aliases?

Yes, when you use the conversion capabilities, it automatically resolves internal aliases to their primitive values to ensure your tokens are accurate.

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.

One connection away

Give your agent a direct line to Design Token Transformer.

Connect Design Token Transformer once. Keep it beside 6,100+ managed Connectors when the next task needs more.

Explore every Connector No credit card required · Free tier available

Design Token Transformer for Multi-Platform CSS Syncing

You get perfectly formatted design tokens for any platform without manual calculation.

Syncing Figma to Tailwind

Building a Dark Mode

Creating a Color Palette

Convert tokens between syntaxes

Resolve internal aliases

Generate dark mode themes

Produce color weight scales

Sync multi-platform styles

Open Connectors

Add the URL

Turn it on in chat

Open MCP settings

Add the URL

Save and start

Open MCP Settings

Add the server config

Save the file

Start using Design Token Transformer

Create MCP config

Add the server config

Enable Agent mode

Start using Design Token Transformer

Open MCP Settings

Add the server

Save and reload

Start using Design Token Transformer

Open Cline MCP Settings

Add remote server

Enable the server

Start using Design Token Transformer

Install Claude Code

Add the Connector

Verify the connection

Start using Design Token Transformer

Frontend Developer

Product Designer

Mobile Developer

Tailwind Excellence Prover

Pixso

Storybook

Lanhu

MasterGo

Design Prover

Give your agent a direct line to Design Token Transformer.