melta UI — MCP-сервер для Claude Code: проверка UI
Передаёт агенту дизайн-контракты и проверяет сгенерированный HTML через check_html. Помогает применять правила дизайн-системы при создании интерфейсов.
claude mcp add melta-ui -- npx -y melta-ds-mcpЧто делает melta UI
melta UI даёт агенту доступ к токенам, правилам и контрактам компонентов, а затем проверяет результат инструментом check_html. Если проверка находит нарушения, агент может исправить разметку и проверить её повторно. Это набор контрактов и проверок, а не готовая библиотека CSS-компонентов.
MCP-сервер запускается через npx -y melta-ds-mcp; для установки нужен Node 22 или новее и клиент с поддержкой stdio MCP. Статическая проверка рассчитана на Tailwind-классы и HTML-атрибуты. Без классов в разметке она не сможет проверить стили; проверка вложенности и доступности работает только для HTML.
Можно подключить собственный набор дизайн-ассетов вместо правил melta UI. Для проверки готовых страниц в браузере отдельно нужны Tailwind и настройки токенов melta. Если проект стилизует интерфейс через CSS-in-JS props, статический lint не увидит эти стили.
Какие задачи решает
- проверить HTML на нарушения дизайн-правил
- найти неподходящие Tailwind-классы в сгенерированной разметке
- передать агенту контракты компонентов до генерации интерфейса
- проверить HTML на ошибки вложенности и доступности
Примеры запросов агенту
- Создай таблицу пользователей по контрактам melta UI и проверь HTML через
check_html. - Проверь эту разметку на нарушения дизайн-правил и исправь найденные ошибки.
- Сверстай карточку с токенами melta UI, затем запусти
check_html.
Как установить melta UI
Командой платформы
claude mcp add melta-ui -- npx -y melta-ds-mcpКомандой платформы
codex mcp add melta-ui -- npx -y melta-ds-mcpФайл настроек
{
"mcpServers": {
"melta-ui": {
"command": "npx",
"args": [
"-y",
"melta-ds-mcp"
]
}
}
}Файл настроек
{
"servers": {
"melta-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"melta-ds-mcp"
]
}
}
}Командой платформы
gemini mcp add melta-ui npx -y melta-ds-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о melta UI
Как установить melta UI в Claude Code?
Выполните claude mcp add melta-ui -- npx -y melta-ds-mcp. Для запуска требуется Node 22 или новее.
Что делает melta UI?
Сервер предоставляет агенту дизайн-контракты и проверяет HTML инструментом check_html. Он сообщает о нарушениях, чтобы агент мог исправить разметку.
Какие ограничения есть у проверки melta UI?
Статический lint рассчитан на Tailwind-классы и HTML-атрибуты. Проверка вложенности и доступности работает только для HTML, а стили через CSS-in-JS props не видны статическому lint.
