98.8K+Скачать
Перейти к руководству
hyperframes-creativeавтор HeyGen

HyperFrames Creative Skill.

Навык для Claude Code и Codex для анимации и видео: креативное направление для видео HyperFrames: палитра, типографика, композиция, голос за кадром, темп.

  • Анимация и видео
  • Video
Скачать OpenDesignИнструкция по использованию
heygen-com/hyperframes · skills/hyperframes-creative/SKILL.mdSKILL.md
--- name: hyperframes-creative description: Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`. --- ## Workflow ## Routing ## Scripts ## Boundaries
Метаданные и заголовки секций прочитаны из исходного файла 2026-09-14 · 6317 символов полностью

01 Что делает

Что делает skill hyperframes-creative в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Неанимационное творческое направление для видео HyperFrames, применяемое после того, как технический контракт из hyperframes-core уже задан. Занимается разбором дизайн-спецификации (frame.md / design.md с frontmatter как источником истины по бренду), палитрами, типографикой, дикторским текстом, планированием битов, аудиореактивной визуализацией, композиционными паттернами и брендовыми решениями.

Для нетривиальных задач два справочных файла переопределяют веб-инстинкты: house-style.md объясняет, как интерпретировать промпты и генерировать реальный контент с рецептами фоновых/переднеплановых слоёв, а video-composition.md определяет масштаб, глубину и детализацию переднего плана для видео-медиума, чтобы избежать пустых макетов в стиле веб-страниц. Для атомарных паттернов движения, blueprint сцен, переходов и CSS-эффектов маркеров используйте вместо этого hyperframes-animation.

Что он выдаёт

  • HTML-композиция с использованием масштаба, паттернов глубины видео-медиума и цветов и типографики, согласованных с брендом
  • Отчёт о контрасте от contrast-report.mjs, проверяющий доступность отрендеренного кадра
  • Файл данных аудиополос от extract-audio-data.py для аудиореактивных композиций
Смотрите пример запроса ↗

Как это работает

  1. 01
    Сначала прочитайте дизайн-спецификацию

    Если в проекте есть frame.md, design.md или DESIGN.md, сначала прочитайте его и относитесь к токенам во frontmatter как к источнику истины по бренду для цветов, шрифтов, отступов, тона и ограничений.

  2. 02
    Выберите визуальное направление

    Если дизайн-спецификация отсутствует, возьмите готовый frame-preset из frame-presets/, выберите именованный стиль из visual-styles.md, используйте быстрые значения по умолчанию из house-style.md или запустите интерактивный выбор через design-picker.md.

  3. 03
    Планируйте биты (beats) до написания HTML

    Для работы с несколькими сценами обратитесь к beat-direction.md, чтобы спланировать ритм и тайминг до написания HTML. Для переходов между сценами перейдите к hyperframes-animation/transitions/.

  4. 04
    Применяйте ограничения движения (motion guardrails)

    Для работы с насыщенной анимацией сначала прочитайте motion-principles.md, чтобы понять общие ограничения, затем переходите к hyperframes-animation для атомарных правил движения.

02 Определите своё применение

Когда использовать hyperframes-creative Skill

Используйте hyperframes-creative skill в Claude Code или Codex, когда задача — это motion and video такого типа. Соответствие и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Обработка дизайн-спецификаций для файлов frame.md или design.md с токенами frontmatter, задающими направление бренда
  • Выбор палитры, типографики и решения по бренду или стилю для видео HyperFrames
  • Композиционные паттерны, такие как picture-in-picture, text-behind-subject, титульные карточки и слайд-шоу
  • Аудио-реактивная визуализация с использованием предвычисленных аудио-полос, привязанных к движению

Знайте границы

  • Атомарные паттерны движения, которые относятся к hyperframes-animation
  • Сценарные блюпринты, переходы и CSS-эффекты маркеров — для этого используйте hyperframes-animation

Что предоставить

  • Пользовательский запрос для визуального направленияЕсли дизайн-спецификация отсутствует, предоставьте запрос на именованный стиль, настроение или открытый запрос, чтобы направить его через visual-styles.md или prompt-expansion.md.

03 Внутри скилла

Правила, которые Skill hyperframes-creative даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Сначала прочитайте house-style.md и video-composition.md

    Для любой нетривиальной композиции прочитайте references/house-style.md и references/video-composition.md перед выбором цветов или написанием HTML.

  2. Токены frontmatter — истина бренда

    В дизайн-спецификациях считайте frontmatter нормативным, а текст — контекстом. Токены frontmatter для цветов, шрифтов, отступов, тона и ограничений имеют приоритет над остальными значениями по умолчанию.

  3. Никогда не переопределяйте технические правила hyperframes-core

    Не переопределяйте технический контракт, установленный hyperframes-core, который определяет базовую структуру и ограничения.

  4. Никакого несогласованного расширения контента

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

  5. Держите ссылки на рецепты специфичными для задачи

    Не читайте все справочные файлы для простых правок. Загружайте только те справочные материалы, которые относятся к конкретной задаче.

  6. Порядок приоритета дизайн-спецификации

    При определении, какую спецификацию дизайна читать, следуйте этому порядку приоритета: сначала frame.md, затем design.md, затем DESIGN.md.

  7. Запускайте скрипты из корня репозитория

    Выполняйте все скрипты с явными путями от корня репозитория, например: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.

  8. Полноценная дизайн-система не требуется для минимальной работы

    Не требуйте полноценную дизайн-систему для минимальной технической композиции. Skill масштабируется под сложность задачи.

04 Применение

Установите hyperframes-creative в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Установите hyperframes-creative в Claude Code или Codex

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

Общая форма CLI skills для skills/hyperframes-creative/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Create a 45-second product announcement video for [product name] using a cyberpunk visual style with fast pacing and high-contrast palette. Plan the beats to open with a hook about [customer pain point], then reveal three key features with audio-reactive text reveals. Use the brutalist frame-preset from frame-presets/ and generate voice-over narration that matches the technical tone from our existing design.md.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Проверьте соответствие дизайну по цветам, шрифтам, скруглениям, отступам и глубине согласно design-adherence.md
  • Убедитесь, что правила плотности и масштаба из video-composition.md соблюдены, чтобы избежать вёрстки в стиле веб-страниц

В OpenDesign импортируйте hyperframes-creative по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Ветка main
Файл skill
skills/hyperframes-creative/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 558c11b
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
49 761 Снимок GitHub сделан 2026-09-14 для всего репозитория heygen-com/hyperframes, который содержит 9 навыков в этом каталоге. Это не рейтинг и не счётчик использования для hyperframes-creative.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. HyperFrames CreativeНаправление по бренду, темпу, стилю, повествованию и композиции для использования после технического контракта hyperframes-core
  2. WorkflowПроцесс из четырёх шагов: прочитать спецификацию дизайна, выбрать визуальное направление, спланировать биты, применить ограничения по анимации
  3. МаршрутизацияТаблица соответствия тем справочным файлам для палитр, композиции, повествования, аудио-реактивности и стилевых пресетов
  4. Скриптыcontrast-report.mjs, extract-audio-data.py, package-loader.mjs; запускать из корня репозитория с явными путями
  5. ГраницыНе переопределяйте базовые правила, не требуйте дизайн-систем, не добавляйте незапрошенный контент и не читайте каждый справочный файл
Собственное описание skill
"Не-анимационная креативная направленность для видео HyperFrames. Используйте для работы со спецификацией дизайна (frame.md / design.md), палитрами, типографикой, повествованием, планированием ритма, визуалом с реакцией на звук, паттернами композиции и решениями по бренду / стилю. Для атомарных паттернов движения и чертежей сцен используйте `hyperframes-animation`."

Описание из front-matter файла SKILL.md. Полный файл занимает около 6 317 символов. Прочитайте полный файл на GitHub.

HyperFrames Creative

Запустите hyperframes-creative на реальной задаче по созданию видео и анимации.

Скачайте OpenDesign, импортируйте hyperframes-creative по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед получением результата.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows