🎯 О чём этот конспект: Полное руководство по генерации профессиональных моушн-графических и синематик-видео для запуска IT-продуктов с помощью Claude и нейросетей генерации видео/изображений. Разбираются два уровня: создание чистого моушн-ролика на коде с интерактивным редактированием через скилл Motion OS и сложный синематик-ролик с ИИ-актером и наложением графических элементов.

👤 Кому будет полезно: Вайбкодерам, инди-хакерам, фаундерам стартапов и продакт-маркетологам, которым нужны видеоролики уровня Stripe, Ramp, Anthropic или OpenAI без найма моушн-дизайнеров и видеопродакшена.

✨ Что получите: Готовый пошаговый процесс: от поиска референсов и генерации анимаций на коде до сборки многослойного синематик-видео через Hicksfield MCP, работу с Character Sheet и экономию бюджета при генерации кадров.

1. Поиск референсов и покадровый анализ чужих видео через Claude

Контекст: Создавать моушн-дизайн с нуля через текстовые промпты неэффективно: модели сложно объяснить ритм, тайминги и композицию абстрактными словами. Лучший подход — дать AI готовую успешную структуру (видео других брендов) и ссылку на ваш продукт. Для поиска референсов используется специализированная база ланч-видео, а Claude выполняет покадровый разбор сцен, элементов интерфейса и анимационных переходов. Это исключает галлюцинации и задает строгий визуальный фреймворк.

Тайминг: ▶ 01:18, ▶ 01:44, ▶ 02:24

Выгода: Экономия десятков часов на раскадровке и написании сценария; получение проверенной структуры продающего видео без привлечения моушн-директора.

Как применить:

• Шаг 1: Поиск референса — WatchShips — Перейдите на агрегатор продуктовых видео watchships.com, отфильтруйте базу по категориям (Motion, SaaS, Productivity) и выберите видео с подходящей динамикой и композицией (например, ролики Stripe, Ramp, Cursor или Ren).
• Шаг 2: Анализ ролика моделью — Claude] — Откройте новую сессию в Claude и скормите URL референсного видео с промптом для покадровой деконструкции.

In this link there's a product launch video for this app [Вставить ссылку на видео-референс]. Can you watch this video frame by frame and let me know if you're able to understand the video? I want to recreate this for my own app.

• Шаг 3: Верификация структуры — Claude] — Убедитесь, что модель разбила видео на логические сцены, зафиксировала появление UI-элементов, всплывающих нотификаций, плашек чата и текстовых слоев.

Результат: Детальная текстовая раскадровка видео-референса с таймингами сцен, готовая к адаптации под ваш интерфейс.

2. Кодогенерация моушн-графики под брендбук и UI вашего продукта

Контекст: Вся моушн-графика внутри Claude создается не в виде пиксельного видео через диффузионные сетки, а в виде программного кода (Remotion/HTML/Canvas/CSS). Это гарантирует четкость шрифтов, идеальную плавность анимаций (60 FPS) и мгновенную модификацию любых параметров. Claude считывает дизайн-систему вашего приложения (цвета, иконки, скругления, шрифты) и генерирует аналогичные сцены, заменяя контент референса на функционал вашего продукта.

Тайминг: ▶ 02:34, ▶ 03:14, ▶ 03:60

Выгода: Абсолютный контроль над текстами, цветами и таймингами без перерендера «тяжелых» видеомоделей; 100% точность отображения интерфейса продукта.

Как применить:

• Шаг 1: Передача контекста продукта — Claude] — Отправьте ссылку на ваш лендинг, веб-приложение или скриншоты UI, чтобы модель считала фирменные цвета, типографику и логику работы фичи.

Here is my app called [Название приложения]: [Ссылка на приложение или описание UI]. 
I want to create a product launch video just like [Название бренда референса]'s, but adapted for my app and focusing on the [Название фичи/бота] feature. 
If you are missing any UI elements from my app design, you can simply create your own to complete the video.

• Шаг 2: Итеративная доработка ассетов — Claude] — Если в коде сгенерированы пустые плейсхолдеры (например, аватары пользователей или специфические логотипы), попросите сгенерировать под них заглушки через встроенные инструменты или внешние API.

Can you use Hicksfield to generate images for the profile photos and also for the outro? I want it to say [Название фичи] first with its logo and then it flips to [Название продукта].

Результат: Интерактивный программный моушн-ролик, адаптированный под цветовую палитру и функции вашего SaaS.

3. Интерактивная правка таймлайна с помощью скилла Motion OS

