MCP-сервер подключает AI-ассистентов к Figma: извлекает токены дизайна, создаёт и редактирует макеты, проверяет соответствие дизайна коду и доступность.
3,1 тыс.+160 за неделю286TypeScriptMITАктивно поддерживаетсяОбновлён 8 дней назад
marvkr/better-design
MCP-сервер и реестр shadcn/ui, который предоставляет агентам для написания кода дизайн-системы, рекомендации по UI/UX, иконки и правила проверки доступности.
Open source альтернатива:Figma
- Звёзды
- 556
- Форки
- 34
- Открытые issues
- 1
- Последний коммит
- 12 дней назад
Что это?
Better Design — MCP-сервер, который предоставляет агентам для написания кода, таким как Claude Code, Cursor, Codex и VS Code, контекст о дизайне, которого им часто не хватает. С его помощью можно подобрать дизайн-систему для описанного продукта, получить её токены и код компонентов, а также найти рекомендации по UI и UX: иерархии, отступам, типографике, формам, навигации и обработке ошибок.
В проекте также есть иконки из единой библиотеки, помогающие сохранить целостный визуальный стиль, и правила проверки доступности и визуального дизайна, которые агент может применять к собственным результатам. Проверить UI-код в проекте по тем же правилам можно с помощью команды CLI. Для установки достаточно выполнить две команды npx: они настроят навык для агента и подключат MCP-сервер к существующей конфигурации инструментов.
Кроме того, каждая дизайн-система опубликована как реестр shadcn, поэтому отдельные компоненты или целую тему можно добавить с помощью shadcn CLI.
Ключевые возможности
- 01Подбирает дизайн-систему под описание продукта.
- 02Предоставляет токены дизайна и код компонентов для установки.
- 03Содержит рекомендации по UI и UX: компоновке, типографике, формам и навигации.
- 04Предоставляет иконки из единой библиотеки, чтобы сохранить целостный стиль.
- 05Проверяет UI-код на доступность и соответствие правилам визуального дизайна.
Сценарии использования
- Поручить AI-агенту для написания кода создать страницу настроек в единой дизайн-системе.
- Добавить в React-проект отдельные компоненты shadcn из выбранной темы в фирменном стиле.
- Проверить сгенерированный UI-код на проблемы с доступностью перед коммитом.
- Сохранить единый стиль иконок в интерфейсе, созданном агентом.
Быстрый старт
- 1
Установите навык агента в свой проект
npx skills add marvkr/better-design --skill better-design - 2
Подключите Better Design к инструментам для программирования и перезапустите агента
npx better-design - 3
Если что-то не работает, проверьте настройки
npx better-design doctor
Что важно знать
- Если у вас нет аккаунта, при настройке для вас создаётся бесплатный ключ, поэтому сервис зависит от хостинга на better-design.com.
В подборках
Темы
Частые вопросы
- Что такое better-design?
- MCP-сервер и реестр shadcn/ui, который предоставляет агентам для написания кода дизайн-системы, рекомендации по UI/UX, иконки и правила проверки доступности. Better Design — MCP-сервер, который предоставляет агентам для написания кода, таким как Claude Code, Cursor, Codex и VS Code, контекст о дизайне, которого им часто не хватает. С его помощью можно подобрать дизайн-систему для описанного продукта, получить её токены и код компонентов, а также найти рекомендации по UI и UX: иерархии, отступам, типографике, формам, навигации и обработке ошибок.
- better-design можно использовать бесплатно? Какая у него лицензия?
- better-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- better-design всё ещё поддерживается?
- Активно поддерживается. Последний коммит в better-design — 25 окт. 2026 г..
- Для чего можно использовать better-design?
- Поручить AI-агенту для написания кода создать страницу настроек в единой дизайн-системе. Добавить в React-проект отдельные компоненты shadcn из выбранной темы в фирменном стиле. Проверить сгенерированный UI-код на проблемы с доступностью перед коммитом. Сохранить единый стиль иконок в интерфейсе, созданном агентом.
- Как установить better-design?
- Установите навык агента в свой проект: npx skills add marvkr/better-design --skill better-design Подключите Better Design к инструментам для программирования и перезапустите агента: npx better-design Если что-то не работает, проверьте настройки: npx better-design doctor
- Где скачать better-design?
- Исходный код и инструкции по установке — на GitHub: https://github.com/marvkr/better-design
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Локальная open-source среда для AI-агентов, которая превращает брифы в прототипы, презентации, дашборды, изображения и видео с помощью вашего coding agent.
106,1 тыс.+1,2 тыс. за неделю12,1 тыс.TypeScriptApache-2.0Обновлён 20 часов назад
Неофициальный порт shadcn/ui для Svelte: доступные настраиваемые компоненты, исходный код которых можно скопировать в своё приложение.
9,2 тыс.+20 за неделю580TypeScriptMITОбновлён 3 дня назад
Набор инструкций и знаний, который помогает Claude и другим coding agents стать экспертами по UX/UI-дизайну: DTCG-токены, спецификации компонентов, 138 дизайн-систем и 52 объективные проверки.
3,1 тыс.+47 за неделю298JavaScriptMITОбновлён 10 дней назад
Создавайте постеры, публикации для соцсетей, слайды и лендинги в GitHub Copilot, Claude Code, Codex или Cursor — без отдельного десктопного приложения.
1 тыс.99HTMLMITОбновлён 9 часов назад
CLI-инструмент, который одной командой извлекает дизайн-систему сайта — цвета, типографику, отступы, тени и компоненты — и преобразует её в design tokens W3C.
3,9 тыс.+69 за неделю339TypeScriptMITАктивно поддерживаетсяОбновлён 5 дней назад