melta UI MCP
MCP-сервер и линтер дизайн-системы: агент читает токены и правила до генерации UI, а проверка возвращает нарушения
- 202 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Команда `npx -y` скачивает пакет из npm и запускает его на машине без подтверждения версии
- При установке из клона хук PostToolUse на файлах `.html`, `.tsx`, `.jsx` и `.vue` блокирует правку агента и возвращает ему список нарушений
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/melta-uiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Команда `npx -y` скачивает пакет из npm и запускает его на машине без подтверждения версии
- При установке из клона хук PostToolUse на файлах `.html`, `.tsx`, `.jsx` и `.vue` блокирует правку агента и возвращает ему список нарушений
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
melta UI превращает дизайн-гайдлайны в контракт, который проверяется машиной. Пакет `melta-ds-mcp` запускает MCP-сервер, через который агент берет нужные значения и правила по запросу: токены, спецификации компонентов, список запретов. Инструмент `check_html` проверяет сгенерированную разметку тем же кодом, что идет в CI и в хуки, и возвращает список нарушений с причинами и заменами. В данных сейчас 101 токен, 107 запрещающих правил и 40 контрактов компонентов. Автоматически проверяются 49 правил из 107, остальные README разносит по категориям: проверка в тесте взаимодействия, невозможная статическая проверка, кандидаты на оценку моделью и правила только для человека. Среди инструментов `get_token`, `get_component`, `check_rule` и `check_html`. Сервер при подключении сам передает агенту инструкции: сначала прочитать `melta://design-constitution`, после генерации проверить результат. В репозитории лежат еще три скилла, `ban-pattern`, `build-screen` и `design-review`, и отдельные пакеты `melta-contracts` с данными и `melta-app` для React Native.
Для кого. Командам, которые генерируют интерфейсы в Claude Code, Cursor или Codex и хотят, чтобы агент соблюдал правила дизайн-системы, а нарушения ловились автоматически.
Подходит, если
- Гайдлайн написан, но агент его нарушает, и нужна проверка сразу после генерации, а не на ревью
- Агент сам перед выдачей экрана прогоняет разметку через `check_html` и исправляет нарушения
- Нужны токены и спецификации компонентов по запросу, без загрузки всего гайдлайна в контекст
- Веб и React Native должны делить один контракт дизайна
Не подходит, если
- Нужен готовый набор React-компонентов для установки: melta UI раздает значения, правила и проверку, а не библиотеку компонентов
- Стили в проекте не в классах Tailwind, например CSS-in-JS через пропсы: статическая проверка тогда не срабатывает
- Нужна проверка вложенности и доступности в JSX: она работает только для HTML, для JSX проверяются классы и атрибуты
Пример запроса к агенту
Сделай таблицу пользователей по правилам melta UI, прогони разметку через check_html и исправь нарушения, пока проверка не пройдет.MCP
- Транспорт
- stdio
- Авторизация
- не нужна
Ограничения
Проверка рассчитана на стили в классах Tailwind. Из 107 правил автоматически ловятся 49, остальные ждут оценки моделью или человека, а `check_html.passed` означает отсутствие найденных нарушений, а не одобрение бренда.
Хук на правку файла и CI-проверка есть только в клоне репозитория: при установке через `npm` доходят сервер, `melta-ds-mcp/lint` и CLI `melta-lint`, а хук и CI подключают сами. Нужен Node 22 или новее. Своя дизайн-система подключается заменой данных, а новые виды проверок требуют изменений движка.
Как отключить. Выполните `claude mcp remove melta-ui` и удалите блок из конфигурации другого клиента. При установке из клона уберите хук PostToolUse из `.claude/settings.json` и запись в `.mcp.json`. Пакеты `melta-contracts` и `melta-app`, если ставили, удаляются командой `npm uninstall`.
Частые вопросы
Как подключить melta UI к Claude Code?
Выполните `claude mcp add melta-ui -- npx -y melta-ds-mcp`, затем `claude mcp list`: в списке должна появиться строка `melta-ui` со статусом Connected. В Cursor сервер читается из `.cursor/mcp.json` клона, Codex регистрирует ту же команду stdio.
Что возвращает check_html?
Объект с полем `passed`, числом ошибок и предупреждений и списком нарушений, у каждого есть идентификатор правила, причина и замена. Например, `text-black` заменяется на `text-slate-900`, а `bg-blue-500` на `bg-primary-*`.
Это готовая библиотека компонентов?
Нет. Автор сам пишет, что melta UI раздает значения, правила, спецификации и проверку, а веб-часть поставляется как справочная реализация на HTML и Tailwind. Для React Native есть отдельный пакет `melta-app`.
Как подключить свою дизайн-систему?
Через режим BYO-DS: сервер при запуске можно направить на собственный набор данных, начиная с четырех файлов. Правила melta с вашими при этом не смешиваются. Порядок и пределы описаны в `docs/distribution.md`.
Чем melta UI отличается от design-systems-mcp?
design-systems-mcp отдает общие знания о дизайн-системах, токенах и доступности. melta UI хранит контракт одной системы и проверяет по нему сгенерированный HTML теми же правилами, что идут в CI.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыMCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл и CLI для агентов: интерфейс без шаблонного вида, 25 команд, проверка шаблонности правилами и оценка качества от 0 до 100
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
MCP-сервер CodeRocket отдает агенту правила дизайн-системы, компоненты и блоки сохраненной библиотеки только на чтение.
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
Агент получает спецификацию MDMA, промпты и проверку, чтобы отвечать формами, таблицами и согласованиями прямо в Markdown
Коротко о README
README на японском, есть английская версия `README.en.md`. В нем разобрано, кому подходит и не подходит проект, перечислены доказательства (CI на Playwright и axe-core, нулевая разница пикселей на пяти CSS-сбросах), пакеты `melta-contracts`, `melta-ds-mcp` и `melta-app`, два пути быстрого старта и четырехслойная схема: контракт, ссылка, проверка, наблюдение. Отдельный раздел описывает пределы покрытия.