Прокачиваем Claude для создания интерфейсов
Claude можно научить работать с UI/UX гораздо системнее. На GitHub появился набор UX/UI Agent Skills — готовые инструкции, дизайн-токены, компоненты и библиотека из 138 дизайн-систем.
Набор просто добавляется в проект, после чего Claude получает правила работы с цветами, типографикой, отступами, состояниями компонентов и доступностью.
Что умеет:
- превращать скриншоты и макеты в код;
- создавать интерфейсы в стиле конкретной дизайн-системы;
- проверять WCAG 2.2 и контрастность;
- учитывать клавиатурную навигацию и ARIA;
- проектировать компоненты с вариантами и состояниями;
- генерировать код для React, Vue, SwiftUI, Svelte, Flutter и других стеков.
Есть и готовые команды вроде /image-to-code, /design-code, /design-review, /a11y-audit и /apply-aesthetic. Например, можно попросить Claude сделать страницу в стиле Linear, затем проверить её доступность и сгенерировать production-ready код.
Сам проект не требует сборки или дополнительных зависимостей — это набор инструкций и знаний для AI-агентов. Установить его можно через npx или клонировать репозиторий.
UX/UI Agent Skills — пригодится тем, кто хочет получать от Claude не просто рабочий код, а более последовательный и продуманный интерфейс.
Ссылка на репозиторий UX/UI Agent Skills в данном посте: https://t.me/kodjournal/303