ux-mcp-server — MCP-сервер для Claude Code: UX-аудит и подсказки
Сервер с базами знаний по UX и инструментами анализа: проверяет доступность, контраст и вёрстку прямо в коде вашего проекта.
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverЧто делает ux-mcp-server
Пакет @elsahafy/ux-mcp-server поднимается командой npx в любом MCP-клиенте. Внутри — 28 баз знаний: WCAG, эвристики Нильсена, паттерны форм и навигации, типографика, цвет, вёрстка под мобильные, паттерны React, Vue и Angular, PWA, тёмная тема, локализация. Отдельно лежат направления вроде голосовых интерфейсов, AR/VR, медицинских и финансовых экранов.
Кроме справочников сервер даёт 23 инструмента. analyze_accessibility ищет нарушения WCAG в коде, check_contrast считает коэффициент контраста цветов, analyze_performance смотрит на Core Web Vitals, check_seo разбирает HTML. Есть генераторы: палитра цветов, типографическая шкала, ASCII-каркас страницы. Четыре готовых промпта запускают полный аудит доступности или разбор по эвристикам.
Установка глобально через npm не нужна: клиент запускает сервер сам через npx -y. Если берёте из исходников, понадобится git clone и npm run build. Анализ ограничен тем, что вы передадите в аргументах: без фрагмента кода или описания экрана инструмент ничего не проверит.
Какие задачи решает
- найти нарушения WCAG в разметке перед релизом
- посчитать контраст текста и фона по числам из макета
- подобрать паттерн формы под конкретный сценарий
- сгенерировать доступную палитру от базового цвета
- разобрать навигацию и структуру разделов сайта
Примеры запросов агенту
- Проверь
checkout.htmlна нарушения WCAG и покажи проблемные места - Посчитай контраст между
#777и белым фоном - Предложи паттерн формы для оформления заказа с адресом и оплатой
Как установить ux-mcp-server
Командой платформы
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverКомандой платформы
codex mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverФайл настроек
{
"mcpServers": {
"ux-mcp-server": {
"command": "npx",
"args": [
"-y",
"@elsahafy/ux-mcp-server"
]
}
}
}Файл настроек
{
"servers": {
"ux-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@elsahafy/ux-mcp-server"
]
}
}
}Командой платформы
gemini mcp add ux-mcp-server npx -y @elsahafy/ux-mcp-serverПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о ux-mcp-server
Как установить ux-mcp-server в Claude Code?
Одной командой: claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server. Она прописывает сервер в конфиг клиента, отдельная установка npm не нужна.
Что делает ux-mcp-server?
Отдаёт агенту базы знаний по UX и инструменты анализа. Агент может проверить доступность кода, контраст цветов, производительность и SEO, а также собрать палитру или шкалу шрифтов.
Нужна ли глобальная установка пакета?
Нет. Клиент запускает сервер через npx, так что хватает Node.js в системе. Глобальный npm install нужен, только если хотите держать пакет локально.
