Benji Taylor Skills — скиллы для ИИ-агентов по дизайну и анимации

benjitaylor/skills — коллекция скиллов, которыми Бенджи Тейлор пользуется вместе с ИИ-агентами в задачах дизайна и анимации. Сейчас в коллекции один скилл — Stageshow. Он учит агента собирать правдоподобные макеты интерфейса: статичные кадры, карточки возможностей, демо с курсором и бенто-сетки на React и обычном CSS. У репозитория около двух тысяч звёзд на GitHub.

Что делает Stageshow

Stageshow — это одновременно скилл и небольшой набор React-компонентов для продуктовых иллюстраций (SKILL.md, README скилла). Формулировка из документации: «Миниатюрный интерфейс продукта. Правдоподобный экран, вписанный в своё пространство: один статичный кадр или короткая анимация, в которой происходит одно событие. Зритель узнаёт экран и видит, что происходит».

Главный принцип скилла: экран читается как настоящий продукт, упрощён до того, что нужно зрителю, скомпонован с умыслом, и у каждого движения есть причина.

Важно понимать: это авторские иллюстрации, а не автоматизация браузера. Вызов a.click() рисует курсор, который нажимает кнопку, а a.set() переключает сцену. Никакие реальные элементы управления приложением при этом не кликаются.

Пять типовых провалов

Скилл описывает пять способов испортить такую иллюстрацию:

• Слишком много. Настоящий текст в каждой строке, цифры повсюду, всё забито под завязку. Чем больше деталей, тем заметнее, что картинка сгенерирована.
• Каркас. Два серых пятна и кнопка. Слишком мелко или выброшено то, что делало экран узнаваемым.
• Коробка. Целое окно, сжатое в карточку с ровными отступами со всех сторон. Это скриншот, вставленный в страницу, а не продуктовый кадр.
• Плоскость. Все объекты одного веса в одинаковых рамках. Глазу не за что зацепиться.
• Бледность. Серое окно с курсором, хотя бриф просил конкретный стиль. Стиль из брифа — чертёж, стекло поверх цвета, Dynamic Island, маскот — и есть суть задания.

Рецепт поправки: полный структурированный экран в спокойных серых тонах. Настоящие слова — только там, где разворачивается история, для остального — строки-заглушки. Воздух и кадрирование, ведущее взгляд к главному. Упрощать слова, а не контекст.

Рабочий процесс из семи шагов

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

1. Носитель и место. Статичный кадр или анимация. Размер сцены под реальное место на странице: около 720×340 для hero-блока рядом с текстом, 900–1100 пикселей для полноширинного, 400×300 для карточки. Для каждой демки, которая может встать в телефонную колонку, нужна compact-версия шириной 358 пикселей — не сжатая, а перерисованная.
2. Внешний вид. Токены продукта — цвета, шрифты, радиусы — переносятся в набор компонентов. Если кода продукта нет, берутся тема (светлая, тёмная, чертёж, стекло), палитра и уровень детализации: minimal — только полоски, standard — слова там, где они несут смысл, realistic — настоящий контент везде.
3. История. Три–пять шагов и финальный акцент, 10–16 секунд. Не должно быть движения курсора, которое нельзя объяснить.
4. Старт от эталона. Найти ближайший «золотой» пример, снять его скриптом film.mjs и скопировать его папку как отправную точку. Копия, в которой поменяли только название, не считается готовой.
5. Экран. Бюджет на слова: обычно 3–7 настоящих строк. Построение на компонентах Bar, Text и Row; то, чего касается курсор, помечается data-target и data-cursor.
6. Хореография. Анимация через Act API: появившиеся объекты остаются в DOM, чтобы анимировались и исчезновения. Анимируется связь, а не только объект: новая строка списка уносит вниз остальные строки.
7. Репетиция. Сначала задаётся кадр-постер — тот, который видят чаще всего: в превью, при отключённой анимации, на скриншоте. Затем демо снимается целиком скриптом film.mjs с флагом --gate: он выдаёт контактный лист (сетку кадров) и вердикт. Сдавать работу можно только после строки «репетиция пройдена», а завершается проход свежим взглядом со стороны и файлом REHEARSAL.md рядом с компонентом.

Набор компонентов

Папка kit/ копируется в проект и импортируется из kit/index.ts. Нужен React 18+, сторонних анимационных библиотек нет — каждый компонент приносит свой CSS. Задача набора — взять на себя то, что руками получается плохо:

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

Эталонные примеры

В папке examples сорок с лишним «золотых» примеров — это планка качества, а не справочник. Несколько строк из таблицы в документации:

Рядом идут продуктовые этюды — Figma, Linear, Slack, Raycast, Finder, Spotify, Notion, Gmail, Telegram, iMessage. Правило то же: заимствовать взаимодействие, а не чужую продуктовую идентичность. Отдельная папка teaching/ хранит пары «плохой пример — исправленный» для диагностики проблем.

Локальная витрина запускается через npm install и npm run dev (нужен Node 20.19+). В ней можно ставить демо на паузу, замедлять и проматывать по кадрам, переключать ширину телефона и режим Reduced motion.

Установка

npx skills add benjitaylor/skills --skill stageshow

Для съёмки и самопроверки нужны playwright-core и локально установленный Chrome. Каждый скилл в репозитории несёт собственную лицензию и уведомления о сторонних материалах.

Область применения — всё, где нужен кадр интерфейса, похожий на настоящий продукт: лендинги, карточки возможностей на страницах фич, документация, маркетинговые материалы. Правила самопроверки описаны в references/rehearse.md: как снимать, какие строки вердикта никогда не бывают намеренными и почему безупречный отчёт автоматики не заменяет просмотр своими глазами.