MCP-сервер CX Codex

image-diff — MCP-сервер для Claude Code: сравнение картинок и визуальный дифф

Q: Как установить image-diff в Claude Code?

Одной командой: `claude mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server`. Она прописывает сервер в конфигурацию Claude и запускает его через `npx`.

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

Установить в Claude Code · Командой платформы Все способы и платформы ↓

claude mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server

Открыть на GitHub

Что делает image-diff

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

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

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

Какие задачи решает

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

Примеры запросов агенту

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

Как установить image-diff

Командой платформы

claude mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server

Командой платформы

codex mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server

Файл настроек

{
    "mcpServers": {
        "image-diff": {
            "command": "npx",
            "args": [
                "-y",
                "@pulsemcp/image-diff-mcp-server"
            ]
        }
    }
}

Файл настроек

{
    "servers": {
        "image-diff": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@pulsemcp/image-diff-mcp-server"
            ]
        }
    }
}

Командой платформы

gemini mcp add image-diff npx -y @pulsemcp/image-diff-mcp-server

По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие

Вопросы о image-diff

Как установить image-diff в Claude Code?

Одной командой: claude mcp add image-diff -- npx -y @pulsemcp/image-diff-mcp-server. Она прописывает сервер в конфигурацию Claude и запускает его через npx.

Что делает image-diff?

Сравнивает два изображения попиксельно, собирает различия в пространственные кластеры со степенью серьёзности и сохраняет тепловую карту вместе с композитным вариантом поверх исходника.

Какие картинки можно сравнивать?

PNG, JPEG, WebP и TIFF по локальным абсолютным путям. Размеры могут не совпадать: меньшая картинка выравнивается внутри большей через OpenCV ZNCC.

Из того же набора9