mcp · corralimited — MCP-сервер для Claude Code: что делает и как установить
Находит визуальный дрейф интерфейса, делает скриншоты страниц и переводит вёрстку в изображения через API сервиса SnapDiff.
claude mcp add --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> --transport stdio corralimited-mcp -- npx -y @corralimited/snapdiff-mcpЧто делает mcp
Пакет подключает к агенту четыре диагностических инструмента: верификацию правок вёрстки, сопоставление двух страниц, захват скриншотов и рендеринг HTML со стилями в готовую картинку. Инструмент проверки возвращает точный вердикт вроде подтверждения ожидаемых правок или обнаружения непредвиденной регрессии.
Процесс работает локально через стандартный ввод-вывод stdio. Редактор запускает утилиту на машине разработчика, а локальные действия опираются на Playwright. Без ключа SNAPDIFF_API_KEY вызовы не сработают, поэтому токен придётся заранее взять в панели SnapDiff.
Какие задачи решает
- выявить непредвиденные регрессии вёрстки после правок кода
- сопоставить два экрана и рассчитать процент расхождений
- снять снимок экрана по переданной ссылке
- срендерить разметку HTML и стили CSS в графический файл
Примеры запросов агенту
- Сделай снимок страницы и проверь, не появились ли визуальные регрессии.
- Сравни текущую страницу с базовым состоянием проекта через
snapdiff_compare_pages. - Отрендери карточку из переданного HTML и CSS с помощью
snapdiff_html_to_image.
Как установить mcp
Командой платформы
claude mcp add --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> --transport stdio corralimited-mcp -- npx -y @corralimited/snapdiff-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add corralimited-mcp --env SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> --env SNAPDIFF_API_URL=<SNAPDIFF_API_URL> -- npx -y @corralimited/snapdiff-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"corralimited-mcp": {
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
"SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"corralimited-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@corralimited/snapdiff-mcp"
],
"env": {
"SNAPDIFF_API_KEY": "<SNAPDIFF_API_KEY>",
"SNAPDIFF_API_URL": "<SNAPDIFF_API_URL>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> -e SNAPDIFF_API_URL=<SNAPDIFF_API_URL> corralimited-mcp npx -y @corralimited/snapdiff-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о mcp
Как установить mcp в Claude Code?
Выполните в терминале команду: claude mcp add mcp -e SNAPDIFF_API_KEY=<SNAPDIFF_API_KEY> -- npx -y @corralimited/snapdiff-mcp. Предварительно замените плейсхолдер на ваш рабочий токен.
Что делает сервер mcp?
Он даёт ассистенту инструменты для проверки интерфейса, снятия скриншотов и выявления визуального дрейфа страниц.
Открывает ли этот сервер сетевой порт на машине?
Нет, соединение строится исключительно через stdio редактора. Сервер работает как дочерний процесс и не слушает входящие порты.
Похожие MCP-серверы
Все MCP-серверы по теме «Фронтенд и UI» →Сначала — mcp от других авторов.
