Вайбкодинг2026-08-22Обновлено: 2026-09-018 минАвтор:

Claude и Remotion: как создать видео с помощью кода

Claude и Remotion: как создать видео с помощью кода

Claude Code и Remotion подходят для роликов, которые собираются из текста, графики, изображений, диаграмм и анимации по точному сценарию. Remotion превращает React-компоненты в видео, а Claude Code помогает создать и изменить код проекта. Это не генератор кинематографических сцен из одной фразы: вам понадобятся исходные материалы, понятная раскадровка и визуальная проверка каждого результата.

Что именно делает связка Claude и Remotion

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

  • Remotion отвечает за композиции, кадры, длительность, слои, анимацию, звук и рендер.
  • Claude Code переводит раскадровку в компоненты, исправляет ошибки и помогает повторять однотипные сцены.
  • Вы отвечаете за смысл, права на материалы, художественный выбор и финальную проверку.

Берите Remotion, когда ролик можно описать как набор управляемых сцен и параметров. Для съёмочного видео или генерации реалистичного движения нужен другой инструмент и последующий монтаж.

Что должно получиться до начала работы

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

  1. Опишите аудиторию, цель ролика и одно действие после просмотра.
  2. Разбейте содержание на сцены и назначьте каждой длительность.
  3. Соберите разрешённые изображения, шрифты и аудио в отдельную папку.
  4. Создайте проект Remotion и убедитесь, что пустой шаблон запускается.
  5. Поручайте Claude Code одну сцену или один компонент за шаг.
  6. После каждого изменения проверяйте ключевые кадры, затем делайте тестовый рендер.

Картинки и дизайн ИИ уже делает за вас. Следующий шаг это место, где они живут: сайт, портфолио или сервис. На бесплатном вебинаре его собирают за вечер.

Посмотреть, что дальше

Подготовьте техническое задание, которое можно проверить

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

Цель: короткий ролик с объяснением одного процесса
Кадр: 1920x1080, горизонтальный
Сцены: заголовок, три шага, итог
Ограничения: без внешних запросов во время рендера
Проверка: кадры в начале, середине и конце каждой сцены

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

По теме: Claude Code и Cline: сравнение, настройка и проверка в 2026

Создайте чистый проект Remotion

Начинайте с официального генератора проекта. На главной Remotion указан запуск npx create-video@latest. Выберите минимальный шаблон, перейдите в созданную папку и сначала запустите предпросмотр без изменений. Команды проекта могут отличаться между шаблонами, поэтому посмотрите раздел scripts в package.json, а не угадывайте название команды.

npx create-video@latest
cd my-video
npm run dev

Критерий готовности этапа: Studio открывается, базовая композиция видна, терминал не показывает ошибку сборки. Если шаблон не запускается, не просите Claude сразу строить весь ролик. Сначала сохраните точный текст ошибки и устраните проблему среды.

Соберите каркас ролика до оформления

Попросите Claude найти файл регистрации композиций и объяснить текущую структуру проекта. Затем создайте одну композицию с правильными параметрами и простыми цветными блоками вместо финальной графики. Каркас должен подтверждать тайминг, порядок сцен и переходы. Декор добавляется после того, как этот скелет стабильно работает.

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

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

Прийти на эфир

Дайте Claude Code узкую задачу

Работайте короткими циклами. Сначала попросите агента прочитать проект и составить план без изменений. Потом разрешите изменить только перечисленные файлы. В конце потребуйте назвать команды проверки и объяснить, какие кадры нужно посмотреть вручную. Справочник CLI Anthropic описывает интерактивный режим и режим печати, но для первого проекта безопаснее интерактивная работа с подтверждением правок.

Прочитай package.json и файлы композиций. Ничего не меняй.
Предложи план сцены из трёх экранов по техническому заданию.
После подтверждения измени только перечисленные файлы.
Запусти доступную проверку проекта и перечисли кадры для ручного просмотра.

Не просите одновременно переписать структуру, добавить дизайн, музыку и экспорт. При таком объёме трудно понять, какое изменение вызвало сбой. Один цикл должен давать один проверяемый прирост: появилась сцена, исправился тайминг или подключился один ресурс.

По теме: Claude Code macOS: первый проект в приложении на Mac

Проверяйте ролик по контрольным кадрам

Воспроизведение от начала до конца не ловит короткие наложения и обрезанный текст. Составьте таблицу контрольных моментов: первый кадр сцены, середина анимации, последний кадр перед переходом. Для каждого момента запишите, что должно быть видно. Так проверка становится повторяемой и не зависит от общего впечатления.

  1. Откройте первый, средний и последний кадр каждой сцены.
  2. Проверьте безопасные поля и переносы текста на длинной формулировке.
  3. Временно отключите звук и убедитесь, что смысл сохраняется визуально.
  4. Верните звук и проверьте совпадение акцентов с переходами.
  5. Сделайте короткий тестовый рендер и откройте файл вне Studio.

Частые сбои и как их исправить

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

  • Studio не открывается: проверьте установку зависимостей, команду из package.json и первую ошибку в терминале.
  • Белый кадр: откройте консоль браузера, проверьте импорт компонента и регистрацию композиции.
  • Медиа не найдено: проверьте имя файла, регистр букв и способ подключения статического ресурса.
  • Текст прыгает: убедитесь, что шрифт загружен до рендера и размеры блока заданы явно.
  • Рендер отличается от предпросмотра: исключите сетевые ресурсы и проверьте воспроизводимость на локальных файлах.

По теме: Claude и Blender: как создать сцену через Python без плагина

Сохраните безопасный рабочий процесс

Перед крупной правкой фиксируйте рабочее состояние проекта. Просматривайте diff и не принимайте изменения, которые не относятся к задаче. Подробный порядок есть в статье Claude и Git: безопасный рабочий процесс. Не передавайте агенту ключи, приватные ссылки на медиа и чужие материалы без разрешения.

  • Один запрос к агенту соответствует одному изменению.
  • У каждого изменения есть команда проверки и ручной критерий.
  • Рабочий рендер сохраняется до эксперимента с новой сценой.
  • Финальный файл проверяется на другом проигрывателе и при нужном соотношении сторон.

Когда Remotion не подходит

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

Частые вопросы

Можно ли сделать видео только одной фразой?

Можно получить черновой каркас, но качественный ролик требует сценария, материалов, проверки кадров и нескольких коротких циклов правок.

Нужно ли знать React?

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

Claude сам создаёт изображения и музыку для Remotion?

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

Как понять, что ролик готов?

Готовность подтверждают контрольные кадры, отсутствие ошибок, совпадение звука с таймингом и тестовый файл, который открывается вне среды разработки.

На бесплатном вебинаре вы соберёте первый проект с ИИ и увидите, как превращать понятное техническое задание в работающий результат с проверкой.

Записаться на вебинар
Разборы, кейсы и фишки вайбкодинга каждую неделю в телеграм-канале «Яков вайбкодит».
Первый проект с ИИ: живой разбор, бесплатно Занять место