Контекст: Описывать визуальные правки текстом («сдвинь плашку на 20 пикселей влево на 4-й секунде») долго и неэффективно. Для этого используется специализированный Claude-скилл Motion OS — легковесный браузерный видеоредактор (в стиле CapCut/Premiere Pro), который рендерит сгенерированный код, отображает сцены на таймлайне и позволяет кликать по объектам, менять размеры, текст и свойства. После правок редактор генерирует единый структурированный промпт со всеми изменениями и таймкодами для отправки обратно в Claude.

Тайминг: ▶ 04:36, ▶ 05:04, ▶ 05:26

Выгода: Исключает ручную разметку скриншотов; сокращает цикл внесения правок с 15 минут до 30 секунд.

Как применить:

• Шаг 1: Подключение скилла — Claude Skills] — Передайте URL манифеста Motion OS в Claude и попросите активировать скилл в проекте.
• Шаг 2: Рендеринг в плеере Motion OS — Claude] — При запросе на генерацию анимации укажите плеер как цель вывода:

Please render the motion graphics video using the Motion OS player interface.

• Шаг 3: Визуальное редактирование — Motion OS Editor] — Перейдите в таймлайн плеера, кликните по нужной сцене:
  1. Выберите текстовый элемент или плашку.
  2. Измените атрибуты в правой панели (размер, положение, статус плашки, текст).
  3. Нажмите кнопку «Send to Claude».
• Шаг 4: Применение пачки изменений — Claude] — Скопируйте сформированный редактором промпт (содержащий точные timestamp и идентификаторы слоев) и отправьте в чат.

Результат: Точечно скорректированное видео без словесных недопониманий и смещения таймингов.

4. Наложение саунд-дизайна (SFX) и подгонка фоновой музыки под анимации

Контекст: Моушн-графика без звука выглядит безжизненно. LLM пока не способны самостоятельно отбирать идеальные музыкальные треки, но отлично справляются с программной расстановкой звуковых эффектов (SFX всплытия сообщений, кликов, колокольчиков) и сведением аудиодорожки. Музыка подбирается вручную на стоках, а модель программно подгоняет fade-in/fade-out и ритмические акценты под смену сцен.

Тайминг: ▶ 03:53, ▶ 05:51, ▶ 06:38

Выгода: Увеличение вовлечения зрителей за счет динамичного аудиосопровождения без ручного монтажа в DAW.

Как применить:

• Шаг 1: Добавление контекстных звуковых эффектов (SFX) — Claude] — Попросите модель встроить звуковые триггеры при появлении ключевых моушн-элементов.

Can you add sound effects so that when the chat bubbles and notification badges appear, we have appropriate popping and notification sounds?

• Шаг 2: Интеграция фонового трека — Epidemic Sound / Stock + Claude] — Скачайте подходящий royalty-free трек, загрузите файл в директорию проекта и скомандуйте Claude выполнить сведение.

Can you add background music [Имя файла] to this video? Make sure that it fades in and out smoothly, and arrange its volume and drops so that it plays with our animations and transitions nicely.

Результат: Полноценный моушн-ролик с синхронизированными SFX и плавно затухающей фоновой музыкой.

5. Синематик Launch Video: 4-этапный пайплайн сборки реалистичного видео

Контекст: Попытка сгенерировать сложное синематик-видео (человек в офисе + моушн-графика) одним большим промптом («One-shot») гарантированно выдает некачественный результат с плывущими лицами и неестественными цветами («AI slop»). Чтобы получить ролик уровня Anthropic/OpenAI, применяется строгий 4-этапный пайплайн с фиксацией персонажа через Character Sheet и послойным контролем окружения.

Тайминг: ▶ 07:54, ▶ 08:26, ▶ 09:43, ▶ 10:11

[ЭТАП 1: Character Sheet + Локация] 
                ↓
[ЭТАП 2: Помещение актера в интерьер]
                ↓
[ЭТАП 3: Раскадровка всех ракурсов (Stills)]
                ↓
[ЭТАП 4: Анимация кадров в видео]

Выгода: 100% консистентность внешности персонажа и геометрии офиса между всеми сценами ролика.

Как применить:

• Шаг 1: Создание Character Sheet — SeaDream Pro 5 / Hicksfield MCP] — Найдите референс внешности на Pinterest. Попросите Claude составить детальный промпт для съемки актера с разных ракурсов и выполните генерацию через MCP.

Create a character sheet portrait of this actor from various angles (front, 3/4 view, profile) with consistent studio lighting, neutral background, photorealistic 35mm lens shot. Use SeaDream Pro 5 via Hicksfield MCP.

• Шаг 2: Генерация окружения (Офис) — Soul Cinema / Hicksfield] — Сгенерируйте интерьер офиса в нужной стилистике без людей.

Modern minimal tech office interior, warm ambient lighting, top-down and wide angles, cinematic aesthetic, high resolution architectural photography.

