Claude Code: как заставить кодинг-агента делать motion-графику, а не серое видео с градиентом. Пошагово

Попросите кодинг-агента сделать анимационное видео, и чаще всего получите текст по центру, градиентный фон и всё, что плавно проявляется. Выглядит как заготовка, которую никто не доделал.

Дело не в слабой модели. Запрос даёт около 10% результата, остальные 90% это обвязка: правила, материалы бренда, образец стиля, план по ритму и проверка. С обвязкой тот же агент делает аккуратные клипы с движением интерфейса, звуком и логотипом в финале. Сейчас так делают клипы для запуска продуктов, и не в видеоредакторе, а кодом. Разбираем по шагам, как построить обвязку.

Как агент делает видео

Модель получает текст и картинки, а возвращает текст. MP4 она создать не может, поэтому пишет код, а код превращается в видео. Путей четыре:

• Рисование кодом. Графика в SVG или на холсте, кадры снимает безголовый браузер.
• Фреймворк. Remotion на React или Hyperframes на HTML.
• Смешанный конвейер. Модели изображений и видео делают материал, агент собирает его сверху.
• Монтаж готового. Агент режет ваши клипы, добавляет субтитры и перебивки.

Если фреймворк не назван, агент берёт первый путь: один HTML-файл, покадровый рендер в браузере и FFmpeg для сборки MP4.

Что понадобится

• Кодинг-агент. В примере приложение Claude на компьютере с моделью Opus 5.5.
• Пустая рабочая папка для кода, файлов стиля и готовых клипов.
• Материалы бренда: логотип, цвета, шрифты, скриншоты интерфейса.

Шаг 1. Папка, модель и тест без настроек

Создайте новую папку и выберите её рабочей. Выберите модель Opus 5.5 и высокий уровень усилия. Для проверки дайте простой запрос без правил:

Сделай 10-секундное видео с motion-графикой про прогноз погоды в приложении: встаёт солнце, наползают тучи, начинается дождь, температура снижается.

Результат вышел неплохой, как и ожидали. Тот же запрос в Codex дал менее впечатляющий клип, но Codex сам собрал его во Hyperframes, который был установлен. Claude Code по умолчанию писал код с нуля.

Шаг 2. Подключите фреймворк, если нужен

Для Hyperframes откройте раздел коннекторов, найдите его по названию, установите и войдите в аккаунт. Для Remotion установите плагин для Claude Code. Без фреймворка всё дальнейшее тоже работает.

Шаг 3. Правила Motion Studio

Главный шаг. Правила кладут в проект один раз, и агент следует им в каждом клипе. В примере четыре блока:

• Контракт рендера. Кадр это чистая функция времени: window.seek(t) рисует кадр по времени. Без CSS-переходов, setTimeout и requestAnimationFrame при рендере, без состояния между кадрами. Шум только с фиксированным зерном. Рендер node render.mjs, H.264 yuv420p, CRF 16.
• Внешний вид. Запрещены заголовок по центру на градиенте, всё плавное проявление, угловые подписи, рамки, свечение интерфейса, безликие частицы. Один шрифт для заголовков, один для интерфейса, один акцентный цвет. Каждые 2-4 секунды на экране что-то новое.
• Звук. Музыку и эффекты агент синтезирует в коде. Удары попадают в сетку из beats.json. Громкость минус 14 LUFS.
• Цикл проверки. Один кадр на удар, лист кадров, оценки от 1 до 10: заставка в первые 2 секунды, читаемость на телефоне, движение, разнообразие, точность бренда, синхронность звука. Исправить три худшие проблемы, повторять до оценок 8 и выше. Только потом полный рендер.

Вставьте правила в чат и проверьте коротким запросом:

Сделай динамичное 15-секундное видео с motion-графикой, который показывает, какой ты классный моушн-дизайнер, как шоурил для резюме. Выложись по максимуму.

«Шоурил для резюме» задаёт жанр с известными правилами. «Какой ты классный дизайнер» заставляет показывать приёмы, а не объяснять продукт. 15 секунд хватает на шесть-восемь планов. «Выложись по максимуму» усиливает уровень усилия.

Вышло много переходов, но всё в чёрно-оранжевом стиле: агент опирается на собственный бренд. Значит, нужен свой.

Шаг 4. Подставьте настоящий бренд

Тот же запрос, но про конкретный продукт. В примере это MagicPath, плагин с бесконечным холстом для Codex и Claude Code. Агент показал интерфейс в тёмной и светлой теме, перечислил возможности и закончил логотипом. Обвязка осталась, сменились анимация и оформление.

Можно попросить агента самому собрать фирменные материалы: настоящие скриншоты и логотип. Есть большой запрос-шаблон с местами для подстановки бренда: агент исследует сайт и собирает клип по найденному. В примере вышел 20-секундный клип в форматах 16:9, 1:1 и 9:16 с одной шкалы времени.

Шаг 5. Возьмите образец стиля

Если своего стиля нет, возьмите чужое видео как образец. Запрос из примера, в пересказе:

Скачай образец через yt-dlp в папку refs, вытащи по кадру каждые полсекунды через ffmpeg. Запиши в docs/style_guide.md палитру, шрифты, длину планов, переходы, движения камеры, зерно и то, как входит и выходит текст. Затем запиши в docs/shotlist.md раскадровку 15-секундного видео про наш продукт в этом стиле, с настоящими скриншотами и логотипом с сайта. Бери грамматику образца, но не его содержание, логотипы и персонажей. Покажи оба файла и дождись моего подтверждения до написания кода.

Последняя строка важна: агент останавливается, и раскадровку можно поправить до рендера.

