pixelpact — MCP-сервер для Claude Code: что делает и как установить
Извлекает визуальные параметры с эталонной веб-страницы в JSON-контракт и проверяет вёрстку на расхождения. Помогает ИИ-агенту самостоятельно подгонять CSS по точным числам.
claude mcp add pixelpact -- npx -y pixelpact-mcpЧто делает pixelpact
Обычные инструменты регрессии сравнивают интерфейс с прошлым снимком того же проекта. Этот сервер работает иначе. Сначала утилита сканирует исходный сайт или макет, фиксируя цвета, отступы, шрифты, токены и анимации в единый JSON-файл. Затем агент сопоставляет локальную вёрстку с этим контрактом и получает список отклонений по каждому селектору.
Внутри работают четыре инструмента протокола MCP: extract_contract, check_implementation, diff_pixels и read_contract_summary. Ассистент получает строчные числовые разницы для каждого стиля, который отклонился от нормы. Модель видит конкретную ошибку, меняет код и перепроверяет себя сама.
Для запуска понадобятся Node.js версии не ниже 22.12 и Playwright с загруженным браузером Chromium. Без Chromium в системе движок не сможет снять замеры с веб-страницы.
Какие задачи решает
- извлечь стили, токены и ключевые кадры анимаций с эталонного сайта в JSON-файл
- сопоставить локальную страницу с утверждённым дизайном без ручной сверки скриншотов
- передать агенту точные числовые отклонения по каждому CSS-свойству
- проверить стили состояний hover и focus в автоматическом цикле
Примеры запросов агенту
- Сними визуальный контракт со страницы
https://reference.example.comи сохрани его вcontract.json - Проверь локальный сайт на
http://localhost:3000по файлуcontract.jsonи исправь отступы - Вызови diff_pixels для шапки сайта и покажи расхождения с эталоном
Как установить pixelpact
Командой платформы
claude mcp add pixelpact -- npx -y pixelpact-mcpКомандой платформы
codex mcp add pixelpact -- npx -y pixelpact-mcpФайл настроек
{
"mcpServers": {
"pixelpact": {
"command": "npx",
"args": [
"-y",
"pixelpact-mcp"
]
}
}
}Файл настроек
{
"servers": {
"pixelpact": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"pixelpact-mcp"
]
}
}
}Командой платформы
gemini mcp add pixelpact npx -y pixelpact-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о pixelpact
Как установить pixelpact в Claude Code?
Выполните команду claude mcp add pixelpact -- npx -y pixelpact-mcp. Перед этим убедитесь, что в окружении есть Node.js 22.12+ и выполнен шаг playwright install chromium.
Что делает MCP-сервер pixelpact?
Он предоставляет инструменты для фиксации стилей эталонной страницы в JSON-спецификацию и последующего замера локальной вёрстки. Агент получает точные дельты отклонений, что позволяет ему автоматически дорабатывать CSS.
Чем pixelpact отличается от обычных инструментов визуальной регрессии?
Инструменты вроде Percy или Chromatic сравнивают результат с ранее утверждённым снимком того же интерфейса. pixelpact сверяет новую вёрстку сразу с внешним дизайн-ориентиром и отдаёт агенту числовые различия свойств вместо картинок.
