Whoogy

Whoogy MCP 服务——面向 Claude 的 Figma 到网站设计 QA

由 AI 驱动，最快捷的 Figma 到网站设计 QA。 此 MCP 服务将 Claude 连接到 Whoogy，可自动检测页面、运行自动化视觉回归和 UI 对比扫描，并在几分钟内生成完整的设计 QA 报告——在上线前发现间距、字体排版、颜色和布局偏差，全程无需离开当前对话。

什么是 Whoogy MCP？

Whoogy 将 Figma 设计与实际运行的网站进行对比，并准确报告构建结果偏离设计的地方——像素级间距错误、字体错误、颜色不匹配、区块缺失、布局损坏。此代码库是 Model Context Protocol（MCP）服务，它将 Figma 与实际网站的对比功能作为工具提供给 Claude 直接调用，让完整的设计 QA 扫描能在你的 AI 聊天中运行并返回报告，而无需使用单独的应用或浏览器插件。

如果你正在寻找 Figma 到代码的 QA、设计 QA 自动化、针对 Figma 的视觉回归测试，或是用于设计审查的 Claude MCP 服务，那么你找对了。

为什么选择 MCP 服务，而不是 Figma 插件？

大多数 Figma 到实际网站的 QA 工具都是覆盖层插件——你打开 Figma，再打开实际网站，然后逐页手动目测差异。Whoogy MCP 颠覆了这种方式：

• 自动发现页面——提供 Figma 文件和实际网站的根 URL；它会自行将 Figma 画板与实际路由匹配。
• 无需切换上下文——让 Claude 运行扫描、审查报告并重新运行扫描，所有操作都在同一对话中完成。
• 提供结构化的发现结果，而不只是截图——每个问题都会按严重程度（从严重到低）和类型（间距、字体排版、颜色、布局、元素缺失）分类，而不只是显示视觉差异图。
• 几分钟，而非几小时——几分钟内即可获得完整的多页面对比报告，因此每次部署都能运行设计 QA，而不只是大型发布前才运行。

将其连接到 Claude

这是一个远程 MCP 服务——无需安装，也无需到处复制 API 密钥。Claude 通过 Whoogy 自有的登录流程（OAuth 2.1 + PKCE）验证你的身份，因此它只会操作你授权的 Whoogy 账户。

Claude.ai / Claude Desktop——设置 → 连接器 → 添加自定义连接器，然后粘贴：

https://mcp.whoogy.com/mcp

Claude 会打开 Whoogy 登录/授权页面；批准一次后即可完成连接。

支持远程 HTTP + OAuth 连接器的其他 MCP 客户端（Cursor、VS Code Copilot 等）也可以使用同一个 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	单个页面的并排对比图（Figma 与在线页面）
create_plugin_session / check_plugin_ingest / run_scan_from_ingest	为免费／受速率限制团队中的 Figma 文件提供备用流程，通过 Whoogy 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 积分（每比对一页消耗一个积分）。在开始运行前，check_credits 会显示你的余额。

自托管

此服务按请求保持无状态（每次 HTTP 调用都会创建新的 McpServer + 传输），并以已登录用户的身份通过 HTTP 与 Whoogy 主 REST API 通信——它不存储自身的产品数据。它与 Whoogy 主 API 的 MongoDB 共用 OAuth 授权和设备代码集合，因此不适用于连接其他后端；只有在你也自行运行 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