В примере агент скачал 15-секундный образец, вытащил 30 кадров, изучил переходы и палитру, нашёл ранее сохранённые материалы бренда и записал два файла.

Шаг 6. Закрепите стиль в файлах

Чтобы клипы получались одинаковыми, стиль записывают в структурированный запрос:

• Входные данные: продукт, логотип, цвета, шрифты, скриншоты, музыка, формат.
• Направление. В примере: один контейнер никогда не режется, каждое состояние это тот же элемент, который меняет размер, скругление и заливку, а содержимое меняется за коротким размытием. Любое изменение запускает курсор. Тёплый нейтральный фон и один акцент. Запрещены прыгучие кривые, свечение, градиенты на элементах интерфейса, взрывы частиц и пустое время.
• Структура: 120 ударов в минуту, 8 тактов, на каждый удар что-то происходит. От логотипа и запроса в чате до пяти экранов на холсте, терминала Claude Code и ссылки, которую скопировали.
• Сборка: один HTML-файл, window.seek(t), рендер в безголовом Chrome на 60 кадрах в секунду с четырьмя подкадрами для размытия.
• Подводные камни: не ставить will-change на то, что масштабирует камера, иначе текст размоется. Последний кадр равен первому.
• Старт: показать список состояний на сетке ритма до написания кода. Если что-то не нравится, правите таблицу, а не готовый клип.

Шаг 7. Звук под ритм

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

Синтезируй в коде оригинальный трек на 120 ударов в минуту, минималистичный, без шаблонных подкладок. Напиши beats.py на numpy и librosa: измерь трек и выведи beats.json с темпом, ударами, сильными долями и пиками. Напиши sfx.mjs: синтезируй в Node щелчок, хлопок, глухой удар и свист. Щелчок на каждое нажатие курсора, свист на каждое превращение контейнера, глухой удар на логотипе. Перемонтируй анимацию под beats.json, смешай звук и собери out/launch.mp4.

Агент пересчитал: 120 ударов в минуту дают 30 ударов за 15 секунд. Логотип встал на 24-й удар, то есть на 12-ю секунду. В новой версии на каждое появление текста и каждый переход приходится свой звук.

Шаг 8. Режиссёрский бриф для длинных работ

Для большого клипа нужен бриф. В примере в нём 12 пунктов, основные:

• Фильм одной строкой. Любое решение сверяется с ней.
• Образцы: исходное видео, песня, репозиторий прежних работ. Что оставить, что изменить.
• Инструменты и ключи: какие навыки загружать, какие API доступны, бюджет, где лежит документация.
• Библия персонажа: пропорции, палитра, выражения, фиксация образа.
• Раскадровка: акты с таймкодами, новый эффект каждые 3-5 секунд, зацепка в первые 2 секунды.
• Контрольные точки: план, каркас, кадры, аниматик, полный проход, доводка, звук, рендер. Не пропускать.
• Результат: итоговый MP4, проверка зацикливания, постер, лист кадров, исходники с README.

В одном из публичных примеров запрос из нескольких абзацев надиктовали за пять минут, а агент работал над ним около 12 часов. Шаблон начинается так: ты режиссёр, аниматор, звукорежиссёр и инженер рендера фильма, сделанного в коде.

Шаг 9. Цикл критики

Именно он превращает приличный клип в хороший. Агент рисует по кадру на удар, собирает лист через ffmpeg, оценивает по семи осям от 1 до 10, записывает три худшие проблемы в журнал и исправляет. Повторяет, пока каждая оценка не станет 8.

В примере после третьего круга заставка выросла с 7 до 8, а глубина с 6 до 8. Первый круг нашёл плоскую картинку, пустые кадры при переходе из тёмного в светлое и мерцание на быстрых движениях. Агент добавил перспективу, параллакс и размытие движения. Полный рендер четвёртого круга, по его оценке, шёл около 18 минут.

Один из сложных клипов потребовал 163 вызова модели и почти 7 часов. Это не один запрос.

Шаг 10. Упакуйте конвейер в навык

Когда всё работает, оформите процесс как навык с именем. В следующий раз он спросит адрес сайта, длительность и формат, пройдёт тот же конвейер и соблюдёт жёсткие правила.

Если вы работаете из России

Подход не привязан к стране: правила, файлы стиля и бриф это обычный текст. Рендер идёт на вашем компьютере через браузер и ffmpeg, звук через Node, numpy и librosa.

Сложнее с моделью: Claude и Codex напрямую из России не работают. Можно взять кодинг-агента, который подключается к российской модели или к открытой модели на своём сервере. Весь пример построен на Opus 5.5, поэтому на другой модели результат придётся проверять самим. Правила и брифы переносятся как есть. Если зарубежные площадки с образцами стиля недоступны, берите образец из собственных видео.

Что важно знать до старта

• Образец не копируют. Берите ритм, переходы и палитру, но не содержание, логотипы и персонажей.
• Права на бренд. Скриншоты и логотипы только своих продуктов или с разрешения владельца.
• Один запрос хороший клип не делает. Закладывайте несколько кругов правок и расход на вызовы модели.
• Агент ошибается и в проверке. В журнале примера его инструмент ошибся в таймкодах на 0,25-0,5 секунды. Итог смотрите сами.
• Права доступа. В примере включён режим Bypass permissions, судя по названию, без подтверждений. Держите агента в отдельной папке и не давайте доступ к важным данным.
• Всё быстро меняется. Версии и кнопки у вас могут отличаться.

Мы в Агентехе учим сотрудников настраивать агентов так, чтобы результат был повторяемым: писать правила, шаблоны и проверки под задачи своего отдела. Как устроено обучение.