MCP Design Comparison

MCP设计比较服务器

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

特性

• 多格式支持：适用于PNG、JPEG、WebP、GIF和TIFF图像
• 屏幕截图比较：逐像素比较两个图像
• 视觉差异输出：生成一个突出显示差异的差异图像
• 详细指标：获取总像素、不同像素和百分比差异
• 可配置阈值：调整比较的灵敏度
• 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）
• implementation_path （字符串，必填）：实现屏幕截图的路径（支持PNG、JPEG、WebP、GIF、TIFF）
• output_diff_path （字符串，可选）：保存差异图像的路径（始终保存为PNG）。如果没有提供，diff图像将以base64返回
• threshold （数字，可选）：匹配阈值（0-1）。较小的值会使比较更加敏感。默认值为0.1

退货：

• 总像素数
• 不同像素的数量
• 百分比差异
• Diff图像（文件或base64）

配置示例

添加到MCP设置文件中：

克劳德桌面版 (~/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. 将两个PNG图像加载到内存中
2. 验证维度是否匹配
3. 使用像素匹配逐像素比较
4. 生成差异图像，突出显示粉红色的差异
5. 返回统计数据和差异图像

示例用例

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

测试

运行自动测试

npm test

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

使用附带的测试脚本：

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

需求

• Node.js 18+
• 具有匹配尺寸的图像（PNG、JPEG、WebP、GIF或TIFF）

许可证

麻省理工学院