Как повторить
- Установите Node.js 22+, FFmpeg и Claude Code.
- Установите скилл. Для Claude Code проще через плагин:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesЭто и есть способ, который README называет рекомендуемым для Claude Code - дальше вызываете /hyperframes:hyperframes. Если работаете через Codex, Cursor или другого агента без плагинов, ставьте как обычный skill:
npx skills add heygen-com/hyperframesВ обычном терминале откроется список из 7 скиллов, по умолчанию ничего не отмечено. Флаг --all ставит все 7 без выбора, --skill <имя> ставит один. Если команду запускает агент или скрипт, без --skill встанут все 7. Для таких запусков README советует npx hyperframes skills update: эта команда берёт свежую версию с main, а кеш может отставать на часы.
- Запишите своё видео. Если снимать себя не хотите, сделайте аватара в HeyGen: сценарий → аватар и озвучка → экспорт mp4.
- Найдите ролик конкурента или блогера, чей монтаж вам нравится, и сохраните его вторым файлом. Это референс, то есть образец стиля.
- Положите оба файла в папку
assets/проекта. Назовите их как в задании ниже или поправьте пути. Отправьте Claude техзадание:
ЗАДАНИЕ НА МОНТАЖ
Исходник: assets/presenter.mp4
Референс: assets/donor-reference.mp4
Вырежи все паузы и неудачные дубли.
Сделай монтаж в похожем стиле,
учитывая смысл и содержание ролика.
Инструмент: HyperFrames.
Формат: 9:16.
Текст и голос не меняй.- Следом отправьте развёрнутый промпт с принципом «что говорим, то показываем»:
Смонтируй моё видео в HyperFrames по приложенному референсу. Разбери его ритм,
типографику и анимации. Подбери визуал под смысл моей речи: что говорим, то показываем.
Говорю про инструмент - покажи интерфейс; объясняю действие - покажи его выполнение и
результат. Используй реальные материалы вместо декоративных иконок. Синхронизируй
анимации, субтитры и звуки с речью и действиями. Сохрани мой текст, голос и синхрон.
Перед экспортом проверь кадры, читаемость и переходы, исправь ошибки. Формат 9:16.- Claude Code напишет композицию и запустит рендер через HyperFrames CLI. Готовый mp4 появится рядом с
assets/.
Как проверить результат
Если всё получилось, субтитры совпадают с речью слово в слово, а картинка меняется под каждую фразу. Говорите про интерфейс, значит, на экране интерфейс, а не случайная иллюстрация. Если на выходе только обрезанное видео без анимаций и подписей, то либо скилл не подхватился, либо промпт вышел слишком общим.
Как это устроено
Claude пишет ролик как веб-страницу на HTML, CSS и GSAP (это библиотека анимаций). HyperFrames открывает её в браузере без окна, снимает покадрово и склеивает видео через FFmpeg. Тайминги, подбор картинки под фразы и анимацию текста задаёт агент, а из референса он берёт ритм и типографику.
Ссылки
- HyperFrames на GitHub: открытый фреймворк от HeyGen для рендера видео из HTML/CSS/GSAP, лицензия Apache 2.0.
- HeyGen: сервис ИИ-аватаров, нужен только если не хотите сниматься сами. Бесплатный план - 3 видео в месяц до минуты каждое, с вотермаркой. Платный план Creator снимает вотермарку и даёт экспорт в 1080p: 24 $ в месяц при годовой оплате, 29 $ при помесячной.
Источник: artemiy.miller, Instagram.