validator — MCP-сервер для Claude Code: проверка дизайн-токенов
Сверяет CSS, который написал агент, с вашей дизайн-системой и показывает каждое значение вне токенов. Пригодится, когда агент придумывает цвета и отступы сам.
claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpЧто делает validator
validator — это MCP-сервер, который по запросу агента проверяет сгенерированный CSS на расхождения с дизайн-системой. Агент передаёт разметку и набор токенов, сервер возвращает список нарушений: ось, найденное значение, подходящий токен и место в коде. Проверка запускается вручную, сервер ничего не перехватывает и не правит ваш код.
Работает в двух режимах. В режиме паков проверка идёт против готового набора из семейства Swatchdog, в режиме BYO — против ваших токенов, которые агент извлекает из tailwind.config.js или CSS-переменных и передаёт параметрами. Второй режим бесплатный на бесключевом канале с ограничением по частоте запросов, без лимита — по лицензии за $12. Платные семейства стоят $19 или $49 вместе с ключом.
Инструмент check_design_drift работает только с BYO и не требует ключа, check_drift принимает либо paletteId, либо tokens. Проверки покрывают hex и стандартные форматы цвета; HSL-каналы и разрешение токенов из нескольких файлов в планах. Исходный код и токены на серверах не хранятся — остаётся только метаданные об использовании.
Какие задачи решает
- поймать цвет вне палитры, который агент вписал в компонент
- заменить произвольный радиус на ближайший токен из шкалы
- сверить отступы и размеры шрифта с вашей дизайн-системой
- проверить вёрстку против готового пака без своих токенов
- получить точное значение токена вместо догадки агента
Примеры запросов агенту
- Проверь этот CSS на расхождения с моими токенами из
tailwind.config.js - Прогони
check_design_driftпо сгенерированной разметке и покажи, что заменить - Сверь стили с паком
studio-blue-hourчерезcheck_drift
Как установить validator
Командой платформы: удалённый сервер
claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpКомандой платформы: удалённый сервер
codex mcp add validator --url https://swatchdog-mcp-970396648818.us-central1.run.app/mcpФайл настроек
{
"mcpServers": {
"validator": {
"url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
}
}
}Файл настроек
{
"servers": {
"validator": {
"type": "http",
"url": "https://swatchdog-mcp-970396648818.us-central1.run.app/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о validator
Как установить validator в Claude Code?
Одной командой: claude mcp add --transport http validator https://swatchdog-mcp-970396648818.us-central1.run.app/mcp. В Claude можно вместо этого открыть Settings → Connectors, найти swatchdog и нажать Connect.
Что делает validator?
Проверяет CSS и разметку на значения вне дизайн-системы: цвет, радиус, отступы, размер и семейство шрифта. К каждому нарушению возвращает ближайший подходящий токен.
Чем validator отличается от линтера вроде ESLint?
Линтер проверяет, валиден ли код, и пропустит color: #ff00ff, потому что это корректный CSS. validator смотрит, соответствует ли значение вашей палитре, и ловит такой цвет, даже если код написан без ошибок.
