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

PDFをダウンロード Markdown版

Design Token TransformerをChatGPTとClaudeに接続

一度設定すれば、ChatGPT、Claude、Cursorなど、お気に入りのクライアントでどれでも動きます。すべては裏側で安全に動くので、あなたは安心して本当に大切なことに集中できます。プラットフォーム間のデザイン仕様の同期を自動化し、開発効率を最大化します。

このConnectorについてAIに質問

Vinkiusが開発・運用・ホスティング。

MCP認証済み · 本番環境対応 · Vinkius保証

Waiting for input…

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

AIが仕事をこなします。私たちが安全に守ります。

他のAIツールではこれは手に入りません。ワークフローはお気に入りのクライアントで動き、アカウントは守られ、エージェントに何を許すかはあなたが決めます。これこそ乗り換えるべき理由です。

すべてのConnectorは当社のインフラストラクチャの中、あなたのワークフローが動くのと同じ場所にあります。下の3つはすでにその一部で、背景で静かに働き、あなたが意識する必要がないようにしてくれます。追加するものも、設定するものも、心配することもありません。

V8 Isolate01

各Connectorは独自の密閉された環境内で実行されます。

各Connectorは独自の封印されたV8ランタイムで実行され、ファイル、システム、他のサーバーへのアクセスはありません。Connectorが自身のリクエストを超えて中身を見ることはありません。

Kill Switch02

1つのスイッチで全エージェントを停止。即座に。

1つのアクションで全Connectorを無効化し、全トークンを失効させ、全セッションを終了します。AI Governanceが記録を保持します。

ユーザーごとのFinOps03

驚きではなく、一時停止する支出制限。

各ユーザーは自身の接続と認証情報を持ち、他から隔離されています。支出制限を超える操作は課金されず、あなたの承認を待ちます。

3つのコントロールが、AIが接続するレイヤーに組み込まれています。

1つのConnector、すべてのAI

Design Token Transformerは、最も人気のあるAIクライアントで動きます。

これは最も人気のあるクライアントで、それぞれにステップバイステップのガイドがあります。リンクは1つ、設定は一度、ガバナンスと可視性は最初から組み込み。しかもすべてMCP標準で動くため、同じ接続は他の対応クライアントでもそのまま使えます。作り直す必要はありません。

自社アプリを作っていますか？Connectorはあなたのもの。

Design Token Transformerを働かせるのにクライアントは不要です。同じホストされた接続が、あなたのアプリやエージェントのコードにそのまま組み込め、すべてのリクエストに同じガバナンスが適用されます。作るのも、会話するのも、1つの接続で両方。

実測値、推定値ではない

平均644ms。本番環境で高速。

Design Token Transformerは本番サービスに対して毎日チェックされています。

日次平均最大865ms

10月3日今日

最速日: 525ms
最遅日: 865ms
14日間の傾向: 遅延傾向+32%

クライアントを接続

1つのURL。すべてのクライアント。

Connectorを有効化し、リンクをコピーして、いつも使うクライアントに貼り付けるだけ。0個の機能がすぐに使えます。

プレビューアクセス · プロバイダー認証ではありません

vk_preview_* トークンは Vinkius のプレビューインフラに属します。Claude が Design Token Transformer のケイパビリティを検出して表示できるようにし、AI の中でその体験を確認できます。

このトークンは Design Token Transformer のアカウントを認証するものではありません。認証情報や実際のアカウントデータが必要なアクションは、Connector を有効化してサービスを承認するまで実行されない場合があります。

Design Token Transformer Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_oBt8nkvneLk3QbaoBsY9wQ77Y2B5gxQerVQ48amI/mcp

Claude Desktop

以下の手順で数秒で接続できます。

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.

設定 · claude_desktop_config.jsonコピー

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

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

各クライアントの手順ガイドはこちらです。接続方法

Claude向けのガイド付きセットアップ？ Design Token TransformerをClaudeや他のAIに設定する

このConnectorが対応するすべてのAIクライアントを見る ↑

対象ユーザー

Design Token Transformerユーザーが任せたい仕事のために。

デザインシステムを構築し、複数のプラットフォームへ展開するエンジニアやデザイナーに最適です。デザインの整合性を保ちながら、手動の変換作業を削減したいチーム向けです。

01
フロントエンドエンジニア
デザインツールからTailwindやCSSなどのコードへ、トークンを迅速に変換して実装に活用できます。
02
デザインシステムエンジニア
プラットフォームを横断する一貫したデザイン仕様の管理と、自動生成プロセスを構築できます。
03
UI/UXデザイナー
カラーパレットの生成やダークモードへの対応を、開発プロセスと同期させながらスムーズに行えます。

FAQ

Design Token Transformerユーザーからのよくある質問。

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.

さがす

Developer Toolsの他のコネクタ

『Design Token Transformer』を Claude、Cursor、ChatGPT などに接続

Design Token TransformerをChatGPTとClaudeに接続