Whoogy — Claude Code MCP server: Figma vs live site QA
Runs a design QA pass between a Figma file and the deployed site, then reports the drift inside your chat.
claude mcp add --transport http whoogy-mcp https://mcp.whoogy.com/mcpWhat Whoogy does
Whoogy is a remote MCP server. Hand it a Figma file and a live root URL, and it pairs Figma frames with real routes on its own. Then it compares the rendered pages against the design and returns a similarity score plus categorized issues: spacing, typography, color, layout, missing elements, each ranked by severity.
Auth runs over OAuth 2.1 with PKCE. Claude registers as an OAuth client, you approve access once on the Whoogy consent page, and every tool call afterwards acts as your account. The access token is a 60-day JWT and there are no refresh tokens, so Claude repeats the authorization flow when it lapses. Comparisons consume Whoogy credits, one per page, which makes check_credits worth calling before you commit to a run.
The usual sequence goes start_scan, poll get_scan_status, list_discovered_pages, confirm the page list with you, run_selected_pages, poll again, then get_report and get_visual_diff for a side-by-side image of one page. Figma files on a free or rate-limited team take a different path through the Whoogy plugin: create_plugin_session, check_plugin_ingest, run_scan_from_ingest, or duplicate_figma_file to copy the file into a Whoogy-owned team.
What it helps with
- spot where a built page drifted from its Figma frame
- verify spacing and typography after a CSS change
- map Figma frames onto the live site's routes automatically
- get a severity-ranked issue list instead of eyeballing screenshots
- run a design check on every deploy from the same chat
Example prompts for the agent
- Run a Whoogy scan for this Figma file against the site root and show me the matched pages
- How many Whoogy credits are left on my account?
- Pull the report from the last scan and the visual diff for the homepage
How to install Whoogy
Platform CLI: remote server
claude mcp add --transport http whoogy-mcp https://mcp.whoogy.com/mcpPlatform CLI: remote server
codex mcp add whoogy --url https://mcp.whoogy.com/mcpConfig file
{
"mcpServers": {
"whoogy": {
"url": "https://mcp.whoogy.com/mcp"
}
}
}Config file
{
"servers": {
"whoogy": {
"type": "http",
"url": "https://mcp.whoogy.com/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http whoogy https://mcp.whoogy.com/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Whoogy
How do I install Whoogy in Claude Code?
Add the server with claude mcp add --transport http whoogy-mcp https://mcp.whoogy.com/mcp. Claude then opens the Whoogy sign-in page, where you approve access once.
What does Whoogy do?
It compares a Figma file against a live website and returns a structured report: a similarity score and issues grouped by type and severity. It also produces a side-by-side visual diff for a single page.
Do I need an API key?
No. The server is remote and authenticates through OAuth 2.1 with PKCE against your Whoogy account. The token lasts 60 days, after which Claude re-runs the sign-in flow.