• Шаг 3: Совмещение актера и локации — Hicksfield MCP] — Объедините кадры актера и офиса в единую композицию:

Place the character from the character sheet into the generated office environment, matching the lighting and color grading perfectly.

• Шаг 4: Генерация статичных сцен (Stills) — Claude + Hicksfield] — Сгенерируйте все ключевые ракурсы (вид сверху вниз, крупный план, взгляд в экран), опираясь на раскадровку референса. Переходите к видео только после утверждения всех картинок.

Результат: Набор консистентных статичных кадров сцен высокого качества с одним и тем же актером.

6. Анимация через Kling/Cash 2.5, оптимизация затрат и наложение слоев

Контекст: Анимация картинок через топовые видеомодели (Kling / Cash 2.5) потребляет много кредитов. Чтобы не сжигать бюджет на неудачных генерациях, пайплайн разделяется на черновые прогоны в низком разрешении (480p) и финальный апскейл. Готовые анимированные синематик-сцены служат фоновым слоем (Layer 1), поверх которого накладывается сгенерированная в Части 1 моушн-графика (Layer 2).

Тайминг: ▶ 10:58, ▶ 11:24, ▶ 11:66, ▶ 12:54

Выгода: Экономия до 70% бюджета на API-генерациях видео; гибридный результат кинематографичной картинки и четкой UI-графики.

Как применить:

• Шаг 1: Черновая анимация ракурсов — Cash 2.5 / Kling 2.5 via Hicksfield] — Запустите анимацию статичных кадров в разрешении 480p (draft mode).

Animate this scene: The actor walks into the frame from the top-down perspective, sits at the desk, natural motion, smooth camera pan. Generate in 480p draft resolution first.

• Шаг 2: Финальный рендер — Hicksfield API] — После проверки физики движений и отсутствия артефактов запустите генерацию подтвержденных шотов в 1080p.
• Шаг 3: Композитинг моушн-слоя — Claude / Motion OS] — Наложите моушн-элементы (всплывающие плашки сообщений, UI-диалоги, бейджи статусов счетов) поверх видеоряда в соответствии с дикторским текстом:

Layer the Qbot chat bubble motion graphics directly over the animated cinematic video background. Sync the appearance of the 'Paid' status badge with the voiceover line: 'and the second they pay, you'll know'.

Результат: Готовый Product Launch ролик студийного уровня, сочетающий реального ИИ-актера, брендовый интерьер и анимированный UI.

FAQ

В: Почему нельзя сразу сгенерировать видео через Sora, Kling или Runway по одному промпту? О: One-shot генерация сложных продуктовых роликов приводит к галлюцинациям: плывут логотипы, текст в UI становится нечитаемым, а лицо персонажа меняется от сцены к сцене. Двухслойный подход (чистый код для UI + пошаговая генерация сцен для видеоряда) обеспечивает максимальный контроль качества.

В: Что такое Motion OS и как его установить? О: Motion OS — это инструмент/скилл для Claude, представляющий собой таймлайн-редактор кода анимаций. Вы передаете Claude ссылку на манифест скилла, после чего видео отображается в интерактивном плеере с возможностью визуальной правки элементов.

В: Какую модель генерации изображений выгоднее использовать для локаций и людей? О: Для фотореалистичных портретов людей без референса лучше использовать Hicksfield Soul 2.0 (доступны бесплатные генерации на платформе), для работы по референсному фото — SeaDream Pro 5, а для архитектуры и офисных пространств — Soul Cinema.

В: Зачем рендерить черновики видео в 480p? О: Видеомодели (Cash 2.5, Kling) тратят значительное количество кредитов на каждый прогон. Рендеринг в 480p позволяет дешево отбраковать неудачные движения и физику, а финальный рендер в 1080p запускать только для утвержденных дублей.

В: Как синхронизировать появление графики с голосом диктора? О: В коде моушн-графики (Motion OS / Remotion) каждый элемент привязан к конкретному фрейму или секунде. Вы задаете таймкоды появления плашек в промпте Claude под длительность аудиодорожки диктора (Voiceover).

Ресурсы и ссылки

• WatchShips — База данных и поисковик продуктовых launch-видео брендов для поиска референсов — https://watchships.com
• Motion OS — Интерактивный плеер и визуальный редактор моушн-графики для Claude — упомянут в видео
• Hicksfield AI & MCP — Платформа и API для генерации изображений и видео (модели Soul 2.0, SeaDream Pro 5, Soul Cinema, Cash 2.5) — https://hicksfield.ai
• Epidemic Sound — Библиотека royalty-free музыки и звуковых эффектов для продакшена — https://epidemicsound.com

Конспект создан на основе видео «Opus 5.5 is here. Create MIND-BLOWING Motion Graphics» канала AI Jason. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=J4oygRI6mN0