Whoogy

com.whoogy由 whoogy.com 發布官方發布者v0.1.0更新於 Oct 28, 2026

Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.

已驗證Streamable HTTP可網頁執行瀏覽器自動化開發者工具媒體與設計

概覽

AI 產生的概覽

遠端 Whoogy MCP 伺服器，讓助理把 Figma 設計與線上網站比對，並回傳視覺與內容 QA 報告。

可以做什麼
  • 啟動並追蹤 Figma 與線上網站的比對掃描，包含自動探索頁面與輪詢工作狀態
  • 檢視配對好的 Figma 畫框與線上 URL，並挑選要比對的頁面
  • 對選定頁面執行視覺與內容比對，讀取依嚴重程度與問題類型分類的結構化結果
  • 取得單一頁面的 Figma 與線上並排視覺差異圖
  • 列出專案與近期掃描，並查詢帳戶剩餘額度
  • 針對免費或受限團隊的 Figma 檔案，透過外掛匯入流程或複製檔案來處理
適用情境
適合在不想切換到獨立應用或疊加外掛的情況下，對已上線網站與其 Figma 原始設計做設計驗收，例如上線前或每次部署後檢查間距、字體、顏色與版面偏差。
執行需求
透過 streamable HTTP 存取的遠端 MCP 端點，不需本機安裝或 API 金鑰。需要 Whoogy 帳戶，並透過 Whoogy 自有頁面完成 OAuth 登入與授權。掃描需要 Figma 檔案與線上網站 URL。
安裝前請注意
比對會消耗 Whoogy 額度，每比對一個頁面消耗一個，執行前應先查看餘額。OAuth 流程發出的是有效期 60 天、沒有更新權杖的長期存取權杖。掃描會讀取你的 Figma 檔案與線上網站，複製工具會把 Figma 檔案複製到 Whoogy 擁有的團隊中。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Whoogy，將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存，絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/com.whoogy%2Fwhoogy-mcp/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

{
  "mcpServers": {
    "whoogy": {
      "type": "http",
      "url": "https://mcp.whoogy.com/mcp"
    }
  }
}

README

Whoogy MCP Server — Figma to Website Design QA for Claude

[License: MIT] [MCP Server] [Works with Claude]

Fastest Figma-to-website design QA, powered by AI. This MCP server connects Claude to Whoogy to auto-detect pages, run automated visual regression and UI comparison scans, and deliver a full design QA report in minutes — catching spacing, typography, color, and layout drift before launch, without leaving your conversation.

What is Whoogy MCP?

Whoogy compares a Figma design against its live website and reports exactly where the build has drifted from the design — pixel-level spacing errors, wrong fonts, mismatched colors, missing sections, broken layouts. This repository is the Model Context Protocol (MCP) server that exposes that Figma vs. live-site comparison as tools Claude can call directly, so a full design QA scan runs and reports back inside your AI chat instead of a separate app or browser plugin.

If you're searching for Figma to code QA, design QA automation, visual regression testing for Figma, or a Claude MCP server for design review, this is it.

Why an MCP server instead of a Figma plugin?

Most Figma-to-live-site QA tools are overlay plugins — you open Figma, open the live site, and eyeball the difference manually, page by page. Whoogy MCP flips that:

  • Automatic page discovery — give it a Figma file and a live root URL; it matches Figma frames to live routes on its own.
  • No context switching — ask Claude to run the scan, review the report, and re-run it, all in the same conversation.
  • Structured findings, not just screenshots — every issue is categorized by severity (critical → low) and type (spacing, typography, color, layout, missing element), not just a visual diff image.
  • Minutes, not hours — a full multi-page comparison report comes back in minutes, so design QA can run on every deploy, not just before a big launch.

Connect it to Claude

This is a remote MCP server — no install, no API key to copy around. Claude authenticates you through Whoogy's own sign-in (OAuth 2.1 + PKCE), so it only ever acts on the Whoogy account you approve.

Claude.ai / Claude Desktop — Settings → Connectors → Add custom connector, then paste:

https://mcp.whoogy.com/mcp

Claude will open a Whoogy sign-in/consent page; approve it once and you're connected.

Other MCP clients (Cursor, VS Code Copilot, etc.) that support remote HTTP + OAuth connectors can point at the same URL.

What it can do

ToolWhat it does
check_creditsRemaining Whoogy credit balance on the connected account
list_projectsLists the account's Whoogy projects (a live site + Figma file pairing)
list_recent_scansRecent QA scans — jobId, live URL, Figma file, status, date
check_figma_tierChecks whether a Figma file needs the plugin-ingest flow (free/rate-limited team)
start_scanStarts comparing a Figma file against a live site; returns a jobId
get_scan_statusPolls a scan/discovery job
list_discovered_pagesLists matched Figma-frame ↔ live-URL pairs for a discovery job
run_selected_pagesRuns the actual visual + content comparison on chosen pages (spends credits)
get_reportStructured findings for a completed comparison: similarity score + issues by severity
get_visual_diffSide-by-side (Figma vs. live) image for one page
create_plugin_session / check_plugin_ingest / run_scan_from_ingestFallback flow for Figma files on a free/rate-limited team, via the Whoogy Figma plugin
duplicate_figma_fileCopies a rate-limited Figma file into a Whoogy-owned team so it can be scanned directly

Typical flow: start_scan → poll get_scan_status → list_discovered_pages → confirm with the user → run_selected_pages → poll get_scan_status → get_report → get_visual_diff.

How auth works

Claude registers itself as an OAuth client (RFC 7591) and runs a standard authorization-code + PKCE flow against this server. /authorize redirects your browser to Whoogy's own consent page; once you approve with your normal Whoogy sign-in, the long-lived Whoogy JWT that flow mints becomes the MCP access token, verbatim — there's no separate token system to manage. There are no refresh tokens: the access token is a 60-day JWT, and Claude re-runs the (fast) authorization flow once it expires.

Frequently asked questions

What does this MCP server actually compare? A Figma file (or specific frames) against a live website's rendered pages — layout, spacing, typography, color, and content, page by page.

How is this different from a pixel-overlay Figma plugin? An overlay plugin needs a human to look at each page and spot differences. This server discovers pages automatically and returns a structured, severity-ranked report Claude can read, summarize, and act on.

How long does a scan take? Discovery and comparison run as background jobs; a typical multi-page report comes back within minutes of confirming which pages to run.

Is my data shared with other users? No. Every tool call runs as your signed-in Whoogy account via OAuth — reports, credits, and projects are scoped to your account only.

Which AI assistants can use this? Any MCP client that supports remote, OAuth-authenticated HTTP servers — Claude.ai, Claude Desktop, and other MCP-compatible tools (Cursor, VS Code Copilot, etc.).

Does it cost anything to run a scan? Comparisons spend Whoogy credits (one per page compared). check_credits reports your balance before you commit to a run.

Self-hosting

This server is stateless per request (a fresh McpServer + transport per HTTP call) and talks to the main Whoogy REST API over HTTP as the signed-in user — it holds no product data of its own. It shares its OAuth-grant and device-code collections with the main Whoogy API's MongoDB, so it isn't meant to be pointed at a different backend; self-hosting only makes sense if you're running the rest of Whoogy yourself too.

bash
npm installcp .env.example .env   # fill in MONGODB_URI, JWT_SECRET, MCP_API_BASE, FRONTEND_URLnpm run dev

See .env.example for what each variable does. MCP_PUBLIC_URL must be a publicly reachable HTTPS URL for any remote client (claude.ai, etc.) to connect — plain HTTP only works for purely local testing.

Learn more

License

MIT

來源：README.md，提交 a0aa071

工具

0
該伺服器需要登入，因此 SourceWeft 無法在沒有帳號的情況下讀取其工具，也未收錄。已連接帳號所能看到的內容可能因帳號及其權限而異。

版本歷史

1
  1. v0.1.0最新Sep 25, 2026

評分

已滿足適用檢查項的 85%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分