Перейти к руководству
motion-graphicsавтор HeyGen

Motion Graphics Skill.

Skill для Claude Code и Codex в области моушна и видео: короткие дизайнерские моушн-ролики — кинетическая типографика, счётчики статистики, логозаставки, нижние титры.

  • Анимация и видео
  • Video
heygen-com/hyperframes · skills/motion-graphics/SKILL.mdSKILL.md
--- name: motion-graphics description: A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up … --- ## Categories — split by the search decision ## Prerequisites ## Flow ## Resume table ## Design notes (maintainers — execution does not read this)
Преамбула и заголовки разделов прочитаны из исходного файла 14 сентября 2026 года · 15 566 символов в полном виде

01 Что делает

Что делает skill motion-graphics в Claude Code и Codex

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

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

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

Skill, ориентированный на маршрутизацию, для одного короткого, дизайнерского, без диктора мультипликационного ролика — кинетическая типографика, анимация счётчика статистики, попадание графика, логотипный стинг, нижний титр, анимированная карта, твит или веб-страница — обычно короче 10 секунд и не длиннее примерно 30 секунд, рендерится в MP4 или в виде прозрачного оверлея.

Он ориентирован на использование ресурсов и повторное применение: первое ветвление — нужен ли поиск. Категории на основе форм работают с контентом, предоставленным пользователем, при пустом asset_needs, категории на основе поиска анимируют по типу возвращённого контента, а Builder собирает блоки каталога до ручного доработки пробелов. Workflow автономен и допускает не более одного уточняющего вопроса, но рендеринг остаётся под контролем пользователя после lint, check и proof-снапшотов.

Что он выдаёт

  • Черновой, а затем финальный shot-plan.json, содержащий envelope, выбранную категорию или намерение поиска, asset_needs и блок, layout, motion и positions.
  • compositions/index.html, соответствующий контракту HF, с приостановленной GSAP-таймлайн на window.__timelines, классами clip и стабильными id, а также детерминированным tl.seek(0).
  • Контактный лист или лист снапшотов в snapshots/ для проверки времён proof.
  • renders/video.mp4, или прозрачный оверлей при рендеринге в формате webm или mov.
Смотрите пример запроса ↗

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

  1. 01
    Инициализация проекта

    Шаг 0 создаёт PROJECT_DIR = videos/<project-name>/ и запускает hyperframes init с пустым примером и этим skill, полностью пропуская его, если hyperframes.json уже существует.

  2. 02
    Планирование и решение о поиске

    Первое ветвление — нужен ли поиск: «нет» означает форм-категорию с asset_needs: [], «да» означает передачу поисковых запросов в asset_needs[].

  3. 03
    Получение ресурсов при необходимости

    Шаг 2 разрешает ресурсы через media-use в замороженные локальные для проекта пути плюс реестр, и пропускается сразу к дизайну, если asset_needs пуст.

  4. 04
    Дизайн на основе того, что есть

    Второй проход Director выбирает блоки каталога и правила hyperframes-animation и продумывает решения вокруг разрешённых ресурсов, затем финализирует shot plan.

  5. 05
    Компоновка с приоритетом повторного использования

    Builder добавляет блоки каталога с помощью npx hyperframes add и настраивает их на месте, вручную дописывая только пробелы и affordance для asset-fusion, чтобы получить compositions/index.html.

  6. 06
    Снятие proof-снапшотов

    Выберите моменты proof, показывающие начальное состояние, фирменное движение и финальный кадр, затем изучите сгенерированный контактный лист или лист снапшотов.

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

Когда использовать skill motion-graphics

Используйте skill motion-graphics в Claude Code или Codex, когда задача относится к моушн-дизайну и видео данного типа. Применимость и ограничения ниже взяты из собственного файла skill.

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

  • Яркая строка, цитата или заголовок, где движение текста — вся идея.
  • Единая hero-цифра со счётчиком и кольцом.
  • Логотип-стинг или брендовый локап, построенный из собственного логотипа пользователя.
  • Географическая анимация: выделение регионов, соединение мест или приближение к локации.
  • Анимированные твиты, статьи или заголовки, когда поиск предоставляет исходный контент.

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

  • Более длинные, с закадровым текстом или многосценные ролики направляются в другое место.
  • Всё с закадровым текстом или живым видео, а также то, что выходит далеко за пределы формата коротких роликов.
  • Категории, зависящие от поиска, теряют найденные ассеты при недоступности провайдера и переходят в режим без ассетов.
  • Управление Figma через необработанные MCP-инструменты пропускает санитизацию, происхождение данных и привязку брендовых токенов, поэтому этот путь исключён.

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

  • Сам контенткинетическая типографика, статистика, графики, раскрытие логотипа и нижние титры принимают контент, предоставленный пользователем, так что строка, число, данные или логотип исходят от вас, а не из поиска.
  • URL на figma.com, если ассет находится тамСначала запустите /figma для экспорта ассета, брендовых токенов и перевода Motion в GSAP, затем собирайте на основе его результата.
  • Опциональные ключи для получения ассетовGEMINI_API_KEY или GOOGLE_API_KEY для генерации изображений, а также провайдеры asset_scout и поиска для поиска реальных ассетов по веб-страницам, новостям, твитам и asset-fusion.

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

