💜 Метод создания интерфейсных роликов В последнее время много создаю интерфейсных видео через Codex. Для себя выделил два способа: через After Effects с MCP и через браузер. 🐸 И собирать такое в Афтере всегда было гемором. По факту ты воспроизводишь поведение рабочего интерфейса средствами анимации. Поэтому у меня там установлены десятки плагинов, чтобы делать это быстрее. 📱 Работа в After Effects Таким же способом я собирал ролик для Music to Video: подготовил интерфейс в Figma, экспортировал в Афтер и сделал раскадровку. Дальше по ней уже работал Codex, который я подключил через MCP. ➖Минусы: ▪️Долгая подготовка. Приходится воспроизводить поведение интерфейса и делать раскадровку. ▪️Куча исходников, которые мигрируют из Фигмы в Афтер. Постоянно нужно искать нужный файл, элемент или переход. ▪️Из-за большого количества анимаций и файлов агент делает много ошибок и долго работает. ➕Плюсы: ▪️Все возможности After Effects. Всё гибко настраивается, есть много эффектов, настроек и плагинов. 🖥 Работа в браузере Второй ролик, для Motion Lab, я создавал в браузере. Идея была в том, чтобы собрать для себя подобие моушн-программы: перенести рабочий интерфейс с сайта и подготовить скринкасты и переходы. Скринкастом записывать взаимодействие с реальным интерфейсом, а переходы между этими фрагментами делать анимацией через код. 👨💻И тут я очень кайфанул от процесса. Главное заранее продумать, где будет анимация, а где запись скринкаста. Кодекс подготавливает сцены и создаёт анимации для переходов. Дальше подключаюсь я: рендерю анимационные фрагменты и записываю скринкасты. Минусы: ▪️Пока могу назвать только более скромные визуальные возможности по сравнению с Афтером. Такого количества готовых эффектов, настроек и плагинов здесь нет. Плюсы: ▪️Кодекс быстро переносит работающие интерфейсы. Я менял визуальный стиль экранов, логику и поведение объектов, он со всем справлялся. ▪️Из анимации агент содает только переходы. Соответственно, меньше риск, что Кодекс затупит и что-то не сделает. ▪️Быстрая подготовка. Нужно собрать простую раскадровку экранов. Элементы и их поведение Кодекс переносит из рабочего интерфейса. Я ещё закидывал ему свои курсоры, и они отображались и в анимациях, и при записи скринкастов. ▪️Настройки рендера под задачу. Можно выбирать нужное разрешение и качество. Я ещё подключил рендер на своей видеокарте, чтобы ускорить процесс. 🙏 В общем, если Codex или Claude криво анимирует взаимодействие с интерфейсом, попробуйте записать этот фрагмент сами скринкастом. Если для вашей задачи такой способ подходит. ⁉️ Мне не очень хочется мучиться с подбором промпта, потом ждать, пока агент подумает, загрузит, подвигает элементы и снова сделает криво. По всей своей работе я собрал подробный конспект с промптом и примерами, залетайте сюда ▶️▶️▶️ Инструкция. Метод создания интерфейсный роликов #гайд @webdesignlab