Дизайн-хед X открыл скилл stageshow: агент рисует и анимирует демо интерфейсов

Если вы просили агента нарисовать интерфейс, то знаете эффект: всё на месте, кнопки работают, а смотреть больно. Нет чувства стиля, нет иерархии, нет того, что дизайнеры называют вкусом. Бенджи Тейлор, руководитель дизайна в X и SpaceXAI, попытался передать этот вкус агенту в виде инструкции. Получился скилл stageshow, и он уже в открытом доступе.

Что это такое и зачем

Stageshow учит агента делать faux UI, то есть «ненастоящие» интерфейсы. Это красивые демо продукта для лендингов, промо-роликов и инфографики. Настоящее приложение для этого не нужно: агент рисует экран сам и сам его анимирует. Примеры из поста, по словам автора, сделаны без записи экрана. Всё это нарисовал и оживил агент.

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

Как это устроено внутри

Главная ценность скилла в процессе, а не в красивых картинках. Агента ведут по семи шагам.

1. Выбрать формат: статика или анимация, цикл или один проход, размер.
2. Выбрать вид: светлый, тёмный, blueprint или glass, а также настоящий chrome и иконки продукта.
3. Придумать сюжет на 3–5 сцен.
4. Взять ближайший эталонный пример и адаптировать его.
5. Собрать экран: несколько настоящих строк, остальное заглушки.
6. Поставить анимацию так, чтобы сцены перекрывались, а цикл шёл без шва.
7. Записать демо скриптом, посмотреть каждый кадр, проверить на ширине телефона и поправить ошибки.

Здесь несколько здравых инженерных решений. Агент не рисует с нуля, а отталкивается от эталона, и это защищает от случайного дизайна. Правило «несколько настоящих строк, остальное заглушки» не даёт перегрузить экран деталями. А последний шаг даёт обратную связь: агент сам смотрит результат покадрово и проверяет мобильную ширину, как это сделал бы внимательный человек.

Что ещё умеет

Список возможностей довольно практичный. Скилл рисует окна браузера и приложений, телефоны, поддерживает стиль macOS 26. Есть несколько видов курсора: он сам находит элементы по имени и меняет форму при наведении. Есть камера, которая приближает нужный фрагмент, а также аннотации и bento-сетки. Среди примеров стили Linear, Slack, Figma, Notion и других продуктов.

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

Как попробовать

Установка делается одной командой:

npx skills add benjitaylor/skills --skill stageshow

Автор поста из канала Tips AI рассказывает, что использует скилл для инфографики к SEO-статьям о функциях своего приложения. Это хороший пример прикладного сценария: контент нужен регулярно, а визуал обычно становится узким местом.

Ограничения и вывод

Стоит трезво смотреть на ожидания. Скилл даёт агенту дисциплину и набор эталонов, но не заменяет дизайнера. Качество результата зависит от модели, которая исполняет инструкции, и от того, насколько ваш продукт похож на примеры. Для нестандартной визуальной идентичности придётся настраивать темы и, скорее всего, дополнять эталоны своими. Кроме того, faux UI по определению не настоящий интерфейс. Для обзоров, документации и юридически значимых скриншотов нужна честная запись, а в маркетинге стоит помнить, что пользователь увидит не то же самое, что на картинке.

Практический вывод простой. Если вы делаете лендинги, промо или контент про фичи продукта, установите скилл и прогоните на одной задаче. Ещё полезнее изучить его структуру: формат, вид, сюжет, эталон, сборка, анимация, проверка. Такой рецепт «вкуса в виде процесса» можно перенести и на другие задачи, где агенту не хватает чувства стиля.