Правила motion-graphics — Skill, который даёт Claude Code и Codex

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

  1. Маршрутизация через /hyperframes

    Входная точка — /hyperframes; этот skill создаёт только короткий, дизайн-ориентированный, без озвучки motion-графический ролик, примерно короче 10 секунд, без голоса за кадром и без живого видео.

  2. Один вопрос, затем сборка

    Workflow автономен по замыслу: максимум один уточняющий вопрос из agents/director.md, затем сборка проходит через верификацию без промежуточного просмотра.

  3. Подтвердите перед обновлением skill

    Спросите пользователя перед запуском команды обновления; это быстрая no-op операция, если версия актуальна, иначе обновляется этот skill и базовые доменные skill-ы, от которых он зависит.

  4. Рендеринг управляется пользователем

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

  5. Никогда не выполняйте init в корне рабочей области

    Никогда не запускайте hyperframes init в корне рабочей области и никогда не вкладывайте ещё одну директорию hyperframes/ внутрь PROJECT_DIR.

  6. Каждая команда — в отдельной подоболочке

    Каждая команда Bash, независимо от того, выдана она основным потоком или сабагентом, является подоболочкой (cd "$PROJECT_DIR" && ...); использование обычного cd не допускается.

  7. Определение имени проекта

    Используйте каталог, указанный пользователем, иначе — короткое имя в kebab-case, образованное из намерения по шаблону <subject>-motion; не базовое имя рабочей области и не временная метка.

  8. Не маскируйте дефект тайминга

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

04 Применение

Установить motion-graphics в Claude Code или Codex

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

Добавить motion-graphics в Claude Code, Codex или ваш агент

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

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

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

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

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

Starter prompt
Make a short motion graphic, about 8 seconds, from [our launch tagline] — kinetic type, motion-first, no narration, using the kinetic-type category and the caption blocks. Then close with a logo sting built from [our logo.svg], and render it to MP4.

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

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

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

  • Запустите lint и check по проекту перед любыми другими действиями; оба выполняются как subshell из PROJECT_DIR.
  • Прежде чем двигаться дальше, проверьте сгенерированный contact- или snapshot-лист.
  • При сбое lint, check или snapshot запустите субагента repair для одного проходного исправления на месте и перезапустите неудавшуюся проверку.
  • Убедитесь, что результат рендера существует, не пуст и имеет нужную длительность, а в передаче указаны имя артефакта, длительность, id кадра и время подтверждения.

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

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

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

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

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

Внутри SKILL.md

  1. motion-graphics — точка входа диспетчеризацииОписывает главную точку входа, автономный процесс, каталог проекта и таблицу фаз от инициализации до рендера.
  2. Категории — разделение по решению о поискеПеречисляет категории форм, не требующие поиска, и категории на основе поиска, выбираемые по возвращённому контенту.
  3. Предварительные требованияПлатформа, системные инструменты, переменная среды GPU для macOS, необязательные API-ключи и их локальные запасные варианты.
  4. ПроцессШаги с 0 по 6: инициализация, планирование, поиск источников, дизайн, сборка, проверка, утверждение, рендер.
  5. Таблица возобновленияС какого шага продолжать для каждого частично выполненного состояния проекта.
  6. Заметки по дизайну (для мейнтейнеров — не читаются при выполнении)Обоснование приоритета ассетов, сопоставление с приоритетом повторного использования, контракт модуля категорий, структура каталогов и регистрация в роутере.
Собственное описание skill
«Короткая дизайнерская моушн-графика, где движение — это сообщение: кинетическая типографика, подсчёт статистики, анимация графиков и данных, логотип-заставка / фирменный блок, нижняя треть / выноска / оверлей для соцсетей, анимированная карта (подсветка регионов, связи между местами, приближение к локации), анимированный твит / новостная статья / заголовок, анимация веб-страницы или интерфейса (скролл, курсор, выноски) или встраивание геометрии реального изображения в график. Обычно до 10 секунд (до ~30 секунд), без закадрового текста или живого субъекта; рендерится в MP4 или прозрачный оверлей. Длиннее / с закадровым текстом / многосценовое → /general-video. Неясно → /hyperframes.»

Описание из вводной части SKILL.md. Полный файл содержит около 15 566 символов. Читать полный файл на GitHub.

Моушн-графика

Запустить motion-graphics на реальной задаче Motion and Video.

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

Терминал
npx skills add https://github.com/heygen-com/hyperframes --skill motion-graphics

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

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

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

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

Для macOS и Windows