Как собрать демо-ролик продукта из реальных скриншотов с помощью Opus 5.5

Opus 5.5 может помочь превратить бриф продукта в редактируемый видеопроект. В этом руководстве модель пишет код на React/Remotion, интерфейс берётся из реальных снимков сайта, а MP4 экспортирует Remotion. Вы соберёте 30-секундный обзор из пяти сцен, замените в нём скриншоты и проверите, правдиво ли итоговое видео по-прежнему рассказывает о продукте.

Материал рассчитан на тех, кто ведёт продукт или маркетинг, на основателей и авторов контента, которые умеют запускать локальный проект, но не хотят анимировать каждый элемент вручную. Это обзор на основе скриншотов, а не запись того, как пользователь выполняет запрос к API. Общий процесс и альтернативные промпты описаны в нашем руководстве по созданию видео с Opus 5.5 — начните с него.

Посмотрите результат и скачайте рабочие файлы

Реальный локальный рендер: 1280 × 720, 30 fps, 900 кадров. Эта версия намеренно сделана без звука. Интерфейс на английском языке, снимки сделаны 30 сентября 2026 года.

Скачайте полный проект, MP4 или исходный бриф для модели. В этом же проекте есть композиция с озвучкой и вертикальная композиция — для каждой из них ниже есть ссылка на отдельное руководство.

Что проверялось: мы вызвали claude-opus-5-5 через уже открытую сессию официального Claude Code от Anthropic, сохранили сгенерированный исходный код и отрендерили его локально. Модель получила имена файлов скриншотов, их размеры и текстовое описание; пиксели изображений в этом вызове она не анализировала. После этого мы изучили реальные изображения и отредактировали код, в том числе кадрирование для вертикальной версии и обработку субтитров. Это один воспроизводимый проект, а не бенчмарк модели и не заявление о коммерческом качестве с одного промпта.

В архиве есть src/index.tsx, lock-файл пакетов, исходные снимки, эталонная озвучка, английский SRT, бриф и инструкции по воспроизведению. Учётных данных и node_modules в нём нет.

Решите, что могут показать скриншоты

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

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

Ведите небольшой манифест материалов: имя файла, исходный URL, время снимка, размеры и утверждение, которое снимок должен подкреплять. Просмотрите каждое изображение в полном размере. Исключите балансы, персональные идентификаторы, личную переписку и настоящие ключи API. Если интерфейс на другом языке, сделайте снимок с реальной языковой настройкой или поясните в статье, что интерфейс английский; не подменяйте текст, имитируя локализацию.

Наши три оригинала имеют размер 1280 × 720. На снимке каталога показаны только верхние 320 пикселей исходника, потому что ниже расположены меняющиеся цены. Такое кадрирование — редакторское решение, а не проверка актуальных цен. Датированный снимок никогда не следует использовать как бессрочное обещание цены.

Составьте раскадровку до того, как просить анимацию

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

При 30 fps склейки приходятся на кадры 0, 120, 330, 540 и 750, а композиция заканчивается на кадре 900. Это практичный способ держать три варианта вывода на одной временной шкале. Кроме того, запрос на правку становится конкретным: «подержать сцену документации дольше» означает сдвинуть известные границы, а не заново генерировать целое видео без чётких рамок.

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

Сначала запустите готовый проект

Понадобится компьютер с Node.js и npm. В архиве зафиксированы React 19.1.0 и пакеты Remotion версии 4.0.424, чтобы пример не зависел от того, какой релиз окажется новейшим к моменту чтения. Для своей среды и использования в организации смотрите настройку Remotion для агентов программирования и сведения о лицензировании.

Установите Node.js и npm перед запуском проекта. Для необязательных проверок медиафайлов в терминале, описанных ниже, также нужна отдельная установка FFmpeg, включая ffprobe; npm ci эту консольную команду не устанавливает. Рендерить можно через готовые скрипты npm, не используя необязательные команды проверки.

Распакуйте проект, откройте терминал в его корневой папке и выполните:

npm ci
npm start

Откройте локальный URL, который выведет терминал. Выберите DemoLandscape в списке композиций. Перемотайте на 5-ю секунду: должен быть виден кадрированный каталог, а не пустой прямоугольник. Перемотайте на 13-ю секунду: должен быть виден снимок документации. Если эти проверки не проходят, исправьте пути, прежде чем менять дизайн.

Реальный снимок локального Remotion Studio. Это превью редактируемого проекта; скачиваемый MP4 выше — экспортированный результат.

У основных файлов разные задачи:

Для npm ci нужен доступ к сети, чтобы скачать недостающие зависимости. При первом рендере Remotion также может скачать headless-браузер. Это не связано с доступом к модели: рендер кода, который уже лежит в архиве, повторно Opus не вызывает.

