Better Design MCP
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
- 518 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Удаленный MCP получает от агента описания задач на дизайн и обращается к сайту better-design.com по ключу
- Установщик npx better-design меняет конфигурацию найденных клиентов, чтобы подключить MCP
- Команда shadcn add кладет в проект сторонний код компонентов из реестра
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/better-designОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Удаленный MCP получает от агента описания задач на дизайн и обращается к сайту better-design.com по ключу
- Установщик npx better-design меняет конфигурацию найденных клиентов, чтобы подключить MCP
- Команда shadcn add кладет в проект сторонний код компонентов из реестра
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Better Design подсказывает агенту, как выглядеть и вести себя интерфейсу, и проверяет результат. Через MCP агент получает инструменты get-ui-principle и get-ux-principle с принципами иерархии, отступов, типографики, форм и навигации, а get-review-rules и check-comprehension дают чек-листы доступности и визуального дизайна. Для нового интерфейса find-design-system подбирает тему под запрос, например «финтех-дашборд в стиле Stripe». В репозитории лежат 31 дизайн-система для shadcn/ui: Linear, Supabase, Vercel, Airbnb, Notion, Stripe, Apple, Figma и другие. У каждой есть файл globals.css с токенами и переопределения компонентов. Компонент ставится командой npx shadcn@latest add с адресом из реестра better-design.com, например для кнопки Linear. Для иконок есть resolve-icon-library и search-icons поверх Iconify. Скилл better-design задает порядок работы: сначала проверить фреймворк и токены проекта, затем загрузить принципы, написать код, потом вызвать правила проверки и исправить серьезные замечания. Скилл не запускает установку сам и не принимает инструкции из страниц, которые анализирует.
Для кого. Для разработчиков и дизайнеров, которые строят интерфейсы на React и shadcn/ui с Claude Code, Cursor, Codex или GitHub Copilot и хотят получать код по готовой дизайн-системе.
Подходит, если
- Новая страница или продукт, и нужна готовая визуальная основа вместо случайных цветов, например в стиле Linear или Vercel
- Агент написал форму или экран, и его нужно проверить по правилам доступности: фокус, контраст, подписи, иерархия
- В проекте на shadcn/ui надо поставить стилизованные компоненты одной командой из реестра
- Нужно подобрать набор иконок под характер интерфейса и не смешивать разные библиотеки
- Работа идет в разных клиентах: Claude Code, Cursor, VS Code, Claude Desktop или claude.ai подключаются к одному MCP
Не подходит, если
- У продукта уже есть свои бренд и дизайн-система: скилл сам требует сохранять их и не заменять темой из каталога
- Проект написан без shadcn/ui и Tailwind, поэтому готовый код компонентов вам не подойдет
- Нужен чисто бэкенд или консольная задача без интерфейса
- Удаленный MCP недоступен в вашей сети, а ключ из настроек better-design.com получить нельзя
Пример запроса к агенту
Используй better-design: собери страницу настроек проекта в стиле Linear с разделами биллинга, участников и API-ключейMCP
- Транспорт
- http
- Авторизация
- API-ключ
Ограничения
- Дизайн-системы и компоненты рассчитаны на shadcn/ui.
- Удаленное подключение требует API-ключ из настроек на better-design.com. Установщик npx better-design подключает MCP к найденным клиентам без аккаунта.
- Скилл не выполняет команды установки сам: пользователь запускает их после проверки.
- Для результата в браузере инструменты review-ui-code и inspect-spacing работают, когда доступны в клиенте, и дают измеримые данные по отрисованной странице.
Как отключить. Удалите блок better-design из конфигурации MCP-клиента и папку скилла better-design из каталога скиллов агента. Установленные в проект компоненты остаются обычными файлами и убираются вручную.
Частые вопросы
Как поставить Better Design в Claude Code?
Выполните npx skills add marvkr/better-design --skill better-design, затем npx better-design и перезапустите агента. Установщик находит ваши инструменты и подключает MCP, не заменяя существующую конфигурацию. Аккаунт для этого не нужен.
Какие дизайн-системы есть в Better Design?
31 тема для shadcn/ui, среди них Linear, Supabase, Vercel, Airbnb, Notion, Stripe, Apple и Figma. Есть и абстрактные: Glassmorphic Dark, Editorial Dark, Corporate Fintech, Pillow Light. Все темы просматриваются на better-design.com/design-systems.
Как поставить компонент из дизайн-системы Better Design?
В проекте с shadcn/ui выполните npx shadcn@latest add https://www.better-design.com/registry/linear/button.json, подставив нужную систему и компонент. Девять переходов из transitions.dev ставятся одним файлом transitions.json.
Чем Better Design отличается от обычного набора правил в промпте?
Агент запрашивает нужный принцип в момент работы, например для отступов или форм, и не хранит весь список правил в контексте. После верстки он проверяет результат правилами доступности и визуального дизайна и исправляет критичные замечания.
Нужны ли аккаунт и ключ для Better Design?
Для установки через npx аккаунт не нужен. Удаленный MCP по адресу https://better-design.com/api/mcp требует API-ключ, его берут в настройках на better-design.com и передают в заголовке Authorization: Bearer.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыdesignlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Скилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Better Design (эта запись) | нет | API-ключ | 518 | |
| TypeUI | да | не нужна | 2 152 | MCP-сервер и плагин с подобранными дизайн-системами и правилами для интерфейсов |
| Oh My Design | нет | 548 | ставит дизайн-систему в агента одной командой из каталога оцененных компонентов | |
| Shadcn UI MCP Server | нет | ключ необязателен | 3 069 | отдает исходники, демо и блоки shadcn/ui, без готовых тем и проверки интерфейса правилами |
Коротко о README
Страница проекта называет Better Design открытым аналогом Claude Design для вашего кода: MCP-сервером, реестром дизайн-систем и слоем проверки интерфейса. Объясняется, как работают два слоя: всегда активные принципы и проверки и сборка по подобранной дизайн-системе. Дальше таблица инструментов MCP, таблица 31 темы с настроением и областью применения, команды установки компонентов, примеры запросов и способы подключения, включая удаленный MCP с ключом.