Эмиль Ковальски собрал правила UI-анимации и хорошего вкуса в набор навыков для ИИ-агентов

Искусственный интеллект отлично наловчился генерировать разметку за пару секунд, но почти всегда выдает себя полным отсутствием визуального чутья. Типичная сцена: языковая модель бодро анимирует появление модального окна через резкий ease-in вместо естественного затухания ease-out, а карточки отделяет глухими сплошными рамками толщиной в пиксель вместо мягких полупрозрачных теней. В коде нет синтаксических ошибок, но выглядит это топорно.

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

Тринадцать модулей для сборки интерфейса

Репозиторий не пытается быть очередной дизайн-системой. Нас подкупило, что Ковальски разделил свой инструментарий на тринадцать специализированных модулей, каждый из которых закрывает конкретную слепую зону нейросетей при разработке веба и мобильных экранов:

• emil-design-eng — базовый модуль инженерного дизайна, где собраны фундаментальные советы автора по поведению элементов и анимации;
• animate — инструкция по проектированию движения с нуля, отвечающая за правильные кривые скорости, длительность переходов и выбор анимируемых CSS-свойств;
• animate-expo — расширение для мобильного стека на React Native и Expo, где учтены тонкости работы с жестами, всплывающими шторками, тактильным откликом и переходами между экранами без просадки кадров в основном потоке JavaScript;
• review-animations — жесткий контролер, проводящий ревизию существующей анимации по авторским критериям плавности;
• improve-animations — сканер кодовой базы, находящий проблемную динамику и составляющий для ИИ-агента пошаговый план пакетных правок;
• find-animation-opportunities — инструмент контекстного поиска, определяющий, где микровзаимодействие действительно обогатит опыт, а какие элементы интерфейса категорически нельзя трогать движением;
• animation-vocabulary — терминологический словарь, позволяющий дизайнеру ставить задачу модели на точном профессиональном языке без абстрактных эпитетов;
• apple-design — свод принципов интерфейсного дизайна Apple и физики движения из лекций WWDC, аккуратно перенесенный в реалии браузерного веба;
• write-swift — стандарты написания современного кода на Swift с акцентом на семантику значений, модель конкурентности Swift 6, обобщения, общую производительность и Swift Testing;
• pick-ui-library — гид по выбору проверенных готовых библиотек, удерживающий агента от изобретения собственных велосипедов и установки заброшенных зависимостей;
• prototype — генератор нескольких альтернативных вариантов одного и того же UI-компонента с возможностью быстро переключаться между ними прямо в процессе оценки;
• mobile-native — пакет обязательных технических правок, избавляющий веб-приложения на смартфонах от ощущения неуклюжего сайта: решает проблему скачущей высоты 100vh, убирает задержку тапов, блокирует паразитный зум при фокусе на полях ввода и корректно учитывает границы безопасных зон safe area;
• ask-sonner — руководство по интеграции популярной библиотеки всплывающих уведомлений Sonner, которую когда-то создал сам Ковальски.

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

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