Roast My Design System — MCP-сервер для Claude Code: настройка
Аудирует кодовую базу интерфейса, находит пропуски в дизайн-системе и передаёт ассистенту правила, чтобы генерация UI не ломала общие токены.
claude mcp add roast-my-design-system -- npx -y roast-my-design-systemЧто делает Roast My Design System
Сервер сканирует проект и выявляет места, где ассистенту не хватает готовых токенов. Если в кодовой базе нет единой палитры или масштаба отступов, модель начинает подставлять произвольные значения. Инструмент отслеживает CSS-переменные, темы Tailwind, Sass, стили Less и распознаёт библиотеки уровня MUI, Mantine, Chakra или shadcn/ui.
После проверки утилита рассчитывает балл здоровья от 0 до 100, выдаёт отчёт в формате HTML и генерирует файл design-system-rules.md. В него попадают канонические компоненты, обнаруженные дубликаты и шаг сетки. Флаг --apply сразу раскладывает выведенные правила по файлам инструкций для Claude Code, Cursor, Copilot или Windsurf.
Анализ проходит локально без отправки телеметрии и без сетевых запросов. Инструмент проверяет исключительно исходный код без рендеринга страниц в браузере. Поэтому нулевое количество замечаний подтверждает соблюдение синтаксических правил, но не оценивает внешнюю красоту интерфейса.
Какие задачи решает
- найти хардкод цветов и произвольные отступы в интерфейсе
- сформировать файл
design-system-rules.mdс токенами проекта - рассчитать общий балл соблюдения дизайн-системы для монорепозитория
- передать актуальные правила стилей агенту через MCP
Примеры запросов агенту
- Проверь проект через roast-my-design-system и покажи пропущенные токены
- Создай новый график, используя только зарегистрированную палитру темы
- Обнови файл design-system-rules.md и запиши правила в конфиг агента
Как установить Roast My Design System
Командой платформы
claude mcp add roast-my-design-system -- npx -y roast-my-design-systemКомандой платформы
codex mcp add roast-my-design-system -- npx -y roast-my-design-systemФайл настроек
{
"mcpServers": {
"roast-my-design-system": {
"command": "npx",
"args": [
"-y",
"roast-my-design-system"
]
}
}
}Файл настроек
{
"servers": {
"roast-my-design-system": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"roast-my-design-system"
]
}
}
}Командой платформы
gemini mcp add roast-my-design-system npx -y roast-my-design-systemПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Roast My Design System
Как установить Roast My Design System в Claude Code?
Выполните команду claude mcp add roast-my-design-system -- npx -y roast-my-design-system. Сервер подключится через npx без локальной установки пакета в проект.
Что делает Roast My Design System?
Он находит пробелы в дизайн-системе фронтенда, ищет дубликаты компонентов и хардкод стилей. Затем сервер передаёт модели точные ограничения, чтобы сгенерированный код не расходился с базовой темой.
Отправляет ли инструмент файлы проекта на внешние серверы?
Нет, проверка выполняется локально без сетевых запросов и телеметрии. Никакие учётные данные или правки в репозиторий без флага применения не вносятся.
