AI导哈

UI截图比较服务

Pixelmatch MCP Server是一个用于比较UI截图的MCP服务器，帮助自主编码代理验证前端实现。

  • by sosukesuzuki
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 sosukesuzuki/pixelmatch-mcp-server

使用说明

Pixelmatch MCP服务器

MCP服务器，用于使用像素匹配比较UI屏幕截图，以帮助自主编码代理验证前端实现。

概述

此MCP（模型上下文协议）服务器提供了专门为在前端实现上工作的自主编码代理设计的图像比较工具。它使用像素匹配来计算当前UI屏幕截图和目标/理想设计之间的视觉相似性，从而能够快速迭代和验证UI更改。

安装

npm install pixelmatch-mcp-server
# or
pnpm add pixelmatch-mcp-server

用法

设置

{
  "mcpServers": {
    "pixelmatch": {
      "command": "npx",
      "args": ["pixelmatch-mcp-server"]
    }
  }
}

MCP工具： compare_ui_images

比较两个UI屏幕截图并返回详细的相似性分析。

参数

  • current_image_path （必填）：当前UI屏幕截图的路径
  • target_image_path （必填）：目标/理想UI截图的路径
  • threshold （可选）：像素匹配灵敏度（0-1，默认值：0.1）
  • output_diff_path （可选）：保存视觉差异图像的路径

响应

{
  "success": true,
  "similarity_score": 0.92,
  "difference_percentage": 8.0,
  "different_pixels": 1200,
  "total_pixels": 15000,
  "dimensions": {
    "width": 800,
    "height": 600
  },
  "diff_saved": true,
  "diff_path": "./diff.png",
  "assessment": {
    "is_very_similar": false,
    "is_similar": true,
    "is_different": false,
    "recommendation": "Images are similar with minor differences - may need small adjustments"
  }
}

评估等级

  • 非常相似 （>95%）：UI实现看起来正确
  • 相似 （>80%）：微小差异，可能需要小幅调整
  • 明显差异 （>50%）：UI实施需要改进
  • 显著性差异 （<50%）：需要对UI实施进行重大更改

许可证

麻省理工学院

相关 MCP