demo-video-creator: агентский навык, который собирает промо-ролик по ссылке на продукт

· 2 мин чтения
video-generation ffmpeg content-creation claude-code skills
📂 Исходный код на GitHub

Репозиторий chacha95/demo-video-creator: агентский навык для Claude Code, который делает из ссылки на продукт горизонтальный промо-ролик 1920×1080 на 40–60 секунд. Каждый кадр интерфейса снимается по-настоящему через Playwright, результаты продукта записываются с экрана, дикторский голос читается целиком за один дубль на ElevenLabs, а склейки попадают в бит музыки с точностью до кадра. Собирает композицию HyperFrames, сводит звук до −14 LUFS и проверяет результат по таблицам синхронизации и полосам кадров. Английская и корейская версии из одной монтажной сценки. MIT.

demo-video-creator: агентский навык, который собирает промо-ролик по ссылке на продукт

Что делает навык

Навык берёт ссылку на продукт и возвращает один готовый mp4-файл: горизонтальный ролик 16:9 для запуска продукта. Ничего не придумывает и не рисует — все кадры интерфейса снимаются с настоящей страницы, а работа продукта записывается с экрана.

Тот же навык делает ролик на английском или на корейском. В примере из репозитория оба ролика — про продукт Evals. Сюжет и приёмы движения в них одинаковые. Меняются только голос, тексты и шрифт.

Ролики целиком лежат в репозитории: media/demo_en.mp4 (40 секунд) и media/demo_ko.mp4 (45 секунд).

Что вы получаете

Формат 1920×1080, 30 кадров в секунду, H.264 со звуком AAC 192k
Длина примерно 40–60 секунд
Громкость −14 LUFS — это уровень, который принимают стриминговые площадки. Голос при этом читается поверх музыки
Язык английский (голос Will в ElevenLabs) или корейский (голос Choi и шрифт Pretendard). Слова интерфейса остаются английскими в обеих версиях
Папка проекта videos/<name>/ с файлами SCRIPT.md, DESIGN.md, DECISIONS.md, сборкой HyperFrames, проверочными полосами кадров и самим роликом в renders/<name>.mp4

Структура ролика жёстко задана:

  1. Трёхсекундный зачин — два настоящих результата рядом.
  2. Одна реальная задача от начала до конца: ввод, настройка, запуск, сравнение, подтверждение результата, таблица результатов.
  3. Финальная карточка со ссылкой.

Установка

npx skills add chacha95/demo-video-creator

Дальше дайте агенту обычную просьбу:

Make a 1-minute landscape demo video for https://your-product.com
https://your-product.com 한국어 버전으로 1분짜리 가로 데모 영상 뽑아줘

Навык понимает и такую просьбу: «сделай так, чтобы было похоже на это видео». Дальше дайте ссылку на ролик-референс или сам файл.

Что нужно настроить заранее

Ключ API

Единственное, что обязательно, — ключ ELEVENLABS_API_KEY. Он нужен в двух местах: для дикторского голоса (модель eleven_v4, запрос /with-timestamps) и для фоновой музыки (ElevenLabs Music).

Как получить:

  1. Войдите на elevenlabs.io.
  2. Откройте профиль в левом нижнем углу → Developers / API Keys → Create API Key.
  3. В правах включите Text to Speech, Music и Voices (read).
  4. Скопируйте ключ. Он показывается один раз.

Генерация музыки иногда требует платного плана. На один ролик уходит один дубль голоса и два-три варианта музыки.

Ключ кладут в файл .env в корне проекта, где вы запускаете агента:

ELEVENLABS_API_KEY=your_key_here

В чат ключ вставлять не надо. Файл .env стоит закрыть от git (echo .env >> .gitignore). При первом запуске навык сверяет ключ с API и, если что-то не сходится, пишет обо всех проблемах одним сообщением. И только потом начинает работу.

Инструменты

Инструмент Зачем Установка на macOS
Node.js 20+ сборка HyperFrames и скрипты захвата на Playwright brew install node
ffmpeg / ffprobe пересчёт тайминга, эффекты, сведение, проверочные полосы brew install ffmpeg
Python 3 + numpy поиск битов, проверка движения, проверка сведения pip3 install numpy
Playwright + Chromium снимки интерфейса в четырёхкратном разрешении (4× DPR) и запись экрана с результатами npm i -D playwright && npx playwright install chromium
HyperFrames монтаж и рендер (скачивается сам) npx --yes hyperframes@0.8.101
whisper.cpp (необязательно) локальная проверка финальной дорожки через Whisper, без ключа API brew install whisper-cpp
yt-dlp (необязательно) скачать ролик-референс brew install yt-dlp

Навык написан под Claude Code. Если установлен навык hyperframes-core, навык его тоже читает — ставится через npx skills add heygen-com/hyperframes.

