# ux-mcp-server

Сервер с базами знаний по UX и инструментами анализа: проверяет доступность, контраст и вёрстку прямо в коде вашего проекта.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 35
- Автор: elsahafy
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/elsahafy/ux-mcp-server
- Обновлён: 2026-04-01
- HTML: https://affpapa.org/nevibecode/mcp/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`. Анализ ограничен тем, что вы передадите в аргументах: без фрагмента кода или описания экрана инструмент ничего не проверит.

## Требования
- Нужно: Node.js (команды через npx)

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server
```

### Codex

**Командой платформы**
```bash
codex mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ux-mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "@elsahafy/ux-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "ux-mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@elsahafy/ux-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add ux-mcp-server npx -y @elsahafy/ux-mcp-server
```

## Когда брать
- найти нарушения WCAG в разметке перед релизом
- посчитать контраст текста и фона по числам из макета
- подобрать паттерн формы под конкретный сценарий
- сгенерировать доступную палитру от базового цвета
- разобрать навигацию и структуру разделов сайта

## Примеры запросов агенту
- Проверь `checkout.html` на нарушения WCAG и покажи проблемные места
- Посчитай контраст между `#777` и белым фоном
- Предложи паттерн формы для оформления заказа с адресом и оплатой

## Похожие
- [GitHub](https://affpapa.org/nevibecode/mcp/github.md) — MCP-сервер · ★ 33918
- [Netdata](https://affpapa.org/nevibecode/mcp/netdata.md) — MCP-сервер · ★ 81115
- [browser-use](https://affpapa.org/nevibecode/mcp/browser-use.md) — MCP-сервер · ★ 119160
- [Codebase Memory](https://affpapa.org/nevibecode/mcp/codebase-memory.md) — MCP-сервер · ★ 47392
- [mcp-server](https://affpapa.org/nevibecode/mcp/mcp-server.md) — MCP-сервер · ★ 43872
- [AIHawk](https://affpapa.org/nevibecode/mcp/aihawk.md) — MCP-сервер · ★ 32221

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md