UX/UI Agent Skills — превращаем Claude в старшего дизайн-архитектора
📂 Исходный код на GitHubПревращает Claude в senior-дизайн-архитектора: DTCG-токены, 50 компонентов, WCAG 2.2 AA–AAA, 138 дизайн-систем, код для любого фреймворка и 40 объективных проверок вместо обещаний «я всё сделал».
UX/UI Agent Skills — превращаем Claude в старшего дизайн-архитектора
Хорошо знакомая картина: просишь нейросеть собрать дашборд — получаешь индиго-фиолетовый градиент, четыре одинаковые карточки без визуального центра, эмодзи вместо иконок, один радиус и одну тень на весь экран, серый текст на белом фоне и неоново-синюю кнопку Delete Account. Проект UX/UI Agent Skills написан ровно против этого. Это набор структурированных инструкций, дизайн-токенов и запускаемых скиллов, который превращает Claude в агента уровня senior-дизайнера с большим опытом в дизайн-системах, доступности и production-готовых компонентах.
Автор проекта — Тиентан Сопарат (plugin87), лицензия MIT, более 1,3 тысячи звёзд на GitHub. Никакой сборки, зависимостей и рантайма — это чистый слой инструкций и знаний для ИИ-агента. Ставится как плагин Claude Code или разворачивается через npx в любой проект.
Что внутри
Кит ориентирован на любой фреймворк и любую дизайн-систему. Основные возможности:
| Возможность | Что делает |
|---|---|
| Дизайн-токены | JSON-токены в формате DTCG: цвета, типографика, отступы, тени, границы, брейкпоинты, motion. Трёхуровневая архитектура: Primitive → Semantic → Component |
| Проектирование компонентов | От атомов до шаблонов по Atomic Design: анатомия, варианты, состояния, привязка к токенам, требования доступности |
| Генерация кода | Adapter Protocol для любого стека: React + Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, CSS-in-JS. Шестнадцать готовых адаптеров, новый генерируется на месте |
| Интероп с дизайн-системами | Двусторонний маппинг на Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix через ролевой crosswalk |
| Запускаемые скиллы | 19 скиллов, 5 slash-команд и реальные скрипты: валидаторы токенов и контраста, WCAG-проверки на реальном рендере, axe-core, focus trap, RTL, размер целей нажатия, клавиатура, reduced motion |
| Аудит доступности | Проверка по WCAG 2.2 AA и AAA с приоритизацией находок P0/P1/P2 |
| Дизайн-ревью | Оценка по шести измерениям с эвристиками Нильсена и структурированной таблицей находок |
| Прототипирование и исследования | Лестница фидельности из пяти уровней, user journey mapping, сценарии юзабилити-тестов |
| Motion-дизайн | Токенизированные длительности, кривые easing, пресеты переходов, стратегия reduced-motion |
| UX-райтинг | Voice and tone, формулы ошибок и пустых состояний, паттерны микрокопирайта, инклюзивный язык |
| Вкус | Анти-slop доктрина, эстетические архетипы и библиотека из 138 именованных дизайн-систем |
Отдельного упоминания заслуживает каталог из 138 дизайн-систем в директории taste: это справочник для вариативности раскладок, «редакционной» типографики и премиального визуального направления — противоядие от одинаковых сгенерированных экранов.
Установка
Вариант A — плагин Claude Code (рекомендуемый). Две команды, и все скиллы доступны в любом проекте — файлы в репозиторий не копируются:
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skillsВы получаете 19 скиллов (/design-component, /data-dashboard, /brandkit и другие), 5 команд (/gate, /critique, /grill-me, /ship, /scaffold-project) и агента design-critic. Дальше достаточно просто попросить то, что нужно — нужный скилл подхватится сам:
"Design a notification component with all states and accessibility"
"Build the billing settings screen, one shared theme, light and dark"
"/gate" run all checks and report the real N/N
"/critique" hand the result to a critic that argues for rejectionВариант B — через npx, без клонирования:
npx ux-ui-agent-skills init # весь набор в текущую папку
npx ux-ui-agent-skills add tokens taste design-systems
npx ux-ui-agent-skills list # все доступные разделыЕсть флаги --force (перезаписать существующие файлы) и --dry (показать, что изменится, ничего не трогая).
Сначала посмотреть, потом ставить. Команда npx ux-ui-agent-skills demo копирует готовые примеры и открывает их в браузере — каждую страницу можно удалить сразу после просмотра. Либо вообще без установки: живое демо на plugin87.github.io/ux-ui-agent-skills — 26 отрендеренных страниц со всеми харнессами компонентов и переключателем темы. Показательно, что один из примеров — Meridian Terminal, «тест на плотность»: десять типов диаграмм на одном экране, каждая нарисована inline SVG из тех же токенов, без графических библиотек.
После установки открываете проект в Claude Code или любой Claude-совместимой IDE: CLAUDE.md загружается автоматически и активирует персону агента с доступом ко всем токенам, компонентам и скиллам.
Ворота вместо обещаний
Главная особенность проекта — 40 объективных проверок, которые запускаются одной командой:
node scripts/accuracy_report.mjs # 40/40 or it fails — no partial creditТридцать проверок из сорока открывают настоящий headless-браузер и меряют именно отрендеренный HTML: WCAG-контраст в light и dark темах, каждый элемент в состояниях default, hover и focus, роли и имена через axe-core, focus traps, RTL, отзывчивость на ширинах 280/320/414, размер целей нажатия, клавиатурная доступность, reduced motion (включая контент, который виден только во время анимации), «тихое» обрезание текста. Ещё десять читают файлы: валидность токенов и резолвинг алиасов, контрастная математика на исходнике токенов, спеки компонентов, жёстко прописанные значения, эмодзи.
При этом авторы честно разделяют «корректно» и «хорошо». Корректность измеряется проверками, а качество судит команда /critique — adversarial-агент design-critic, который рендерит работу, снимает скриншоты на 1280 и 390 пикселей в обеих темах, кликает каждый контрол и возвращает вердикт с аргументами, за которые senior-дизайнер отправил бы работу на переделку. Правило сформулировано прямо: пройденная проверка — никогда не доказательство вкуса.
Проект проверяли и «вслепую»: двум субагентам дали бриф и проект, заскаффолденный через ux-ui-skills new — без подсказок, без готовых примеров, без доступа к переписке авторов. Оба набрали 14/14 на независимом прогоне evals/run.mjs: правила переносятся на холодный старт. А заодно вскрыли семь дефектов, которые «прогретые» прогоны не ловили: кнопку с контрастом 1.13:1 в тёмной теме, reduced-motion-политику во внешнем стилевом файле, которую браузер посчитал отсутствующей, нехватку scrim-токена, gate, не знавший, что «cancel subscription» — деструктивное действие. Находки ушли обратно в набор — одна из них стала новой проверкой verify_interactive.mjs, которая валит любой контрол, декларирующий смену состояния, но не меняющийся при клике. Невредимые результаты слепых прогонов хранятся в evals как запись эксперимента, а полный лог — в evals/RESULTS.md.
Что проверки ловят на практике
Авторы собрали «эталонный slop» — дашборд, написанный так, как пишет модель, когда ей ничего не запрещает. Вот вердикты проверок по нему:
| Проверка | Вердикт |
|---|---|
| WCAG на реальном рендере | Заголовок h1 с контрастом 1.00:1 (нужно 3) — белый текст на градиенте |
| Размер целей (WCAG 2.5.8) | Кнопка 15,3×16 при минимуме 24×24 |
| Отзывчивость | Горизонтальный overflow +820 px на ширине 280 |
| axe-core | SERIOUS target-size |
| Slop-признаки | HIGH: ручной индиго-градиент, один радиус, одна плоская тень |
| Аудит вкуса | HIGH: крупнейший заголовок 24 px против 14 px тела — всего 1,7×, не дисплейная шкала |
| Токен по намерению | Деструктивная кнопка залита цветом с оттенком 239° вне danger-диапазона |
| Без эмодзи | Эмодзи в разметке |
| Без жёстких значений | 63 прописанных значения вместо токенов |
Восемь проверок, девять находок — и ни одна не вопрос вкуса. Эталонная страница эти проверки не проходит, а референсное приложение из репозитория проходит все сорок.
Документация
- docs/GUIDE.md — использование как плагина, композиция скиллов, карта репозитория, архитектура токенов, фреймворки, интероп, стандарты доступности;
- CHANGELOG.md — история релизов (текущая версия — 2.9.0);
- CLAUDE.md — постоянно активный бриф, который читает агент;
- правила в .claude/rules — глубина за брифом: токены и цвет, типографика и отступы, компоненты, доступность, фреймворки, ревью;
- taste — анти-slop доктрина, 138 дизайн-систем, хореография motion;
- CONTRIBUTING.md — планка для пул-реквестов и шаблон для главной ценности багрепорта здесь: «gate gap», случая, когда проверка пропустила работу, которую должна была поймать.
Кому подойдёт
Набор полезен всем, кто генерирует интерфейсы с помощью Claude: фронтендерам, которым нужен код, соответствующий WCAG и дизайн-токенам, дизайнерам, которые хотят проверяемые, а не «на глазок» результаты, и командам, строящим собственную дизайн-систему. Из коробки он не требует ничего, кроме Claude Code, а за счёт adapter protocol не привязывает вас к конкретному стеку. Редкий случай, когда про «вкус» в ИИ-генерации говорят не декларациями, а измеримыми проверками — с честным разделением того, что можно измерить, и того, что можно только судить.