Превращаем Claude в senior-дизайнера: библиотека с 138 дизайн-системами и 50 готовыми компонентами

Приветствую! Нашел мощную библиотеку скиллов для UI/UX-дизайна под названием ux-ui-agent-skills. Авторы прямо заявляют, что она превращает Claude в senior-архитектора дизайна с 15+ годами опыта - и судя по содержимому, заявка не голословная.

Дизайн-токены по стандарту DTCG. Трехуровневая архитектура: примитивные значения (сырые цвета вроде blue.600), семантические алиасы (action.primary) и компонентные токены (button-bg-primary). Всего 14 файлов токенов - цвета, типографика, отступы, тени, границы, брейкпоинты, движение и другое.

50 готовых спецификаций компонентов, построенных по Atomic Design - от атомов до шаблонов, с описанием анатомии, вариантов, 8 состояний и требований к доступности для каждого.

138 дизайн-систем известных брендов (Apple, Linear, Stripe, Vercel, Notion, Spotify, Tesla и другие) - библиотека для задания визуального направления интерфейса.

Генерация кода под любой фреймворк. Полные референсы для React+Tailwind, Next.js и SwiftUI, плюс адаптеры для Vue, Svelte, Angular, Solid, React Native, Flutter, Jetpack Compose и еще десятка стеков.

Проверка доступности по WCAG 2.2 с приоритизацией находок (критично/важно/по возможности) и реальными скриптами для проверки контрастности, фокус-ловушек и RTL-верстки.

17 запускаемых скиллов через слэш-команды: /design-tokens, /design-component, /design-code, /a11y-audit, /apply-aesthetic и другие - каждый подгружает только нужные файлы.

Самый быстрый способ - через npx, без клонирования репозитория:

npx ux-ui-agent-skills init

Или точечно, только нужные разделы:

npx ux-ui-agent-skills add tokens taste design-systems

После установки открываете проект в Claude Code - файл CLAUDE.md подгружается автоматически, и агент получает доступ ко всем токенам, компонентам и дизайн-системам.

Можно просто описать задачу обычным языком, и встроенный роутер сам подберет нужные файлы:

"Сделай компонент уведомления со всеми состояниями и доступностью"

"Проверь эту страницу входа на соответствие WCAG 2.2"

"Сгенерируй React + Tailwind код для таблицы с сортировкой и пагинацией"

Или вызывать скиллы напрямую через слэш-команды:

/apply-aesthetic linear → задать визуальное направление в стиле Linear

/design-component Combobox → спецификация компонента

/design-code Combobox in React + Tailwind → готовый код

/a11y-audit → проверка доступности

Типичный флоу выглядит так: задается эстетика через готовую дизайн-систему, проектируется компонент, генерируется код, проверяется доступность и в конце проводится ревью дизайна по 6 параметрам (визуальная иерархия, консистентность, доступность, юзабилити, отзывчивость, производительность).

В библиотеке есть встроенные "гейты" - реальные скрипты, которые запускаются в CI и не дают смержить код с проблемами контрастности, захардкоженными значениями цвета или отсутствующей проверкой фокуса. То есть это не просто советы для агента, а система принудительной проверки качества.

Также есть доктрина "anti-slop" - набор правил против шаблонного, безликого AI-дизайна, который сразу узнается по однотипным паттернам.

Нужен Claude Code CLI или любая другая среда с Claude, поддерживающая достаточный контекст (Sonnet, Opus или Haiku).

Для тех, кто генерирует интерфейсы через AI-агентов и устал от типового "AI-дизайна" с одинаковыми карточками и синими кнопками - серьезный инструмент. Библиотека регулярно обновляется, судя по истории изменений - счет версий уже перевалил за 2.4.0.

Репозиторий: github.com/plugin87/ux-ui-agent-skills

Спасибо за внимание!

Больше практических гайдов по нейросетям публикую в своем Телеграм-канале. Если интересна тема AI без воды и с конкретными примерами - добро пожаловать!