Как научить ИИ-агентов делать опрятные интерфейсы

Если вы просили Cursor или Claude Code сделать всплывающее меню или модалку, то наверняка замечали странную деталь. Код работает, кнопка нажимается, но выглядит всё как-то топорно. Элементы вылетают с нелепой задержкой, границы плашек нарисованы сплошной темной линией, а для простого всплывающего уведомления модель тянет заброшенный пакет пятилетней давности.

Языковые модели неплохо пишут логику компонентов, но эстетического чутья у них нет. Они выбирают первые попавшиеся параметры из обучающей выборки. На выходе получается типовой интерфейсный шум.

Эмиль Ковальски, который раньше отвечал за анимации и интерфейсы в Vercel и Linear, собрал репозиторий emilkowalski/skills. Это набор готовых инструкций для ИИ-агентов, которые учат нейросети верстать аккуратнее.

Зачем агентам правила дизайна

Знакома ситуация, когда ИИ анимирует появление окон невпопад? Частая ошибка — функция сглаживания ease-in для входа элемента на экран. В реальности входящие элементы должны начинать движение быстро и замедляться в конце (ease-out), иначе интерфейс кажется заторможенным.

То же самое касается деталей верстки. Нейросети часто ставят сплошную рамку там, где нужен полупрозрачный box-shadow, или выдумывают велосипеды вместо проверенных библиотек.

Мелкие промахи накапливаются. В итоге UI выглядит дешево. Набор навыков Эмиля заставляет нейросеть сверяться с базовыми правилами дизайн-инжиниринга перед тем, как отдать вам готовый код.

Как установить инструкции

Для установки используется CLI-утилита skills:

npx skills@latest add emilkowalski/skills

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

Что внутри репозитория

Внутри лежит набор инструкций в формате Markdown, разбитый по задачам.

Проверка и улучшение движения

Инструкции review-animations и improve-animations заставляют агента устроить строгий аудит кода. Модель ищет пропущенные сглаживания, слишком длинные задержки и неаккуратные трансформации. Вместо случайных правок агент формирует пошаговый план оптимизации, который сам же и выполняет.

Правило find-animation-opportunities помогает найти места, где анимация действительно необходима, и прямо запрещает добавлять движение там, где оно будет только мешать пользователю.

Словарь и гайдлайны Apple

Чтобы нейросеть поняла, какой именно микровзаимодействие вам нужно, пригодится animation-vocabulary. В нем собраны точные термины для описания анимаций.

Отдельный файл apple-design содержит адаптированные для веба принципы интерфейсов Apple с прошлых конференций WWDC. Они помогают воссоздать то самое ощущение отзывчивого UI.

Выбор библиотек и прототипирование

Если попросить модель сделать кастомный toast или dropdown, она либо напишет сто строк хрупкого кода, либо установит давно не поддерживаемый пакет. Правило pick-ui-library заставляет ИИ брать только проверенные решения, которыми пользуются в продуктовых командах.

Для быстрых экспериментов есть prototype. Этот навык генерирует сразу несколько вариантов одного и того же UI-элемента и добавляет сверху переключатель, чтобы вы могли сравнить их вживую.

Кому это пригодится

Если вы ежедневно используете Cursor, Claude Code, Windsurf или аналогичные CLI-агенты для фронтенда, этот репозиторий сэкономит кучу времени на ручных правках CSS. Вам больше не придется вручную менять ease-in на cubic-bezier и объяснять модели, почему сплошная рамка на тёмной теме выглядит плохо.