Что продукт должен уметь

  • Живая ссылка, которую открывает Playwright. Каждый кадр интерфейса — настоящий снимок, ничего не подделывается. Если страница требует входа, агент берёт ваш залогиненный Chrome. Если и это не выходит, откатывается на публичные страницы.
  • Что-то, что двигается. Это могут быть игры, видео, трёхмерные сцены или интерактивные страницы. Статичные скриншоты сайта навык обходит намеренно.
  • Настоящие числа. Названия моделей, статистика и возможности на экране берутся из ваших же кадров.

Английский и корейский

Английский Корейский
Голос Will bIHbv24MWmeRgasZH58o Choi ZNSVYmudV9pOqphY0x8C
Настройки eleven_v4, стабильность 0.15, сходство 0.8, стиль 0.8, скорость около 1.1, пометки эмоций прямо в тексте те же
Текст 165–180 слов на 60 секунд тот же темп, корейские тексты
Шрифт гротеск из вашей дизайн-системы Pretendard для каждого корейского знака
Слова интерфейса как на сайте оставлены на английском (Task, Setup, Battle, Model, Skill…)

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

Как устроен конвейер

brief → референс и SPEC → SCRIPT.md → DESIGN.md → настоящие кадры интерфейса и результатов
→ один дубль голоса → музыка → сборка HyperFrames (по голосу, по биту)
→ повторный рендер для ускорения → обработка (эффекты, сведение) → проверка → renders/<name>.mp4

Смысл всего конвейера простой: картинка подстраивается под голос, а не наоборот.

Правила движения

Правила заданы числами, а не словами вроде «красиво». Полное описание лежит в MOTION_RULES.md, суть такая:

  • камера одна, и её положение целиком считается по времени — случайных сдвигов нет;
  • всего два вида сглаживания: быстрое, примерно 25% остатка расстояния за кадр, и медленное, примерно 12%;
  • конец кадра разгоняется к склейке, и следующий кадр подхватывает эту скорость;
  • каждая склейка попадает в бит музыки с точностью до одного кадра;
  • даже в паузе кадр медленно ползёт на 1–3% — полной неподвижности в кадре быть не должно;
  • приближение идёт только в одну сторону: если навык приблизил кадр, он не отпускает его обратно.

Но есть ещё одно правило, и без него картинка рассыпается чаще всего. Слова на экране должны появляться раньше, чем их произносит голос, — на 0.05–0.20 секунды. Обе цифры даны осознанно. Текст, который отстаёт от голоса, выглядит рассинхроном. Текст, который опережает голос на целую секунду, выглядит так, будто они идут отдельно друг от друга. Небольшой запас читается как точная синхронизация.

Голос и музыка

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

Проверки голоса: паузы внутри дорожки — не больше 0.35 секунды; Whisper на финальном миксе не находит обрезанных слов; имя продукта звучит правильно. В исходном ролике слово Evals пришлось переписать как E-vals, иначе оно произносилось как «evils».

Музыку генерируют в ElevenLabs Music: 2–3 варианта, берут самый чистый по средним частотам. Трек подгоняют под сюжет. BPM и первый удар в такте даёт beats.py / bars.py, а music_fit.py переставляет трек по фразам так, чтобы паузы и дропы попали на смысловые удары.

Сведение

  • голос — около −16 LUFS, он впереди;
  • музыка приглушается на 4–6 дБ и только под речью, приглушение идёт плавно: громкость поднимается за 50 мс и опускается за 0.6 с;
  • шина эффектов — примерно на 3 дБ ниже музыки;
  • мастер — −14 LUFS и AAC 192k.

Усиленные эффекты стоят только на 4–6 главных ударах: зум-удар +8.5%, тряска 16 px около 22 Гц, расхождение цветовых каналов RGB с 16 px до 7 px за четыре кадра и одна-две белые вспышки. На остальных склейках — облегчённая версия. Эффект на каждой склейке перестаёт читаться как эффект.

Проверка перед выдачей

  1. python3 scripts/motion.py <mp4> <bpm> <first_beat> — склейки на битах, нет полных остановок и мёртвых пауз.
  2. sh scripts/strip.sh <mp4> <t> <out.png> — полоса из 16 кадров подряд на каждой склейке, и её надо посмотреть глазами. Общий лист кадров раз в две секунды выглядит чистым даже при сломанном движении — раньше из-за него выпускали плохие ролики.
  3. Таблица синхронизации по каждой строке голоса: запас текста 0.05–0.20 с.
  4. Финальный осмотр: полноразмерные кадры в начале, середине и конце каждого плана, проверка краёв и углов. Ищутся срезанные иконки и буквы, обрезанные строки интерфейса у края карточки, полосы прокрутки, серые полосы от слишком сильного приближения, размытые растянутые картинки, разный отступ между планами и текст, задевающий край карточки.
  5. Whisper на финальном миксе и проверка громкости: −14 LUFS с допуском ±0.5.

Все находки пишутся в qa/finish.md вместе с исправлением.

Полный конвейер с пояснениями — в SKILL.md.

Ограничения

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

Лицензия

MIT. Код и материалы лежат в открытом доступе. Корейская версия README — README.ko.md.

Источник: https://github.com/chacha95/demo-video-creator