AI导哈

设计比较服务器

MCP设计比较服务器，用于比较设计截图与实现截图，支持多种图像格式和高级比较功能。

  • by w01fgang
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 w01fgang/mcp-design-comparison

使用说明

MCP设计比较服务器

MCP（模型上下文协议）服务器，允许LLM使用以下命令将设计屏幕截图与实现屏幕截图进行比较 像素匹配支持多种图像格式，包括PNG、JPEG、WebP、GIF、TIFF和SVG（通过librsvg光栅化）。该工具有助于识别设计模型和实际实现之间的视觉差异。

特性

  • 多格式支持：适用于PNG、JPEG、WebP、GIF、TIFF和SVG图像
  • 屏幕截图比较：逐像素比较两个图像
  • SSIM评分：跟踪感知差异的结构相似性度量（0-1），而不仅仅是原始像素增量
  • 自动调整大小：不匹配的分辨率会自动协调——实现会根据设计的尺寸进行缩放。 resize_fit 控制方式(contain 默认情况下保留纵横比； fill/cover 可用）；通过以下方式关闭 auto_resize
  • 忽略区域：从比较中排除矩形（例如时间戳、头像），这样动态内容就不算数
  • 矢量（SVG）输入：将设计PNG与SVG图标进行比较（或SVG与SVG）——SVG以可配置的密度进行光栅化(svg_density，默认288 dpi），无预渲染步骤
  • 差异本地化：差异边界框和3x3热网格报告 哪里 差异聚集，而不仅仅是有多少像素不同
  • 断言门：可选 max_difference_percentage 超过时将结果翻转为错误——不解析文本的CI回归门
  • 视觉差异输出：生成一个突出显示差异的差异图像
  • 详细指标：获取总像素、不同像素和百分比差异
  • 可配置阈值：调整比较的灵敏度
  • Base64支持：以base64格式返回差异图像或保存到文件

安装

面向最终用户

通过npm全局安装：

npm install -g mcp-design-comparison

或者使用npx（无需安装）：

npx mcp-design-comparison

为了发展

git clone https://github.com/w01fgang/mcp-design-comparison.git
cd mcp-design-comparison
npm install
npm run build

用法

作为MCP服务器

将此服务器添加到MCP客户端配置中。服务器在stdio上运行，并提供一个工具：

工具： compare_design

将设计屏幕截图与实现屏幕截图进行比较。

参数：

  • design_path （字符串，必填）：设计截图的路径（支持PNG、JPEG、WebP、GIF、TIFF、SVG）
  • implementation_path （字符串，必填）：实现屏幕截图的路径（支持PNG、JPEG、WebP、GIF、TIFF、SVG）
  • output_diff_path （字符串，可选）：保存差异图像的路径（始终保存为PNG）。如果没有提供，diff图像将以base64返回
  • threshold （数字，可选）：匹配阈值（0-1）。较小的值会使比较更加敏感。默认值为0.1
  • auto_resize （布尔值，可选）：当两个屏幕截图的分辨率不同时，将实现缩放到设计的维度，而不是出错。默认值为 true.Set false 以要求相同的尺寸。
  • resize_fit （string，可选）：当维度不同时如何缩放实现-- contain （默认情况下，保留纵横比和信箱）， fill （延伸到精确的尺寸），或 cover （保留纵横比和作物溢出）。
  • ignore_regions （阵列，可选）：矩形 { x, y, width, height } 在设计空间坐标中排除比较（例如动态内容）。排除的像素既不计入差值，也不计入百分比分母。对于SVG设计，设计空间是渲染的光栅（固有大小× svg_density /72——例如，默认密度288下的36×36 SVG为144×144），而不是固有的SVG大小；这同样适用于返回的差分界和热网格。
  • svg_density （数字，可选）：SVG输入的光栅化密度（DPI）。更高=比较前更清晰的矢量渲染。默认值288（72dpi基线的4倍）。针对小资产（图标/徽标）；对于大型矢量艺术，请降低它。
  • localize （布尔值，可选）：如果 true （默认），在结果中包含一个差异边界框和一个粗略的3x3热网格，显示差异聚集的位置。集 false 跳过额外的通行证。
  • max_difference_percentage （number，可选）：如果设置了差异百分比，并且差异百分比超过了它（严格大于它），则调用将返回错误(isError: true)同时仍然产生diff伪影。用作金色图像的CI门。仅供报告省略。

退货：

  • 总像素数（不包括任何忽略的区域）
  • 不同像素的数量
  • 百分比差异
  • SSIM评分（0-1，其中1.0表示完全相同）
  • Diff边界框和3x3热网格（当 localize 打开，存在差异）
  • Diff图像（文件或base64）

配置示例

添加到MCP设置文件中：

Claude 桌面版 (~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：

{
  "mcpServers": {
    "design-comparison": {
      "command": "npx",
      "args": ["-y", "mcp-design-comparison"]
    }
  }
}

光标 (~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json 在macOS上）：

{
  "mcpServers": {
    "design-comparison": {
      "command": "npx",
      "args": ["-y", "mcp-design-comparison"]
    }
  }
}

添加配置后，重新启动Claude Desktop或Cursor。

运作原理

  1. 将两个图像加载到内存中（任何支持的格式→ 原始RGBA）
  2. 如果尺寸不同，则使用以下公式将实现缩放到设计的尺寸 resize_fit （默认值 contain，保存方面；除非 auto_resize 是 false，而不是错误）
  3. 戴上口罩 ignore_regions 在这两幅图像中，排除的像素不计算在内
  4. 使用像素匹配逐像素比较，计算SSIM分数，并且（当 localize 打开）位于差异聚集的位置（边界框+3x3热网格）
  5. 生成差异图像，突出显示粉红色的差异
  6. 返回统计数据、SSIM得分和差异图像

示例用例

  • 设计质量保证：验证实施是否与设计模型相匹配
  • 回归测试：比较更改前后的屏幕截图
  • 跨浏览器测试：比较不同浏览器之间的渲染
  • 响应式设计：比较不同断点处的布局

测试

运行自动测试

npm test

使用屏幕截图进行手动测试

使用附带的测试脚本：

node test-manual.mjs design.png implementation.png [output-diff.png]

需求

  • Node.js 18+
  • 支持格式的图像（PNG、JPEG、WebP、GIF、TIFF或SVG）；不同的分辨率会自动调整大小，除非 auto_resize 已禁用

许可证

麻省理工学院

相关 MCP