validator

Swatchdog MCP Server

AI エージェントに、準拠して開発するためのビジュアルシステムを提供します。色、角丸、間隔、書体を推測するのではなく、ブランドに一貫したスタイルを記述できるようになります。

✅ Anthropic Connector Directory に掲載されました。 Claude で Settings → Connectors を開き、swatchdog を検索して Connect をクリックするだけです。URL もキーもセットアップも不要です。

---

実際の動作を見る

• claude.ai のライブ実行： コネクターセッションのウォークスルー →
• テストの全トランスクリプト（すべて成功）： part-b-transcript.txt →

https://github.com/user-attachments/assets/6ae8b242-d6c7-4a29-8892-27b067835308

---

これは何か

Swatchdog は、AI コーディングアシスタント（Claude Code、Claude Desktop、Cursor、Google Antigravity、その他の MCP クライアント、そしてコネクター経由の claude.ai）向けに、デザインシステムからの逸脱をオンデマンドでチェックする Model Context Protocol（MCP）サーバーです。

エージェントからの依頼に応じて、Swatchdog は生成された CSS をデザインシステム（厳選されたパック、または独自のトークン）と照合し、トークンから外れた色、角丸、間隔、書体の値をすべて返します。それぞれに、代わりに使用する最も近いトークンが示されます。チェックはオンデマンドで行われ、ループの主導権はあなたにあります。Swatchdog は逸脱を報告しますが、書き込みを横取りしたり、コードを変更したりすることはありません。

---

Swatchdog を選ぶ理由

AI エージェントは高速ですが、デザインシステムを把握できません。そのため、ブランドに合わない間隔やパレット外の色を作り出し、定義済みのスケールを知らぬ間に無視します。Swatchdog は、ビルドループに決定論的な逸脱チェックを追加します。

1. エージェントが基準を設定します。独自のトークン、またはパックを使用します。
2. 生成した CSS を Swatchdog に渡してチェックします。
3. Swatchdog が具体的な修正案を返します（例：「7px ではなく radius.sm（5px）を使用してください」）。
4. エージェントが修正を適用します。ループもレビューも、あなたが主導します。

ESLint のようなリンターとは何が違いますか？ リンターはコードが有効かどうかをチェックしますが、Swatchdog はデザインがシステムに準拠しているかをチェックします。color: #ff00ff は有効な CSS なので、リンターは問題なく通します。マゼンタがパレットに含まれていないことは分からないからです。Swatchdog は、コードに不備がなくても、まさにその問題を検出します。リンターは壊れたコードを見つけ、Swatchdog は壊れたデザインを見つけます。

トークンや design.md をエージェントに渡すだけではだめですか？ それでも逸脱は起こります。ルールを目の前に置いても、エージェントは近似や補間を行います。ルールを知っていることと、それに従うことは同じではありません。Swatchdog は、実際に逸脱が起きるビルドループの中で準拠状況を検証します。

---

モード

Pack モード — 厳選された Swatchdog ファミリー（Workbench、Showcase、Terminal、および無料の Studio サンドボックス）と照合します。設定は不要です。

BYO モード — 独自のデザインシステムと照合します。エージェントが tailwind.config.js や CSS 変数などからトークンを抽出し、パラメーターとして渡します。コンテンツのみを扱い、ステートレスです。コードやトークンが保存されることはありません。キー不要のコネクタレーンでは無料で試せます。また、$12 のライセンスを購入すると上限なしで利用できます。

インテリジェントな提案 — Swatchdog は逸脱を指摘するだけではありません。トークンから外れた値を最も近い有効なトークンに対応付けます。対象は色（hex/rgb → 最も近いテーマカラー）、角丸、間隔、font-size、font-family です。

対応範囲に関する注記：現在、チェック対象は hex と標準的な色形式です。HSL チャネル表現と複雑な複数ファイルにまたがるトークン解決は、Phase 2 のロードマップに含まれています。

---

ツール

check_design_drift — コネクターエンドポイント · BYO 専用 · キー不要で利用可能

• reference_tokens (object, required) — デザイン トークン。例：{"color":{"primary":"#b06ed0"},"radius":{"md":"6px"}}
• code (string, required) — チェックする CSS／マークアップ
• 違反ごとに、軸 · 検出された値 · 期待されるトークンと値 · 場所を返します

check_drift — メインエンドポイント · CSS をパックまたはカスタムトークンセットと照合します

• content (string, required) — チェックする CSS／マークアップ
• paletteId (string, optional) — パック ID（例：studio-blue-hour）。パックモード
• tokens (object, optional) — 独自のトークンセット。BYO モード
• source (string, optional) — テレメトリータグ（pack、css、tailwind）

---

料金 — 買い切り、サブスクリプションなし

ティア	内容	接続先
無料 — キー不要	共有のレート制限付きレーンでの BYO チェック	コネクターエンドポイント
無料 — サンドボックスキー swt_sandbox_studio	Studio ファミリーとのパックチェック	メインエンドポイント
$12 — ドリフトチェックライセンス	BYO チェック、独自の無制限キー	両方のエンドポイント
$19 / $49 — パックまたはバンドル	プレミアムファミリー（Workbench · Showcase · Terminal）+ 有料キー	両方のエンドポイント

メインエンドポイントで、無料の呼び出し元がプレミアムまたは BYO チェックを試みると、swatchdog.dev を案内する構造化されたアップグレードペイロードが返されます。

---

接続

Claude での接続（最も簡単）： 設定 → コネクター → ディレクトリで swatchdog を検索 → 接続。貼り付けるものはなく、キーも不要です。

その他の MCP クライアント（Cursor、Claude Code、Claude Desktop）— 以下のいずれかを MCP 設定に追加してください。

コネクターエンドポイント — BYO 専用、キー不要（キーを追加するとレート制限が解除されます）：

{
  "mcpServers": {
    "swatchdog-check": {
      "type": "http",
      "url": "https://swatchdog-connector-970396648818.us-central1.run.app/mcp"
    }
  }
}

メインエンドポイント — パック + BYO、ベアラキー（無料のサンドボックスキーを表示）：

{
  "mcpServers": {
    "swatchdog-sandbox": {
      "type": "http",
      "url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp",
      "headers": { "Authorization": "Bearer swt_sandbox_studio" }
    }
  }
}

コネクターを claude.ai に手動で追加する場合：設定 → コネクター → カスタムコネクターを追加 → 上記のコネクター URL を貼り付け → 認証は空欄のままにします。

---

プライバシー

すべてのチェックは要求時のみ実行され、一時的なものです。ソースコード、ファイル、トークンがサーバーに保存されることはありません。 記録するのは、ソースタグ、パック、検出件数といった最小限の利用メタデータのみです。ライセンスキー、コード、トークンは記録しません。ポリシー全文：swatchdog.dev/privacy.html。

---

swatchdog.dev が作成・保守しています · サポート：[email protected] · A Ziola Project