Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Description from the maker (original English)
Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.
These three are never merged into one score: opinions, measurements and popularity are different things.
We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.
Pick the AI app you use, then copy the settings.
You need
Which app do you use?
Pick your app above. We remember it, so next time the button says “Install in …”.
Works in Claude on the web, desktop and mobile:
https://mcp.whoogy.com/mcpRun this in your terminal
claude mcp add --transport http whoogy https://mcp.whoogy.com/mcpPaste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json
{
"mcpServers": {
"whoogy": {
"url": "https://mcp.whoogy.com/mcp"
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
Paste into .vscode/mcp.json in your project
{
"servers": {
"whoogy": {
"type": "http",
"url": "https://mcp.whoogy.com/mcp"
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
ChatGPT connects only to servers on the internet:
https://mcp.whoogy.com/mcpMenu names can differ slightly by plan and over time.
Your choice stays on this device in a cookie; no account needed.
These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.
We have not read this server’s tool list yet; we check endpoints in rotation.
We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 7, 2026
The registry name was verified against the domain whoogy.com (the registry checks domain ownership)
We have not read this repo from GitHub yet
We have not read this repo from GitHub yet
Not checked yet; we check endpoints in rotation
Not checked yet; we check endpoints in rotation
Not checked yet; we read the tool list when we check the endpoint
Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.
It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.
The registry does not list a required key, though some servers ask you to sign in on first use.
It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.
The GitHub repo last changed –, and the latest version (0.1.0) reached the registry 43 days ago.
Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.
In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server
Servers in the same category from other makers, sorted by stars.
Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.
Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.
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.
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.
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:
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.
| Tool | What it does |
|---|---|
check_credits | Remaining Whoogy credit balance on the connected account |
list_projects | Lists the account's Whoogy projects (a live site + Figma file pairing) |
list_recent_scans | Recent QA scans — jobId, live URL, Figma file, status, date |
check_figma_tier | Checks whether a Figma file needs the plugin-ingest flow (free/rate-limited team) |
start_scan | Starts comparing a Figma file against a live site; returns a jobId |
get_scan_status | Polls a scan/discovery job |
list_discovered_pages | Lists matched Figma-frame ↔ live-URL pairs for a discovery job |
run_selected_pages | Runs the actual visual + content comparison on chosen pages (spends credits) |
get_report | Structured findings for a completed comparison: similarity score + issues by severity |
get_visual_diff | Side-by-side (Figma vs. live) image for one page |
create_plugin_session / check_plugin_ingest / run_scan_from_ingest | Fallback flow for Figma files on a free/rate-limited team, via the Whoogy Figma plugin |
duplicate_figma_file | Copies 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.
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.
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.
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.
npm install
cp .env.example .env # fill in MONGODB_URI, JWT_SECRET, MCP_API_BASE, FRONTEND_URL npm 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.
MIT