uisight — MCP-сервер для Claude Code: что делает и как установить
Сервер замеряет вёрстку в реальном браузере и отдаёт агенту точные контрасты, размеры кликабельных зон и селекторы. Помогает находить баги доступности без ручного разбора скриншотов.
claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisightЧто делает uisight
Обычные скриншоты заставляют модель угадывать проблемы на глаз. Этот сервер вычисляет параметры элементов прямо из дерева DOM. Модель получает конкретные цифры: коэффициент контрастности текста, минимальный размер кнопок и точный селектор проблемного узла.
В состав входят вызовы inspect для проверки верстки и see_screen для получения текущего кадра. Доступна совместная работа: разработчик видит те же мобильные и десктопные экраны в реальном времени и может отметить баг заметкой.
Для запуска браузера под капотом используется Playwright. На первом старте сервер попросит скачать Chromium весом около 700 МБ, поэтому в CI сборку нужно готовить заранее командой npx playwright install chromium. Инструмент рассчитан только на веб-страницы.
Какие задачи решает
- вычислить коэффициент контрастности текста по WCAG
- найти интерактивные элементы с областью нажатия меньше 44 пикселей
- получить селекторы сломанных блоков в светлой и тёмной темах
- проверить мобильную и десктопную вёрстку в параллельных сессиях
Примеры запросов агенту
- Проверь доступность страницы http://localhost:3000 через uisight и найди элементы с низким контрастом
- Запусти uisight inspect для главной страницы и выведи кнопки с областью клика меньше 44px
Как установить uisight
Командой платформы
claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisightВместо <…> подставьте свои значения
Командой платформы
codex mcp add uisight --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> -- npx -y uisightВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"uisight": {
"command": "npx",
"args": [
"-y",
"uisight"
],
"env": {
"UISIGHT_URL": "<UISIGHT_URL>",
"UISIGHT_PORT": "<UISIGHT_PORT>",
"UISIGHT_LANG": "<UISIGHT_LANG>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"uisight": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uisight"
],
"env": {
"UISIGHT_URL": "<UISIGHT_URL>",
"UISIGHT_PORT": "<UISIGHT_PORT>",
"UISIGHT_LANG": "<UISIGHT_LANG>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e UISIGHT_URL=<UISIGHT_URL> -e UISIGHT_PORT=<UISIGHT_PORT> -e UISIGHT_LANG=<UISIGHT_LANG> uisight npx -y uisightВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о uisight
Как установить uisight в Claude Code?
Выполните claude mcp add uisight -- npx -y uisight. Для настройки окружения можно передать переменные через флаги: `claude mcp add --env UISIGHT_URL=<UISIGHT_URL> --env UISIGHT_PORT=<UISIGHT_PORT> --env UISIGHT_LANG=<UISIGHT_LANG> --transport stdio uisight -- npx -y uisight`.
Что делает MCP-сервер uisight?
Сервер анализирует живой DOM страницы через Playwright. Он возвращает агенту точные числовые замеры контрастности, размеры интерактивных зон и CSS-селекторы вместо неточных описаний по картинке.
Нужен ли отдельный браузер для работы uisight?
Да, движок опирается на Playwright. При первом запуске потребуется загрузить Chromium размером около 700 МБ, либо установить его вручную командой npx playwright install chromium.
