design.how — плагин
design.how: 6 скиллов превращают интерфейс приложения в дизайн-систему для агента и четыре готовые системы для shadcn.
- 314 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы правят много файлов проекта и запускают скрипты с браузером, а перенос экранов работает параллельными исполнителями.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/design-howОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы правят много файлов проекта и запускают скрипты с браузером, а перенос экранов работает параллельными исполнителями.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
design.how — набор скиллов и дизайн-систем для кодинг-агентов. Шесть скиллов берут интерфейс, который приложение уже выпускает, и собирают из него систему, которой агент может пользоваться, затем добавляют проверку дрейфа и по просьбе переносят все экраны на систему. `design-system-boss` — вход: вы словами описываете проблему, он читает репозиторий, выбирает сценарий и запускает остальные скиллы по порядку. `build-design-system` строит токены, по одному каноничному компоненту на семью, документацию и проверки. `migrate-design-system` переносит экраны параллельными исполнителями, каждый сверяется со скриншотом «до». Есть `token-mapping`, `component-docs` и `ui-review`. Отдельно лежат четыре готовые системы, Glaze, Lime, Quartz и Sodium. Каждая ставится через shadcn и приносит свой скилл. Папка Vault содержит скиллы визуальных эффектов: подвижный шрифт, шейдерные поля и мелкие элементы интерфейса.
Для кого. Фронтенд-разработчикам и дизайнерам, у которых интерфейс накопил разнобой и нужна система токенов и компонентов, понятная агенту.
Подходит, если
- В приложении встречаются разные радиусы, отступы и оттенки, и нужны токены.
- Коды цветов и пиксели сопоставляют токенам по назначению, ничего не меняя в коде.
- Новый проект стартует с готовой системы Quartz для агентских интерфейсов через shadcn.
- Перед переносом экранов запускают аудит, который пишет заметки в `.design-system/` и ничего не коммитит.
Не подходит, если
- Нужна одна быстрая правка стиля: набор рассчитан на систему целиком.
- Приложение вне веб-стека, и скриншоты с браузером недоступны.
- Системе нужен собственный вкус вместо стандартных запретов и ширин из `taste.md`.
Пример запроса к агенту
Проведи аудит интерфейса моего приложения, найди разнобой в токенах и предложи план дизайн-системы. Ничего не коммить.Ограничения
Скрипты со снимками экрана требуют Playwright и Chromium. Перенос экранов запускает параллельных исполнителей и правит много файлов проекта, поэтому начинайте с режима аудита, который только пишет заметки. Проверки в `evals/` подтверждают лишь то, что правило записано в скилле, а не то, что агент его выполнит. Скиллы опираются на общий `build-design-system`, ставьте его рядом с любым выбранным скиллом. Готовые системы ставятся через shadcn из сети. Последний коммит сделан в ноябре 2026.
Как отключить. В Claude Code удалите плагин: `/plugin uninstall design-system-skills@design-how`. Скиллы, поставленные через `npx skills`, удалите из каталога скиллов агента, а `.design-system/` из проекта.
Частые вопросы
Как поставить все шесть скиллов?
Выполните `npx skills@latest add https://design.how`. Из GitHub то же ставит `npx skills@latest add arla6ka/design.how`.
Как поставить плагин в Claude Code?
Выполните `/plugin marketplace add arla6ka/design.how`, затем `/plugin install design-system-skills@design-how`.
Как добавить готовую систему?
Командой shadcn, например `npx shadcn@latest add https://design.how/r/quartz/theme.json`. Вместе с темой ставится скилл системы.
С чего начать?
Со скилла `design-system-boss`: вы описываете проблему, а он выбирает сценарий и запускает остальные. Закончит он системой, одним перенесенным потоком и проверкой для CI.
Что такое Vault?
Папка скиллов визуальных эффектов: подвижный шрифт, шейдерные поля и мелкие элементы. Каждый ставится по имени, например `npx skills add https://design.how/vault/warp-type`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныMCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Пакет скиллов и команд для Claude Code: аудит токенов и компонентов, управление, документация и отчеты для команды дизайн-системы
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
CLI, который вытаскивает дизайн-систему любого сайта в токены: цвета, шрифты, отступы, тени за один запуск
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| design.how (эта карточка) | нет | 314 | ||
| extract-design-system | нет | 288 | снимает токены с публичного сайта; design.how строит систему из вашего приложения и переносит экраны | |
| Design Systems MCP | нет | не нужна | 227 | MCP со знаниями о дизайн-системах; здесь скиллы для построения и переноса и четыре готовые системы |
Коротко о README
Набор состоит из шести скиллов, десяти скриптов с `--help` и `--self-test`, четырех систем и каталога эффектов. Словарь и вкус по умолчанию лежат внутри `build-design-system`, их можно заменить своими.