HyperFrames: как агент превращает HTML-вёрстку в готовый ролик

HyperFrames от HeyGen рендерит видео из обычной вёрстки: таймлайн ставится на паузу и прокручивается кадр за кадром, поэтому два рендера одного проекта совпадают. Скилл hyperframes задаёт агенту правила композиции и рабочий цикл: план, HTML, анимации, медиа, проверка, превью и рендер.

71 098звёзд на GitHub · #19

Открыть на GitHub

Установка

skills CLI

npx skills add heygen-com/hyperframes@hyperframes

Claude Code plugin

claude plugin marketplace add heygen-com/hyperframes

Claude Code plugin

claude plugin install hyperframes@hyperframes

Скачать ZIP

Автор: HeyGen
Лицензия: Apache-2.0
Пакет: Один скилл
Обновлён: 24 октября 2026 г.
Агенты: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, IBM Bob

Что умеет

Описывает контракт рендера: у каждого элемента на таймлайне класс clip, data-start и data-duration, а длину ролика задаёт корневая композиция.
Запрещает всё, что ломает повторяемость: Date.now(), Math.random() без зерна, сетевые запросы, таймеры и бесконечные повторы.
Перед ручной вёрсткой эффекта отправляет агента в реестр готовых блоков, а за музыкой, озвучкой и футажом — в скилл media-use.
Ведёт по циклу команд: check --json находит нарушения и подсказывает исправление, snapshot показывает кадры, render ждёт одобрения превью.
Подсказывает, какой справочник открыть под задачу: запуск продукта, объясняющий ролик, клип, графики, вертикальный формат, 3D, субтитры.

Когда пригодится

Нужен ролик к запуску функции или продукта, и хочется править его как код, а не в монтажной программе.
Требуется анимированный график, карта или гонка показателей, которые потом пересобираются из тех же данных.
Сайт или PR надо показать видеообзором: команда capture снимает страницу и делает её материалом для сюжета.

Попросите агента

Сделай через /hyperframes 10-секундное интро продукта: заголовок проявляется, фоном видео, тихая музыка.
Возьми наш лендинг и собери вертикальный ролик на 20 секунд с субтитрами, сначала покажи превью.
Сделай в HyperFrames анимированную столбчатую диаграмму выручки по кварталам из data.csv.

Вопросы

Как установить HyperFrames в Claude Code?

Через плагин: claude plugin marketplace add heygen-com/hyperframes, затем claude plugin install hyperframes@hyperframes. Отдельный скилл ставится командой skills CLI с этой страницы.

Работает ли HyperFrames в Codex и Cursor?

Да, авторы называют Claude Code, Codex, Cursor, Gemini CLI, IBM Bob и другие агенты со скиллами. Для Codex в репозитории есть сценарий сборки архива плагина.

Чем скилл hyperframes отличается от остальных скиллов пакета?

Это точка входа: его читают первым, в нём контракт и рабочий цикл. Командная строка, реестр блоков и работа с медиа вынесены в hyperframes-cli, hyperframes-registry и media-use.

Видео Все скиллы