# image-diff

Сравнивает два изображения попиксельно, группирует найденные отличия в кластеры и строит тепловую карту различий. Пригодится, когда нужно сверить скриншот интерфейса с макетом.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 81
- Автор: pulsemcp
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/pulsemcp/mcp-servers/tree/HEAD/productionized/image-diff
- Обновлён: 2026-10-09
- HTML: https://affpapa.org/nevibecode/mcp/image-diff

## Что делает

Сервер отдаёт один инструмент `get_diff_of_images`. На входе два абсолютных пути к файлам, на выходе — JSON: совпадают ли картинки, сколько пикселей разошлось, список областей с координатами и степенью серьёзности, а также пути к тепловой карте и к её наложению на исходное изображение.

Внутри работает сравнение по перцептивной цветовой метрике YIQ NTSC. Пиксели со сглаживанием шрифтов и скруглениями углов отсеиваются отдельным шагом, чтобы не давать ложных срабатываний. Разошедшиеся точки группируются в связные области, а размер зазора между ними сервер советует оставлять автоматическим — тогда его подбирает анализ ближайших соседей. Картинки разного размера выравниваются через OpenCV ZNCC, меньшая встаёт внутрь большей.

Порог чувствительности `threshold` по умолчанию 0.1, а сглаживание в дифф по умолчанию не идёт. Форматы — PNG, JPEG, WebP, TIFF. Важная деталь: пути должны быть локальными и абсолютными, а выравнивание разногабаритных картинок опирается на OpenCV — если его нет в окружении, эта часть не заработает.

## Требования
- Нужно: Node.js (команды через npx)

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server
```

### Codex

**Командой платформы**
```bash
codex mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "image-diff": {
            "command": "npx",
            "args": [
                "-y",
                "@pulsemcp/image-diff-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "image-diff": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@pulsemcp/image-diff-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add image-diff npx -y @pulsemcp/image-diff-mcp-server
```

## Когда брать
- сверить скриншот готового экрана с дизайн-макетом
- найти, в какой части страницы разъехалась вёрстка
- получить тепловую карту отличий для отчёта
- исключить ложные различия от сглаживания шрифтов
- сравнить картинки разного разрешения с автоматическим выравниванием

## Примеры запросов агенту
- Сравни `design/home.png` и `shots/home-actual.png` и покажи, где расходятся
- Прогони дифф `mock.png` против `build.png` с порогом 0.05 и собери кластеры
- Сделай тепловую карту различий между этими двумя скриншотами

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [Keploy](https://affpapa.org/nevibecode/mcp/keploy.md) — MCP-сервер · ★ 18727
- [SeleniumBase MCP](https://affpapa.org/nevibecode/mcp/seleniumbase-mcp.md) — MCP-сервер · ★ 13169
- [mobile-mcp](https://affpapa.org/nevibecode/mcp/mobile-mcp.md) — MCP-сервер · ★ 9946
- [e2e](https://affpapa.org/nevibecode/mcp/e2e.md) — MCP-сервер · ★ 11912
- [mockserver](https://affpapa.org/nevibecode/mcp/mockserver.md) — MCP-сервер · ★ 4996

Из того же набора: [pulsemcp/mcp-servers](https://affpapa.org/nevibecode/by/pulsemcp/mcp-servers.md) — 9 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md