# Whoogy

Runs a design QA pass between a Figma file and the deployed site, then reports the drift inside your chat.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI
- Author: whoogydotcom
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/whoogydotcom/whoogy-mcp
- Updated: 2026-09-25
- HTML: https://affpapa.org/en/nevibecode/mcp/whoogy

## What it 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.

## Requirements
- Remote server: `https://mcp.whoogy.com/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http whoogy-mcp https://mcp.whoogy.com/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add whoogy --url https://mcp.whoogy.com/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "whoogy": {
            "url": "https://mcp.whoogy.com/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "whoogy": {
            "type": "http",
            "url": "https://mcp.whoogy.com/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http whoogy https://mcp.whoogy.com/mcp
```

## When to use it
- 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
- 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

## Similar
- [design-qa](https://affpapa.org/en/nevibecode/skills/plugin87-design-qa.md) — skill · 516 installs
- [design-qa-checklist](https://affpapa.org/en/nevibecode/skills/design-qa-checklist.md) — skill · 2200 installs
- [visual-regression-tester](https://affpapa.org/en/nevibecode/skills/visual-regression-tester.md) — skill · 330 installs
- [lastest](https://affpapa.org/en/nevibecode/mcp/lastest.md) — MCP server · ★ 21
- [pixelpact](https://affpapa.org/en/nevibecode/mcp/pixelpact.md) — MCP server · ★ 16
- [argent-screenshot-diff](https://affpapa.org/en/nevibecode/skills/argent-screenshot-diff.md) — skill · 25000 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md