Дайте Opus бриф, который можно реализовать

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

Создай редактируемый обзор продукта в существующем проекте Remotion.
Сохрани установленные версии пакетов. Перед правками изучи текущий исходный код.

Аудитория: [кто смотрит]
Следующее действие: [одна конкретная точка назначения]
Композиция: DemoLandscape, 1280x720, 30 fps, 900 кадров.
Материалы: [имя файла, размеры, исходный URL и что доказывает каждое изображение].
Используй реальные изображения через Img/staticFile; не перерисовывай интерфейс.

Временная шкала:
0-4 с: [вступительное утверждение]
4-11 с: [материал 1 и проверяемое сообщение]
11-18 с: [материал 2 и проверяемое сообщение]
18-25 с: [материал 3 и проверяемое сообщение]
25-30 с: [финал и точка назначения]

Сохраняй пропорции скриншотов. Указывай каждое кадрирование в пикселях исходника.
Не показывай личные данные и не превращай старые цены в текущие обещания.
Управляй движением через useCurrentFrame/interpolate/spring, а не через CSS-анимации.
Никаких поддельных действий курсора, выдуманных результатов, новых пакетов или сетевых запросов.
Верни изменённые файлы и объясни, как их просмотреть и отрендерить.

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

Сохраните читаемость реального интерфейса

В горизонтальной версии область просмотра каталога имеет ширину 1120 пикселей. Поэтому фрагмент исходника 1280 × 320 превращается в 1120 × 280: по обеим осям используется один коэффициент масштаба — 0,875. Полный снимок документации 1280 × 720 превращается в 1120 × 630. Его заголовок и подпись занимают отдельную полосу под изображением и не перекрывают страницу.

Эта арифметика важна. Если растянуть скриншот на произвольный блок, элементы интерфейса могут исказиться, нужная подпись — обрезаться, а неактивный элемент — стать похожим на что-то другое. В готовом компоненте Shot пропорции изображения сохраняются, а видимую область задаёт контейнер с обрезкой переполнения. Исходный PNG остаётся нетронутым.

Используйте умеренное движение. В примере масштаб камеры меняется от 0,985 до 1; сильное приближение размыло бы мелкий текст интерфейса. Прямоугольники во вступлении — очевидная редакционная графика, а виды продукта — реальные снимки. Сохраняйте это разделение при адаптации: оформление может пояснять историю, но не должно подделывать доказательства внутри экрана продукта.

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

Правьте сцену, не теряя рабочую версию

Сохраняйте рабочий проект перед каждой существенной правкой. Просите одно изменение с условием приёмки, например:

Измени только сцену каталога. Сохрани её интервал 4-11 секунд и
кадрирование исходника y=0..320. Увеличь отступ между заголовком и изображением на 12 пикселей.
Не меняй скриншот, последующие сцены, размер композиции и зависимости.
На кадре 150 заголовок, фрагмент целиком и подпись снимка не должны перекрываться.

Изучите diff и отрендерьте затронутый участок, прежде чем экспортировать все 900 кадров. Если запрос меняет длительность сцены, проверьте вместе SCENES, общую длительность, озвучку и субтитры. Удлинённая визуальная сцена при неизменной звуковой дорожке — это изменение тайминга, а не просто дизайна.

В нашей реальной правке для вертикальных сцен документации и API понадобилось более плотное кадрирование исходников. Мы также убрали ограничение числа строк (line-clamping), которое после очередной правки могло незаметно скрыть часть текста субтитров. Эти исправления включены в итоговый исходный код для скачивания; примечание о происхождении отделяет вывод модели от редакторских изменений.

Экспортируйте и проверьте MP4

Из корня проекта:

npm run render:landscape
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/landscape.mp4

Ожидаемое видео: H.264, 1280 × 720, 30 fps и 900 кадров, временная шкала 30 секунд. Эта композиция беззвучна намеренно. Не считайте это ошибкой пропавшего звука; для звука используйте DemoNarrated по руководству по озвучке и субтитрам.

Проверяйте не только то, что файл существует. Воспроизведите MP4 от начала до конца, остановитесь на каждой сцене и сравните скриншоты с исходниками. Убедитесь, что точка назначения читается, личные данные не видны и нет случайных пустых пауз. Метаданные подтверждают размеры и длительность, но не полезность и точность сообщения.

Используйте готовое видео в работе

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

Страница модели Opus 5.5 — соответствующая карточка модели в Ofox; зафиксированный в этом руководстве вызов для генерации кода шёл через официальный Claude Code, а не через API Ofox. Карточка модели и документация Ofox — полезные следующие шаги, но это не утверждение, что рендер Remotion выполняет Ofox.

Далее — добавление озвучки и субтитров или перестройка компоновки для вертикального видео. Основное руководство по видео связывает весь процесс воедино.