Создание видео с Claude Code и remotion-best-practices | Учебники

В этой главе объясняется, как с нуля локально создать и сгенерировать проект промо-видео Remotion с помощью Claude Code и навыка remotion-best-practices.

Предварительные требования

Прежде чем начать, убедитесь, что ваша локальная среда соответствует следующим требованиям.

Установка Claude Code

Доступен официальный скрипт установки в один клик; запустите соответствующую команду в зависимости от вашей системы.

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

После установки проверьте, прошла ли она успешно:

$ claude --version
2.1.142 (Claude Code)

При первом запуске требуется войти в свою учётную запись Anthropic и авторизоваться. Если у вас нет официальной учётной записи, вы можете проверитьКонфигурация API Claude Code

Установка Skill remotion-best-practices

Skill — это пакет расширения возможностей для Claude Code. remotion-best-practices содержит лучшие практики и шаблоны кода для проектов Remotion.

Что такое Skill

Skill — это по сути структурированный документ с промптом (SKILL.md). После того как Claude Code прочитает его, он получает профессиональные знания и ограничения спецификации в соответствующей предметной области.

Skill remotion-best-practices включает следующее содержимое:

Способ установки

В терминале перейдите в каталог вашего проекта и выполните команду установки:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

После установки вы можете проверить, что навык был распознан:

claude skills list

Вы должны увидеть раздел, похожий на следующий:

Installed skills:
  - remotion-best-practices  (active)

адрес исходного кода remotion-best-practices:https://github.com/remotion-dev/skills

Создание проекта Remotion

После завершения всех подготовок запустите Claude Code в пустом каталоге и с помощью одного промпта позвольте ему автоматически настроить проект.

Запуск Claude Code и передача промпта

Мы можем создать каталогvideo-marker, затем перейти в него:

mkdir video-marker
cd video-marker

Запустите в каталоге проекта:

claude

После входа в интерактивный интерфейс вставьте следующий промпт:

先读取 remotion-best-practices skill，然后创建一个 Remotion 项目。

目标：6 秒钟的「Hello Example」好莱坞风格片头视频，1920x1080，30fps.

效果要求：
- 纯黑背景
- "HELLO EXAMPLE" 文字以冲击力方式砸入画面，伴随冲击波扭曲效果
- 撞击瞬间爆发金色粒子
- 强烈的色差闪光（chromatic aberration）
- 文字落定后，绿色（#3A7EC2）轮廓光晕脉冲
- 顶部和底部黑色宽幅遮幅条像电影一样滑入

只需一个 Composition，不用拆分场景。整体质感对标好莱坞大片片头字幕。

Затем просто дождитесь, пока он сгенерирует~

После завершения он сообщит вам, как сгенерировать файл mp4:

Предпросмотр в браузере:

cd hello-example
npm run dev

Эффект предпросмотра:

Сгенерировать mp4:

cd hello-example
npx remotion render HelloExample out/hello-example.mp4

Информация об экспорте:

Видео находится в каталоге out:

В промпте явно требуется, чтобы Claude Code сначала прочитал навык, поэтому сгенерированный код строго следует спецификации remotion-best-practices, а не полагается на собственные привычки модели по умолчанию.

Что будет делать Claude Code

После чтения навыка Claude Code автоматически выполнит следующие шаги:

Другие примеры

Пример 1: Анимация роста числа

帮我用 Remotion 创建一个 8 秒的视频。背景是深色，画面中央显示一个数字，从 0 逐渐增长到 1,000,000，数字有弹跳动画效果，最后定格时出现"突破百万！"的字样。字体要大，颜色用金黄色。
Claude Code 接到这个指令后会：

Мы можем напрямую поручить ИИ экспортировать видео за нас в Claude:

Сгенерированное видео:

Пример 2: Обратный отсчёт до запуска продукта

