# Монтаж кодом через Claude Code: инструкция

Ставишь Claude Code, Remotion и ffmpeg, подключаешь скиллы и ведёшь агента по шагам - от сценария до готового MP4 в 9:16, 16:9 и 1:1. Анимации, монтаж живого видео, озвучка и звук собираются кодом у тебя на компьютере, без After Effects и Premiere.

// Шаг 1

## Поставь инструменты

Связка простая: Claude Code пишет код, [Remotion](https://www.remotion.dev/docs/ai/claude-code) превращает React-код в видео, ffmpeg режет и сводит звук. Нужен платный аккаунт Claude (Pro, Max) или ключ API.

- 1 «Claude Code» — macOS, Linux, WSL: команда ниже. Windows PowerShell: irm https://claude.ai/install.ps1 | iex. Проверка - claude --version печатает номер версии.
- 2 «Node.js и ffmpeg» — На Mac - через Homebrew одной командой. На Windows - winget install OpenJS.NodeJS.LTS и winget install Gyan.FFmpeg. Проверка - node -v и ffmpeg -version.
- 3 «Вход в Claude Code» — Запусти claude в терминале и войди через браузер.

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

_Claude Code - macOS, Linux, WSL_

```
brew install node ffmpeg
```

_Node.js и ffmpeg - macOS_

[Установка Claude Code](https://code.claude.com/docs/en/setup)

[Скачать Node.js](https://nodejs.org/en/download)

[Скачать ffmpeg](https://ffmpeg.org/download.html)

// Шаг 2

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

Скиллы - это инструкции для агента: как делать композиции, анимации, субтитры, звук и выгрузку. С ними Claude Code пишет рабочий Remotion-код с первого раза, а не угадывает API.

```
npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npx remotion add @remotion/three
npm i three @react-three/fiber @types/three gsap
npx remotion add @remotion/captions
npx remotion add @remotion/install-whisper-cpp
```

_Проект, скиллы и библиотеки анимации - по очереди_

```
npx remotion studio
```

_Превью в браузере - держи открытым всё время работы_

[Remotion + Claude Code](https://www.remotion.dev/docs/ai/claude-code)

[Скиллы Remotion на GitHub](https://github.com/remotion-dev/skills)

врезка `// Лицензия`: текст «Remotion бесплатен для частных лиц и небольших команд. Компании крупнее - платная лицензия, условия на remotion.dev.»

// Шаг 3

## Анимированные объяснялки кодом

Canvas и SVG - для схем и графиков, [Three.js](https://threejs.org) - для 3D, [GSAP](https://gsap.com/docs/v3/Installation/) - для таймлайнов и плавных движений. Запусти claude в папке my-video и вставь промт.

```
Ты моушн-дизайнер. Работаешь в этом Remotion-проекте по скиллам remotion-best-practices.
Сделай композицию Explainer: 30 fps, 1080x1920, длительность по тексту ниже.
Текст объяснялки: <вставь свой текст>
Правила:
- каждая мысль - отдельная сцена 2-4 секунды;
- схемы и графики рисуй на SVG или Canvas, 3D-объекты - через @remotion/three;
- движения строй на GSAP-таймлайне, привязанном к useCurrentFrame(), без setTimeout и CSS-анимаций;
- один шрифт, 2-3 цвета, крупный текст, который читается с телефона;
- до кода покажи мне раскадровку списком: сцена, что на экране, сколько секунд. Код пиши только после моего «ок».
```

_Промт: моушн-дизайнер_

врезка `// Важно`: текст «Вся анимация в Remotion обязана зависеть от номера кадра. Анимация «по времени браузера» в превью выглядит нормально, а в итоговом файле дёргается или стоит на месте.»

// Шаг 4

## Монтаж живого видео

Положи исходники в папку public/ проекта. Субтитры Claude Code сделает через whisper.cpp с таймингом до слова, текст за спиной у человека - через вырезку фигуры [rembg](https://github.com/danielgatis/rembg).

```
pip install "rembg[cpu,cli]"
```

_Вырезка человека для текста за спиной (нужен Python)_

```
Ты монтажёр. Исходник: public/raw.mp4.
1. Расшифруй речь через @remotion/install-whisper-cpp (модель medium) с таймингом слов, сохрани в public/captions.json.
2. Предложи план монтажа таблицей: таймкод, что вырезаем (паузы, оговорки, дубли), где резкий наезд (scale 1.0 -> 1.15 за 3 кадра), где перебивка и какая.
3. Субтитры: 2-4 слова на экране, текущее слово подсвечено, низ кадра с отступом под интерфейс площадки.
4. Текст за спиной: вытащи кадры ffmpeg, вырежи человека через rembg, собери слои фон -> текст -> человек.
5. Перебивки бери из public/broll/.
Ничего не собирай, пока я не утвержу план.
```

_Промт: монтажёр_

[Субтитры в Remotion](https://www.remotion.dev/docs/install-whisper-cpp/)

// Шаг 5

## Озвучка ElevenLabs и звук под площадки

Метод API with-timestamps возвращает к аудио время начала и конца каждого символа - по нему анимации и субтитры встают ровно на слово. Ключ API возьми в кабинете ElevenLabs и положи в .env как ELEVENLABS_API_KEY.

[ElevenLabs: озвучка с таймингом](https://elevenlabs.io/docs/api-reference/text-to-speech/convert-with-timestamps)

```
Ты звукорежиссёр.
1. Напиши скрипт scripts/voice.mjs: берёт текст из script.txt, вызывает POST https://api.elevenlabs.io/v1/text-to-speech/<voice_id>/with-timestamps с ключом из .env, сохраняет public/voice.mp3 и public/alignment.json (characters, character_start_times_seconds, character_end_times_seconds).
2. Собери из alignment тайминги слов и привяжи к ним появление сцен и субтитров.
3. Звуки (whoosh, щелчки, удары) ставь на кадр начала движения, музыку приглушай под голос.
4. Финальный звук нормализуй ffmpeg loudnorm до -14 LUFS, true peak -1 dB.
```

_Промт: звукорежиссёр_

```
ffmpeg -i out/video.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 out/video-final.mp4
```

_Сведение громкости под площадки - ffmpeg_

// Шаг 6

## Порядок с остановками

Секрет - не давать агенту делать всё за один заход. Каждая остановка - твоя проверка, без неё получается каша.

- 1 «Сценарий» — Claude Code пишет текст и раскадровку. Ты правишь и пишешь «ок».
- 2 «План монтажа» — Таблица сцен, склеек, наездов, звуков с таймкодами. Утверждаешь до кода.
- 3 «Превью» — Смотришь в npx remotion studio, правишь словами: «наезд на 0:12 короче», «субтитр выше».
- 4 «Финал» — Только после «ок» на превью - выгрузка MP4 командой ниже.

```
Работа над видео идёт в 4 этапа: сценарий -> план монтажа -> превью в Remotion Studio -> финальный MP4.
После каждого этапа остановись и жди моего «ок». Не переходи к следующему этапу и не запускай npx remotion render без подтверждения.
```

_Правило в CLAUDE.md проекта - агент будет останавливаться сам_

```
npx remotion render Explainer out/video-9x16.mp4 --codec=h264 --width=1080 --height=1920
npx remotion render Explainer out/video-16x9.mp4 --codec=h264 --width=1920 --height=1080
npx remotion render Explainer out/video-1x1.mp4 --codec=h264 --width=1080 --height=1080
```

_MP4 в трёх форматах (Explainer - id композиции)_

врезка `// Формат`: текст «Флаги --width и --height меняют только холст. Попроси Claude Code сделать вёрстку адаптивной через useVideoConfig(), иначе в 16:9 картинка уедет.»

[Флаги npx remotion render](https://www.remotion.dev/docs/cli/render)

// Шаг 7

## То же самое в Codex и Cursor

Проект Remotion и команды те же. Скиллы ставятся общей командой для агентов, правило с остановками положи в AGENTS.md (Codex) или в правила проекта Cursor.

```
npx skills add remotion-dev/skills
```

_Скиллы Remotion для любого агента_

```
npm install -g @openai/codex
```

_Codex - установка_

[Codex на GitHub](https://github.com/openai/codex)

[Cursor](https://cursor.com)

---

// Финал

## Проверь себя

- [ ] Поставить Claude Code и проверить claude --version
- [ ] Поставить Node.js и ffmpeg, проверить node -v и ffmpeg -version
- [ ] Создать проект my-video и подключить скиллы Remotion
- [ ] Добавить Three.js, GSAP, субтитры и whisper.cpp
- [ ] Открыть превью npx remotion studio
- [ ] Собрать первую объяснялку промтом моушн-дизайнера
- [ ] Смонтировать живое видео: склейки, наезды, субтитры, перебивки, текст за спиной
- [ ] Сделать озвучку ElevenLabs с таймингом и привязать к ней сцены
- [ ] Свести громкость до -14 LUFS через ffmpeg
- [ ] Записать правило с остановками в CLAUDE.md
- [ ] Пройти сценарий -> план -> превью -> финал и выгрузить MP4 в 9:16, 16:9 и 1:1

---

Источник: https://localhost:3000/m/montazh-kodom-cherez-claude-code-instrukciya