На картеЭмиль Ковальски пополнил свой набор скиллов двумя полезными инструментами. Один помогает довести веб-приложение до удобного состояния на телефоне. Второй проверяет, что произойдёт с интерфейсом, когда вместо аккуратных демонстрационных данных в него попадут длинные фамилии, пустые списки и неожиданные значения.
Хороший повод посмотреть на весь набор Skills for Designers and Engineers. Сейчас в нём 14 скиллов, а у репозитория около 43 тысяч звёзд на GitHub.
Эмиль — инженер интерфейсов из веб-команды Linear, раньше работал в Vercel. Он создал Sonner, библиотеку всплывающих уведомлений для React, и Vaul, компонент выдвижных панелей. Его специализация — детали, из которых складывается ощущение качественного приложения: как открывается окно, реагирует кнопка, ведёт себя панель под пальцем. Сайт автора.
В скиллах этот опыт оформлен как инструкции для ИИ-агента. Они задают критерии выбора и проверки: где нужна анимация, какой должна быть её скорость, что проверить на мобильном экране. Особенно пригодятся тем, кто уже собирает сайты и приложения с ИИ, но регулярно упирается в задачу «работает, теперь бы сделать удобно».
Два новых скилла для реальных пользователей
mobile-native — чтобы веб-приложением было приятно пользоваться на телефоне.
На компьютере всё может выглядеть хорошо, а на телефоне кнопка после касания остаётся в состоянии наведения. При вводе текста страница неожиданно увеличивается. Нижняя панель мешает системному жесту, а открывшаяся клавиатура ломает экран.
Скилл разбирает такие проблемы и подбирает адресные исправления. В его правилах есть важные ограничения: сохранять возможность масштабировать страницу и проверять результат на настоящем телефоне. Одного уменьшенного окна браузера для этого недостаточно.
Полезная задача для него: проверить мобильную форму регистрации, личный кабинет или приложение, которое пользователь открывает с домашнего экрана. Он работает с веб-интерфейсом; для React Native в наборе есть отдельный скилл. Описание mobile-native.
break-ui — чтобы найти поломки до того, как их найдут пользователи.
На демонстрации в карточке написано «Анна», у неё есть фотография, а в списке десять записей. В жизни фамилия может занять три строки, фотография не загрузится, а записей окажется тысяча.
Скилл подставляет правдоподобные сложные данные и позволяет переключаться между обычным и проблемным состояниями. Проверяет, не исчезли ли кнопки за краем экрана, не сжался ли аватар, читается ли длинный адрес, что происходит с пустым списком.
По умолчанию он сначала показывает найденные проблемы и предлагает исправления. Применяет их по запросу: например, переносить текст или сокращать его — это решение, которое зависит от задачи интерфейса. Переключатель тестовых данных предназначен только для разработки. Описание break-ui.
Что ещё есть в наборе
Остальные скиллы удобно выбирать по текущей задаче:
| Задача | Скиллы |
| Доработать детали интерфейса | emil-design-eng — основной скилл; apple-design — принципы интерфейсов и движения Apple, адаптированные для веба |
| Создать анимацию | animate — для веба; animate-expo — для React Native и Expo |
| Проверить существующее движение | review-animations — разбор анимаций; improve-animations — аудит проекта с приоритетами и планами исправлений |
| Решить, что стоит анимировать | find-animation-opportunities — ищет полезные места для движения и объясняет, где оно лишнее |
| Точнее объяснить желаемый эффект | animation-vocabulary — помогает найти название анимационного приёма |
| Сравнить варианты компонента | prototype — создаёт разные версии с переключателем |
| Выбрать готовые компоненты | pick-ui-library — подбирает библиотеку из рекомендаций автора |
| Настроить уведомления Sonner | ask-sonner — установка, оформление и типовые проблемы |
| Писать на Swift | write-swift — рекомендации по современному Swift |
Полные инструкции открыты в репозитории автора.
С чего начать
Команда установки из репозитория:
npx skills@latest add emilkowalski/skillsДля запуска нужны Node.js и npm. В установщике выберите нужные скиллы и своего ИИ-агента.
Для первого знакомства удобно взять один уже работающий экран. Например, список клиентов, карточку товара или форму заявки. На нём легко сравнить результат до и после.
Промпт:
Используй скилл break-ui для этого экрана.
Проверь его с длинными русскими именами, длинными email,
отсутствующей фотографией, пустым списком и большим
количеством записей. Учитывай ограничения данных в проекте.
Покажи обычные и сложные данные с переключателем,
доступным только при разработке. Проверь узкий экран
и увеличение масштаба до 200%.
Сначала покажи найденные проблемы и предложи исправления.
Отдельно отметь, что проверено в браузере,
а что пока является предположением по коду.Затем можно подключить mobile-native и проверить тот же экран на телефоне. Если раздражает движение — обратиться к review-animations. Если нужно сравнить несколько решений — к prototype.
Ценность набора в конкретности требований. Вместо бесконечного «сделай красивее» у агента появляются проверяемые задачи: сохранить доступность кнопки при длинном имени, правильно обработать пустое состояние, убрать залипание после касания. На таких деталях и становится заметно качество интерфейса.
Следующий шаг
Как на самом деле проектировать дизайн с ИИ
Если вы собираете сайт или приложение с ИИ, можно обсудить, какие скиллы помогут доработать интерфейс и как проверить результат на вашем проекте.
Если захотите обсудить, как это применить у себя или в команде — пишите в Telegram @pimenov
