# pixelpact

Извлекает визуальные параметры с эталонной веб-страницы в JSON-контракт и проверяет вёрстку на расхождения. Помогает ИИ-агенту самостоятельно подгонять CSS по точным числам.

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

## Что делает

Обычные инструменты регрессии сравнивают интерфейс с прошлым снимком того же проекта. Этот сервер работает иначе. Сначала утилита сканирует исходный сайт или макет, фиксируя цвета, отступы, шрифты, токены и анимации в единый JSON-файл. Затем агент сопоставляет локальную вёрстку с этим контрактом и получает список отклонений по каждому селектору.

Внутри работают четыре инструмента протокола MCP: `extract_contract`, `check_implementation`, `diff_pixels` и `read_contract_summary`. Ассистент получает строчные числовые разницы для каждого стиля, который отклонился от нормы. Модель видит конкретную ошибку, меняет код и перепроверяет себя сама.

Для запуска понадобятся Node.js версии не ниже 22.12 и Playwright с загруженным браузером Chromium. Без Chromium в системе движок не сможет снять замеры с веб-страницы.

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

## Установка

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

**Командой платформы**
```bash
claude mcp add pixelpact -- npx -y pixelpact-mcp
```

### Codex

**Командой платформы**
```bash
codex mcp add pixelpact -- npx -y pixelpact-mcp
```

### Cursor

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

### GitHub Copilot

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

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add pixelpact npx -y pixelpact-mcp
```

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

## Примеры запросов агенту
- Сними визуальный контракт со страницы `https://reference.example.com` и сохрани его в `contract.json`
- Проверь локальный сайт на `http://localhost:3000` по файлу `contract.json` и исправь отступы
- Вызови diff_pixels для шапки сайта и покажи расхождения с эталоном

## Похожие
- [uisight](https://affpapa.org/nevibecode/mcp/uisight.md) — MCP-сервер · ★ 130
- [argent-screenshot-diff](https://affpapa.org/nevibecode/skills/argent-screenshot-diff.md) — скилл · 25000 установок
- [visual-regression-tester](https://affpapa.org/nevibecode/skills/visual-regression-tester.md) — скилл · 330 установок
- [browser-qa](https://affpapa.org/nevibecode/skills/browser-qa.md) — скилл · 4900 установок
- [threejs-qa-release](https://affpapa.org/nevibecode/skills/threejs-qa-release.md) — скилл · 3000 установок
- [visual-testing](https://affpapa.org/nevibecode/skills/visual-testing.md) — скилл · 1200 установок

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