AIでTailwindのデザイントークンを検証する方法

エージェントが検証ツールを使用してファイルをスキャンし、@theme 設定と一致しないハードコードされた色、余白、フォントサイズを特定します。不一致を検出し、適切なTailwindユーティリティクラスを提案します。コードがデザインシステムから逸脱している箇所を正確に把握できます。

1. 01

   コードベースのスキャン

   エージェントがTailwindの設定とコンポーネントファイルを読み込み、許可された値の基準を構築します。

   validate_tailwind_excellence
2. 02

   違反の検出

   すべてのCSSプロパティとTailwindクラスを、定義されたテーマトークンと比較します。

   validate_tailwind_excellence
3. 03

   代替値のマッピング

   不適切な値が見つかるたびに、エージェントは @theme ブロック内から最も近い変数を探し出します。

   validate_tailwind_excellence
4. 04

   問題のレポート

   コードがデザインシステムから逸脱している箇所を、AIが明確なリストとして提示します。

   validate_tailwind_excellence

Tailwind Excellence Prover Connector

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

コネクタリンクhttps://edge.vinkius.com/vk_preview_FdR5Ea2fMyzzvbauD84P40uMFKV5D3exRd23L6Fl/mcpコピー

Claude Desktop

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

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

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "tailwind-excellence-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_FdR5Ea2fMyzzvbauD84P40uMFKV5D3exRd23L6Fl/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

お好みのクライアントにMCPをリンクするだけです。認証情報は暗号化され、すぐにコードの監査を開始できます。

• 01

  AIがコードを自動的に書き換えることはありますか？

  いいえ。AIは違反を特定し、正しいトークンを提案するだけです。変更をファイルに適用するには、手動で行う必要があります。

• 02

  CSSファイルも修正できますか？

  いいえ。このツールは、プロジェクトファイル内のTailwindクラスとテーマ変数の検証に特化しています。

• 03

  どのようなTailwindの設定でも動作しますか？

  はい。@theme または tailwind.config.js がAIクライアントからアクセス可能であれば動作します。

• 04

  デザイントークンを削除してしまうことはありますか？

  いいえ。検証プロセス中、AIは設定ファイルに対して読み取り専用のアクセス権しか持ちません。

• 05

  値がどのトークンにも一致しない場合はどうなりますか？

  AIはその値を任意の値としてフラグ立てし、テーマの中から論理的に最も近いトークンを提案します。

• Tailwind Excellence Proverについて他に質問がありますか？ Tailwind Excellence Prover Connector の詳細を見る