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。
运作原理
- 将两个PNG图像加载到内存中
- 验证维度是否匹配
- 使用像素匹配逐像素比较
- 生成差异图像，突出显示粉红色的差异
- 返回统计数据和差异图像
示例用例
- 设计质量保证：验证实施是否与设计模型相匹配
- 回归测试：比较更改前后的屏幕截图
- 跨浏览器测试：比较不同浏览器之间的渲染
- 响应式设计：比较不同断点处的布局
测试
运行自动测试
npm test使用屏幕截图进行手动测试
使用附带的测试脚本：
node test-manual.mjs design.png implementation.png [output-diff.png]需求
- Node.js 18+
- 具有匹配尺寸的图像（PNG、JPEG、WebP、GIF或TIFF）
许可证
麻省理工学院