Whoogy

Whoogy MCP サーバー — Claude 向け Figma とウェブサイトのデザイン QA

AI を活用した、最速の Figma とウェブサイトのデザイン QA。 この MCP サーバーは Claude を Whoogy に接続し、ページを自動検出して、ビジュアルリグレッションと UI の比較スキャンを実行します。数分で完全なデザイン QA レポートを作成し、リリース前に会話から離れることなく、余白、タイポグラフィ、色、レイアウトのずれを検出できます。

Whoogy MCP とは？

Whoogy はFigma のデザインと公開中のウェブサイトを比較し、ビルドがデザインからどこでずれているかを正確に報告します。ピクセル単位の余白の誤り、フォントの間違い、色の不一致、セクションの欠落、レイアウトの崩れなどを検出します。このリポジトリは、Figma と公開サイトの比較機能を Claude が直接呼び出せるツールとして提供するModel Context Protocol（MCP）サーバーです。別のアプリやブラウザープラグインではなく、AI チャット内でデザイン QA スキャンを実行し、レポートを受け取れます。

Figma からコードへの QA、デザイン QA の自動化、Figma のビジュアルリグレッションテスト、デザインレビュー用の Claude MCP サーバーをお探しなら、これが最適です。

Figma プラグインではなく MCP サーバーを使う理由

Figma と公開中のウェブサイトを QA するツールの多くは、オーバーレイ型のプラグインです。Figma と公開サイトを開き、ページごとに目視で違いを確認します。Whoogy MCP なら、次のように進められます。

• ページの自動検出 — Figma ファイルと公開サイトのルート URL を指定すると、Figma のフレームと公開サイトのルートを自動で照合します。
• コンテキストの切り替え不要 — 同じ会話内で Claude にスキャンの実行、レポートの確認、再実行を依頼できます。
• スクリーンショットだけでなく、構造化された検出結果 — 問題はすべて、重大度（critical → low）と種類（余白、タイポグラフィ、色、レイアウト、要素の欠落）ごとに分類されます。単なるビジュアル差分画像ではありません。
• 数時間ではなく数分 — 複数ページの完全な比較レポートが数分で作成されるため、大規模なリリース前だけでなく、デプロイのたびにデザイン QA を実施できます。

Claude に接続する

これはリモート MCP サーバーです。インストールも API キーのコピーも必要ありません。Claude は Whoogy 独自のサインイン（OAuth 2.1 + PKCE）を通じて認証するため、承認した Whoogy アカウントに対してのみ動作します。

Claude.ai / Claude Desktop — Settings → Connectors → Add custom connector の順に選択し、次を貼り付けます。

https://mcp.whoogy.com/mcp

Claude に Whoogy のサインイン／同意ページが表示されます。一度承認すれば接続完了です。

その他の MCP クライアント（Cursor、VS Code Copilot など）でも、リモート HTTP と OAuth コネクターに対応していれば、同じ URL を指定できます。

できること

ツール	説明
check_credits	接続中のアカウントに残っている Whoogy クレジット残高を確認します
list_projects	アカウントの Whoogy プロジェクト（公開中のサイトと Figma ファイルの組み合わせ）を一覧表示します
list_recent_scans	最近の QA スキャンを一覧表示します。jobId、公開 URL、Figma ファイル、ステータス、日付が含まれます
check_figma_tier	Figma ファイルでプラグイン取り込みフローが必要かどうか（無料／レート制限付きのチームかどうか）を確認します
start_scan	Figma ファイルと公開中のサイトの比較を開始し、jobId を返します
get_scan_status	スキャン／検出ジョブのステータスをポーリングします
list_discovered_pages	検出ジョブで一致した Figma フレームと公開 URL の組み合わせを一覧表示します
run_selected_pages	選択したページの実際のビジュアルおよびコンテンツ比較を実行します（クレジットを消費します）
get_report	完了した比較の構造化された検出結果を取得します。類似度スコアと重大度別の問題が含まれます
get_visual_diff	1 ページ分の画像を Figma と公開中のサイトで並べて表示します
create_plugin_session / check_plugin_ingest / run_scan_from_ingest	Whoogy Figma プラグインを使う、無料／レート制限付きのチームに属する Figma ファイル向けの代替フローです
duplicate_figma_file	レート制限付きの Figma ファイルを Whoogy 所有のチームにコピーし、直接スキャンできるようにします

一般的なフロー：start_scan → get_scan_status をポーリング → list_discovered_pages → ユーザーに確認 → run_selected_pages → get_scan_status をポーリング → get_report → get_visual_diff。

認証の仕組み

Claude は OAuth クライアント（RFC 7591）として自身を登録し、このサーバーに対して標準的な認可コード＋PKCE フローを実行します。/authorize はブラウザーを Whoogy 独自の同意ページにリダイレクトします。通常の Whoogy サインインで承認すると、このフローで発行される有効期間の長い Whoogy JWT が、そのまま MCP アクセストークンになります。別途管理が必要なトークンシステムはありません。リフレッシュトークンはありません。アクセストークンは 60 日間有効な JWT で、有効期限が切れると Claude が（短時間で完了する）認証フローを再実行します。

よくある質問

この MCP サーバーは実際には何を比較しますか？ Figma ファイル（または特定のフレーム）と、公開中のウェブサイトのレンダリング済みページを比較します。ページごとに、レイアウト、間隔、タイポグラフィ、色、コンテンツを確認します。

ピクセルオーバーレイ型の Figma プラグインとはどう違いますか？ オーバーレイ型プラグインでは、人が各ページを確認して違いを見つける必要があります。このサーバーはページを自動で検出し、Claude が読み取り、要約し、対応できる、重大度順に整理された構造化レポートを返します。

スキャンにはどれくらい時間がかかりますか？ 検出と比較はバックグラウンドジョブとして実行されます。通常、実行するページを確認してから数分以内に、複数ページのレポートが返されます。

自分のデータはほかのユーザーと共有されますか？ いいえ。すべてのツール呼び出しは OAuth を通じて、サインイン中の Whoogy アカウントとして実行されます。レポート、クレジット、プロジェクトは、すべてそのアカウントに限定されます。

どの AI アシスタントが利用できますか？ リモートの OAuth 認証済み HTTP サーバーに対応する MCP クライアントであれば利用できます。Claude.ai、Claude Desktop、その他の MCP 対応ツール（Cursor、VS Code Copilot など）が含まれます。

スキャンの実行には料金がかかりますか？ 比較には Whoogy クレジットを消費します（比較するページごとに 1 クレジット）。実行を確定する前に check_credits で残高を確認できます。

セルフホスト

このサーバーはリクエストごとにステートレスです（HTTP 呼び出しごとに新しい McpServer とトランスポートを使用）。サインイン中のユーザーとして、HTTP 経由で Whoogy のメイン REST API と通信します。独自のプロダクトデータは保持しません。OAuth 許可情報とデバイスコードのコレクションを Whoogy メイン API の MongoDB と共有するため、別のバックエンドを接続する用途には向いていません。セルフホストするのは、Whoogy のほかの部分も自分で運用している場合に限られます。

npm install
cp .env.example .env   # fill in MONGODB_URI, JWT_SECRET, MCP_API_BASE, FRONTEND_URL
npm run dev

各変数の役割については .env.example を参照してください。リモートクライアント（claude.ai など）が接続するには、MCP_PUBLIC_URL に外部からアクセス可能な HTTPS URL を指定する必要があります。HTTP は、完全にローカルなテストでのみ利用できます。

詳細情報

• Whoogy：https://whoogy.com
• Model Context Protocol：https://modelcontextprotocol.io

ライセンス

MIT