product-motion
Короткие ролики о фичах продукта в стиле Linear и Stripe. Экраны и надписи агент берёт из кода вашего проекта.
music.py. Озвучки нет, субтитры идут отдельной дорожкой.Что делает и для кого
Попросите агента: «сделай ролик на 30 секунд про экран поиска». Он соберёт короткий ролик о фиче: в кадре интерфейс продукта, курсор нажимает, текст печатается, метки встают под фрагментами ввода, карточки появляются каскадом, камера ведёт взгляд, субтитры называют происходящее.
Скилл для тех, кто делает продукт и хочет показать фичу: обучающий ролик для пользователей, промо, материал для инвесторов или видео на лендинг. Экраны и надписи агент берёт из кода или прототипа текущего проекта, стиль — из его бренд-профиля. Язык реплик — любой.
Как работает
- 01
Бриф. Фича, длительность, аудитория и назначение, язык, форматы. Агент задаёт не больше двух вопросов за раз, остальное — умолчания, названные в ответе: 30–35 секунд на одну фичу, 16:9.
- 02
Факты из кода проекта. Экраны, точные надписи, плейсхолдеры, кнопки и состояния — из кода, прототипа,
docs/и скриншотов. Чего нет в продукте, того нет и в ролике. Данные в кадре вымышленные. - 03
Бренд-профиль. Один раз на проект: цвета, шрифты с проверенными правами и логотипы из кода собираются в
motion/brand/. До первого ролика агент показывает кадр-образец. - 04
Сценарий. Таблица «таймкод · что в кадре · камера · реплика», 1,3–1,6 слова на секунду. Ролик длиннее 30 секунд агент собирает только после вашего «ок».
- 05
Сцены. HTML-страница, где кадр — функция времени
render(t). События на экране привязаны к словам реплик. - 06
Проверка кадрами. До полного рендера:
verify_scene.pyпроверяет шрифт, повторяемость кадров, субтитры и финальный кадр, контактные листы показывают ключевые моменты в каждом формате. - 07
Озвучка. Голос скилл не синтезирует. Он готовит текст и промт для Gemini TTS, а присланную запись раскладывает по словам: субтитры и события встают на реальное время слов.
- 08
Музыка. Черновой синтез по плану ролика или ваш трек на таймлайне. Под голосом музыка приглушается.
- 09
Сборка и проверка. Покадровый рендер через Playwright и ffmpeg, сведение до −16 LUFS, проверка готовых файлов: размер кадра, число кадров, цвет, громкость. По просьбе — материалы для плеера на сайте.
Что на выходе
Принципы
- Кадр — функция времени
- Никаких CSS-анимаций, таймеров и записи экрана. Нет рывков и рассинхрона, любой момент проверяется отдельным кадром.
- Только то, что есть в продукте
- Экраны и надписи — из проекта. Придуманное для сцены агент называет вам для сверки.
- Стиль продукта, а не скилла
- Цвета, шрифты и логотипы — из бренд-профиля проекта. Нейтральный профиль скилла — только для черновика.
- Голос не синтезируем сами
- Локальные синтезаторы речи звучат роботом. Голос — из Gemini TTS или ваша запись.
- Сначала глазами, потом рендер
- Ошибки композиции дешевле всего ловить на отдельных кадрах.
- Решения не угадываем
- Язык, форматы, ускорение, музыка и публикация — из брифа или вопроса.
Требования к окружению
Скрипт check_env.py печатает, чего не хватает и как это поставить. Зависимости удобнее держать в venv проекта.
Как установить и запустить
Скопируйте папку скилла целиком: одного SKILL.md недостаточно, скилл использует свои скрипты и шаблоны.
git clone https://github.com/dyachkovp/agent-skills.git
# Claude Code
mkdir -p ~/.claude/skills
cp -R agent-skills/product-motion ~/.claude/skills/
# Codex
mkdir -p ~/.agents/skills
cp -R agent-skills/product-motion ~/.agents/skills/Окружение — в venv проекта, где будет ролик:
python3 -m venv .venv && . .venv/bin/activate
pip install playwright numpy scipy pillow
python -m playwright install chromium
python3 ~/.claude/skills/product-motion/scripts/check_env.pyПерезапустите агента и попросите ролик про фичу. Агент задаст вопросы по брифу, покажет сценарий и кадры, а после рендера отдаст файлы.