用 Remotion 做一个 15 秒的产品发布倒计时视频。从 10 倒数到 0，每个数字出现时有缩放+透明度的过渡动画，背景用黑色，数字用白色大字体，右上角有"NEW"红色徽章。倒计时结束时全屏出现产品名称"CLAUDE PRO"，字体要震撼。

Сгенерированное видео:

Ключевые моменты:Чем конкретнее промпт, тем лучше. Если вы чётко опишете время, цвета, эффекты и текстовое содержимое, Claude Code сможет сделать всё правильно с первого раза без необходимости повторных корректировок.

Понимание структуры сгенерированного проекта

После настройки проекта структура каталогов выглядит так:

hello-example/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts              ← 入口，注册所有 Composition
    ├── Root.tsx              ← 主 Composition，拼接所有场景
    ├── compositions/
    │   ├── Intro.tsx         ← 开场 Logo 动画
    │   ├── ProblemScene.tsx  ← 问题引入场景
    │   ├── FeaturesScene.tsx ← 技术卡片展示
    │   ├── StatsScene.tsx    ← 数据统计场景
    │   └── Outro.tsx         ← 结尾 CTA
    ├── components/
    │   ├── TechCard.tsx      ← 单个技术卡片
    │   ├── AnimatedCounter.tsx ← 数字滚动
    │   └── CodeSnippet.tsx   ← 代码块动画
    └── assets/
        ├── colors.ts         ← 品牌色常量
        └── logo.svg

Пояснение к основному файлу

Root.tsxЭто точка входа всего видео, где все сцены объединяются в порядке временной шкалы:

Основной видеокомпонент, использующий Series для соединения сцен по порядку:

const MainVideo = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>   {/* 3秒 */}
        <Intro />
      </Series.Sequence>
      <Series.Sequence durationInFrames={210}>  {/* 7秒 */}
        <FeaturesScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={450}>  {/* 15秒 */}
        <StatsScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={300}>  {/* 10秒 */}
        <Outro />
      </Series.Sequence>
    </Series>
  );
};

Установка зависимостей и предварительный просмотр

После того как Claude Code сгенерирует код, установите зависимости согласно его подсказкам:

npm install

Запустите Remotion Studio для предпросмотра эффекта видео:

npx remotion studio

> [email protected] studio
> remotion studio

Remotion Studio running at http://localhost:3000

Браузер откроется автоматическиhttp://localhost:3000, и вы сможете перетаскивать таймлайн, чтобы в реальном времени просматривать эффект каждого кадра.

Если анимация в какой-либо сцене во время предпросмотра выглядит слишком быстрой или слишком медленной, просто скажите Claude Code: "Анимация появления карточки во 2-й сцене слишком быстрая, сделай задержку длиннее", и он найдёт соответствующий код и изменит его.

Итерации с Claude Code для внесения правок

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

Типичные сценарии корректировки

Опишите проблему прямо в терминале Claude Code, и он найдёт соответствующий файл и изменит его. После изменения Remotion Studio автоматически выполнит горячую перезагрузку.

Рендеринг и экспорт финального видео

После того как вы останетесь довольны результатом, отрендерите его в файл MP4:

Rendering ExamplePromo (1800 frames)
Progress: ████████████████████ 100%
Rendered in 2m 34s → out/example-promo.mp4

Лучшие практики Remotion: помогаем ИИ делать лучше

Скорость рендеринга зависит от сложности сцены и производительности компьютера. Если видео длинное и содержит много эффектов, можно добавить параметр--concurrency=4, чтобы включить многопоточный параллельный рендеринг, что может ускорить в 3–4 раза.

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

Часто задаваемые вопросы

Claude Code не прочитал навык

Если сгенерированный код не соответствует спецификации remotion-best-practices, значит навык не был прочитан правильно.

Добавьте это предложение явно в начало промпта:

Ошибка запуска Remotion Studio

Частая причина — слишком старая версия Node.js. Проверьте и обновите:

Анимация spring() показывает только первый кадр

Это потому, чтоframe - delay, когда значение отрицательное, spring возвращает 0.

Добавьте защиту clamp: