Примечание автора: сейчас есть два основных способа поручить программирующему агенту создание видео: покадрово отрендерить MP4 из кода или создать веб-презентацию и записать экран. В статье сравним принципы работы, результаты и сценарии применения обоих подходов, а также разберём, как выбрать подходящий за 5 шагов.
Многие разработчики уже привыкли поручать Claude Code, Cursor и Codex написание страниц и скриптов, но идея «попросить программирующего агента сделать видео» всё ещё вызывает сомнения. Типичный вопрос: агент ведь только пишет код — как он создаст видео с нужным ритмом и звуком, готовое к публикации? В этой статье мы разберём два подхода: покадровый рендеринг из кода и запись веб-презентации с экрана, — чтобы вы могли выбрать подходящий для своей задачи.
Это не очередная статья про «создание видео с помощью ИИ в один клик». Оба подхода основаны на реальных навыках из набора garden-skills с открытым исходным кодом: motion-showreel отвечает за покадровый рендеринг из кода, а web-video-presentation — за запись веб-презентации с экрана. Для каждого из них чётко определены рабочий процесс, контрольные точки и итоговые материалы.
Что вы узнаете: как работают оба подхода и в чём их ограничения, как за 5 шагов выбрать подход для своего видеопроекта и как настроить подходящую большую языковую модель для программирующего агента.
Два способа создавать видео с помощью программирующего агента
Для начала разберёмся в главных различиях между двумя подходами. Если коротко, при покадровом рендеринге агент выступает режиссёром анимации и рендер-фермой, а при записи веб-презентации — разработчиком презентации, которую человек записывает с экрана.
| Критерий | Покадровый рендеринг кодом (motion-showreel) | Запись веб-презентации (web-video-presentation) |
|---|---|---|
| Принцип работы | Детерминированная страница render(t) захватывается покадрово по временной шкале |
Веб-приложение на Vite + React + TypeScript: переходы выполняются мышью или клавиатурой, а экран записывается |
| Результат | Готовое видео в MP4 + редактируемый исходный код | Проект веб-презентации в формате 16:9, готовый к записи |
| Типичная длительность | Короткие ролики — 5–60 секунд, длинные видео с разделением на главы — до примерно 20 минут | Зависит от сценария: презентация проходит по главам и шагам |
| Работа со звуком | Изображение, музыка, звуковые эффекты и закадровый голос используют общую временную шкалу | При необходимости добавляется синтезированная закадровая речь: каждому шагу презентации соответствует фрагмент повествования |
| Лучше всего подходит для | Рекламных роликов продуктов, заставок с логотипом, анимированной типографики, зацикленной анимации | Обучающих материалов, превращения статей в видео, демонстраций продуктов, технических докладов |
Как работает покадровый рендеринг из кода
Ключевой принцип motion-showreel — детерминированность. Страница, созданная агентом, предоставляет функцию render(t): для заданного времени t она рисует один и тот же кадр. Рендерер вызывает её для каждого кадра с заданной частотой и захватывает изображение. Одна и та же страница позволяет создавать статичные кадры, контактные листы, стилевые доски для трёх направлений, прокси-версию и мастер-версию. Поэтому от предложения до готового ролика используется один источник — не возникает ситуации, когда «превью выглядит хорошо, а финал получается другим». Размытие в движении, суперсэмплинг и плёночное зерно включаются параметрами рендеринга.
Звук в этом процессе привязан к той же временной шкале: монтажные склейки, сильные доли и звуковые эффекты используют общие временные метки. Музыку можно создать с помощью встроенного синтезатора без зависимостей или синтезировать на основе фортепианных сэмплов Tone.js. Можно также использовать собственную дорожку пользователя с определением битов и дропов. Диктор озвучивает только предоставленный пользователем сценарий, а изображение подстраивается под реальные временные метки речи, а не наоборот.
Как работает запись веб-презентации
web-video-presentation использует другой подход: видео рассматривается как «презентация в движении». Для неё задаётся сцена размером 1920×1080, которая масштабируется под область просмотра, чтобы картинка при записи оставалась стабильной. Презентацией управляет указатель (chapter, step): каждый щелчок или нажатие клавиши переводит её к следующему визуальному шагу, соответствующему одной фразе диктора.
Этот процесс больше похож на традиционную схему «написать сценарий → сделать слайды → записать». Сначала навык перерабатывает исходную статью в текст для озвучки, затем сопоставляет фрагменты сценария полноэкранным сценам. На этапах работы со сценарием, темой, планом, способом реализации и необязательной аудиодорожкой процесс останавливается для вашего подтверждения. Во время записи элементы управления прогрессом появляются только при наведении мыши, поэтому сцена остаётся чистой.
Сравнение двух рабочих процессов: как программирующий агент создаёт видео
Если смотреть только на результат, оба подхода дают видеофайл и кажутся похожими. Но сам процесс предъявляет совершенно разные требования к человеку и модели. Сравним их по восьми параметрам.
| Параметр | Покадровый рендеринг с помощью кода | Запись экрана с веб-презентацией |
|---|---|---|
| Точки проверки человеком | 2: согласование требований и стилевого кадра | 5: сценарий, тема, план, режим реализации, аудио при необходимости |
| Стили | Библиотека из 43 стилей: швейцарский редакционный, тушь, синтвейв, мягкий 3D, кинозаставка, современный китайский стиль и другие | 23 встроенные темы: редакционный стиль, терминал, инженерный чертёж, швейцарский интернациональный стиль и другие |
| Что определяет стиль | Внешний вид, движение, язык камеры, звуковую палитру | Дизайн-токены, управляющие цветами, шрифтами и компоновкой |
| Озвучка | Gemini / MiniMax TTS, озвучивается только пользовательский сценарий; можно использовать и реальную запись | Подключаемые TTS-сервисы: встроены MiniMax mmx-cli и OpenAI TTS, также есть примеры подключения ElevenLabs, edge-tts, Azure, Google Cloud и macOS say |
| Музыка и звуковые эффекты | Из независимых источников, автоматически приглушаются во время речи | Основное внимание уделяется закадровому тексту, музыка не в приоритете |
| Проверка качества | Размер, частота кадров, длительность, число кадров, чёрные кадры, громкость, истинный пиковый уровень, стык цикла и детерминированность — все проверки должны получить PASS | Зависит от предварительного просмотра человеком перед записью экрана |
| Нужна ли запись человеком | Нет, MP4 рендерится напрямую | Да, веб-страницу нужно записать с помощью инструмента для записи экрана |
| Текущая версия | v0.1.0 | v1.2.2 |
Здесь легко упустить важную деталь: motion-showreel строго разделяет техническую приёмку и эстетическую оценку. Первая опирается на жёсткие критерии, которые можно проверить автоматически и которые обязательно должны быть выполнены. Вторая остаётся за пользователем: он оценивает результат и принимает окончательное решение. Благодаря этому агент не пропустит чёрные кадры или превышение уровня громкости только потому, что видео «выглядит хорошо».
При записи веб-презентации больше контроля остаётся у человека. Пять точек проверки могут показаться лишними, но для объясняющих видео они необходимы: формулировки в сценарии и деление на главы определяют качество материала, поэтому их лучше согласовать с автором.
Как быстро начать делать видео с помощью кодинг-агента
Шаг 1. Установите навыки
Оба навыка соответствуют стандарту SKILL.md и устанавливаются в Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI, OpenCode и другие среды. Ниже перечислены основные способы установки. Команды можно вводить прямо в терминале или диалоге с агентом.
| Способ установки | Что делать | Кому подходит |
|---|---|---|
| skills CLI | Выполните npx skills add ConardLi/garden-skills -s motion-showreel или замените значение после -s на web-video-presentation; с помощью -a claude-code можно указать агента |
Пользователям любых агентов — установка одной командой |
| Магазин плагинов Claude Code | Сначала выполните /plugin marketplace add ConardLi/garden-skills, затем установите motion-showreel-skills@garden-skills или presentation-skills@garden-skills |
Пользователям Claude Code |
| ZIP-архив конкретной версии из Releases | Скачайте ZIP нужной версии, проверьте SHA-256 и распакуйте в .claude/skills/, .agents/skills/ или .codex/skills/ |
Для CI, офлайн-сред и команд, которым нужна воспроизводимость |
| Копирование вручную | Клонируйте репозиторий и скопируйте каталог навыка в каталог навыков проекта | Разработчикам, которые хотят доработать навык |
Шаг 2: Подготовьте модель для агента
При создании видео программирующий агент в основном пишет код, разбирается в требованиях и проверяет изображение. Поэтому важнее всего способности модели к программированию и её работа с длинным контекстом. Если агент поддерживает пользовательские интерфейсы, достаточно настроить два параметра: API Key и base_url. Для формата, совместимого с OpenAI, в base_url можно указать https://api.apiyi.com/v1. Адрес подключения и параметры для формата Anthropic смотрите в центре документации APIYI: docs.apiyi.com.
Шаг 3: Начните с чётко сформулированной задачи
Если сразу указать ключевые детали, придётся меньше времени тратить на уточнения. Например, для покадрового рендеринга с помощью кода навык сам уточнит тему, длительность, ориентацию видео, источники музыки и звуковых эффектов, а также режим закадрового озвучивания. Для записи веб-презентации понадобятся исходная статья или сценарий и примерное деление на главы.
- Пример запроса для покадрового рендеринга с помощью кода: создать горизонтальный 30-секундный ролик о продукте — инструменте для разработчиков. Стиль — синтвейв, музыка — встроенный синтезатор, без закадрового голоса.
- Пример запроса для записи веб-презентации: превратить техническую статью в восьмиминутное видео с объяснением, оформить в стиле инженерных чертежей и добавить закадровый голос на китайском языке.
🚀 Быстрый старт: если вы ещё не настроили интерфейс модели для агента, зарегистрируйтесь на APIYI apiyi.com и получите тестовый лимит. Платформа совместима с форматами интерфейсов OpenAI и Anthropic, поэтому к ней можно напрямую подключить как агенты вроде Claude Code, так и собственные скрипты. Это позволит сначала создать короткий пробный ролик, а затем выбрать дальнейший путь.
Шаг четвёртый: внимательно принимайте решения на контрольных этапах
При покадровом рендеринге с помощью кода, если стиль не задан, на этапе стилевых кадров предложат три заметно разных варианта. Это лучший момент выбрать характер будущего видео с минимальными затратами. При записи веб-презентации реализация начинается только после утверждения плана — на этом этапе менять разделы проще всего. В обоих случаях основные замечания лучше высказывать на контрольных этапах, а не переделывать готовое видео.
Шаг пятый: приёмка и передача результата
При покадровом рендеринге с помощью кода вы получите MP4 и редактируемый исходный код. Исходники стоит сохранить: чтобы позже изменить текст или цвета, достаточно будет заново выполнить рендеринг. В случае веб-презентации вы получите проект, который нужно записать по разделам с помощью инструмента для записи экрана. При необходимости аудио, созданное с помощью TTS, можно совместить с записью в программе для монтажа.
Выбор модели для программирующего агента, создающего видео
Оба навыка не привязаны к конкретной модели, но результат во многом зависит от большой языковой модели, которая управляет агентом. В таблице собраны подходящие модели, доступные через APIYI. Все цены взяты со страницы docs.apiyi.com/models; единицы и условия тарификации уточняйте там же.
| Модель | Роль в задачах из статьи | Цены APIYI (вход / выход / кэш) | Платформа |
|---|---|---|---|
| claude-opus-5-5 | Сложная анимация, планирование глав длинного видео, основная работа с кодом | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | Основная модель для повседневного программирования, хороший баланс цены и качества | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | Переработка длинных текстов в сценарии озвучки, систематизация материалов на китайском | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | Простые задачи: мелкие правки и подготовка субтитров в большом объёме | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | Генерация обложек, эталонных изображений стиля и материалов для видео | Текстовый ввод $5 / ввод изображений $8, вывод $30 | APIYI apiyi.com |
Отдельно о синтезе речи: в motion-showreel встроены Gemini и MiniMax TTS, а в web-video-presentation — MiniMax mmx-cli и OpenAI TTS. Если этих TTS-моделей нет на странице цен APIYI, значит, они пока недоступны на платформе; мы постараемся добавить их как можно скорее. До этого используйте сервис соответствующего провайдера согласно документации навыка или выберите другое поддерживаемое решение для синтеза речи. Модели серии ERNIE от Baidu также пока недоступны в APIYI — если они нужны в вашем процессе, их придётся подключить отдельно.
💰 Как снизить расходы: при создании видео агент многократно читает один и тот же бриф, описание стиля и код проекта, поэтому частота попаданий в кэш обычно высока. Модель с отдельным тарифом на кэш поможет заметно сократить расходы при многократных итерациях. Сравнить цены для каждой модели можно на странице APIYI docs.apiyi.com/models.
Решение за 5 шагов: какой способ создания видео выбрать для программирующего агента
Выше мы разобрали принципы и инструменты. Теперь сведём выбор к пяти вопросам: отвечайте на них по порядку, чтобы найти подходящий способ.
- Что важнее: понятно объяснить или впечатлить картинкой? Если главное — передать информацию, выбирайте запись экрана с веб-презентацией. Если нужен яркий визуальный эффект — покадровый рендеринг кодом.
- Какова длительность видео? Для роликов до 60 секунд хорошо подходит покадровый рендеринг. Лекции длиной от нескольких десятков минут проще поддерживать в виде записи веб-презентации.
- Нужна ли точная синхронизация звука и изображения? Монтаж в такт, точное попадание звуковых эффектов и бесшовное зацикливание стабильно обеспечит только покадровый рендеринг с общей временной шкалой.
- Готовы записывать экран вручную? Если нужен полностью автоматический процесс с возможностью повторного рендеринга в CI, выбирайте покадровый рендеринг. Если готовы самостоятельно вести рассказ или запись в нужном темпе, веб-презентация даст больше гибкости.
- Придётся ли часто вносить изменения? В обоих случаях исходный код сохраняется, но правки страницы веб-презентации видны сразу, а при покадровом рендеринге видео придётся создавать заново.
| Типичный сценарий | Рекомендуемый способ | Почему |
|---|---|---|
| 30-секундный ролик о запуске продукта | Покадровый рендеринг кодом | Богатый выбор стилей, общая временная шкала для звука и изображения, готовый MP4 на выходе |
| Заставка с логотипом / титульная последовательность | Покадровый рендеринг кодом | Детерминированный рендеринг гарантирует одинаковый результат при каждом запуске |
| Видео по технической статье | Запись экрана с веб-презентацией | Автоматическая переработка сценария дикторского текста, пошаговая подача |
| Раздел онлайн-курса | Запись экрана с веб-презентацией | Единый стиль, понятная структура разделов, удобно обновлять отдельные уроки |
| Короткий годовой обзор с дикторским текстом | Покадровый рендеринг кодом | Изображение следует временным меткам реальной речи; поддерживаются длинные видео с разделами |
| Демонстрация функций продукта | Запись экрана с веб-презентацией | Управление нажатием, контроль темпа демонстрации |
💡 Совет по выбору: если сомневаетесь, дайте агенту одно и то же техническое задание и попросите создать 15-секундный ролик и одну страницу презентации. Затем сравните качество результата и затраты на доработку. Через APIYI apiyi.com можно с одним ключом переключаться между Claude, Kimi, DeepSeek и другими моделями — заодно будет удобно сравнить, как разные модели справляются с вашим проектом.
Частые вопросы FAQ
Q1: Что значит «поручить программирующему агенту создание видео»?
Это значит поручить Claude Code, Cursor, Codex или другому программирующему агенту создать видео с помощью кода. Вместо прямого вызова модели генерации видео агент использует веб-страницы, анимацию и скрипты рендеринга для сборки изображения и звука. Результат можно редактировать и воспроизводить.
Q2: Чем покадровый рендеринг с помощью кода отличается от записи экрана с веб-презентацией?
Покадровый рендеринг даёт больше возможностей для визуальных эффектов и синхронизации звука с изображением, а на выходе сразу получается MP4. Но он лучше подходит для коротких роликов. Запись экрана с веб-презентацией удобнее для структурированного объяснения и дальнейшего редактирования, но её нужно делать вручную. Первый подход похож на работу студии моушн-дизайна, второй — на создание презентации для выступления.
Q3: Какие сейчас версии у этих двух навыков и какие агенты они поддерживают?
Согласно репозиторию garden-skills, текущая версия motion-showreel — v0.1.0, а web-video-presentation — v1.2.2. Оба навыка соответствуют спецификации SKILL.md. По официальным данным, они протестированы в Claude Code, Claude.ai, Cursor, Codex CLI, Gemini CLI и OpenCode.
Q4: Для каких задач этот подход подходит лучше всего?
— **Продвижение продуктов**: короткие ролики перед запуском, анимация ключевых функций.
— **Визуальный стиль бренда**: анимация логотипа, заставки в начале и конце ролика, плакаты с динамической типографикой.
— **Обучающие материалы**: видео по техническим статьям, разделы курсов, внутреннее обучение.
— **Контент для разработчиков**: объяснение архитектуры, демонстрация инструментов, знакомство с open-source проектами.
Q5: Как настроить интерфейс модели для программирующего агента?
Зарегистрируйтесь на APIYI apiyi.com и создайте API-ключ, затем укажите его и base_url в настройках агента или скрипта. APIYI совместим с форматами интерфейсов OpenAI и Anthropic. Адреса и параметры указаны в центре документации docs.apiyi.com, актуальные цены на модели — на странице docs.apiyi.com/models.
Q6: Может ли агент сам написать текст для озвучки?
Эти два навыка работают по-разному. TTS в motion-showreel озвучивает только текст, предоставленный пользователем, чтобы агент не придумывал реплики самостоятельно. А web-video-presentation перерабатывает исходную статью в текст для озвучки, но его обязательно нужно подтвердить на контрольном этапе проверки сценария. Можно сначала подготовить черновик с помощью kimi-k3.1-pro или claude-sonnet-5-5 на APIYI, а затем самостоятельно его проверить.
Q7: Какие ограничения есть у этих двух подходов?
Покадровый рендеринг с помощью кода зависит от захвата каждого кадра в браузере, поэтому создание длинных видео занимает много времени. Сложные 3D-эффекты и эффекты частиц заметно увеличивают время рендеринга. Качество записи веб-презентации зависит от инструмента записи экрана и действий оператора, поэтому полностью автоматизировать процесс сложно. Кроме того, некоторые встроенные TTS-сервисы нужно подключать отдельно. Если нужной модели нет на странице цен APIYI, значит, она пока недоступна.
Q8: Можно ли сочетать оба подхода?
Да, можно — и так делают довольно часто. Например, с помощью покадрового рендеринга создают 10-секундную заставку и переходы между разделами, основную часть записывают с экрана в виде веб-презентации, а затем собирают всё в видеоредакторе. Оба подхода основаны на веб-технологиях, поэтому можно использовать общую цветовую палитру и шрифты.
Создание видео с помощью программирующего агента: главное
- Два подхода принципиально различаются: покадровый рендеринг сразу создаёт MP4, а веб-презентацию нужно записывать с экрана вручную.
- Покадровый рендеринг опирается на детерминированность: одна и та же страница
render(t)создаёт и превью, и мастер-файл, обеспечивая воспроизводимость результата. - Веб-презентация опирается на структуру: одному визуальному шагу соответствует одна фраза закадрового текста — это удобно для длинных объяснений.
- Контрольные точки влияют на качество: 2 точки подходят, когда важнее визуальная часть, а 5 — когда приоритет у содержания.
- Техническая приёмка отделена от эстетической оценки: все проверки технических показателей, включая чёрные кадры, громкость и число кадров, должны получить статус PASS.
- Выбор модели влияет на стоимость: модели для работы агента можно подключать через APIYI; актуальные цены указаны на docs.apiyi.com/models.
Итоги
Чтобы создавать видео с помощью программирующего агента, важно не столько выяснить, возможно ли это, сколько выбрать подходящий путь:
- Покадровый рендеринг кодом: подходит для коротких роликов, заставок и динамичных визуальных работ. Звук и изображение синхронизируются, а на выходе сразу получается готовое видео.
- Запись экрана с веб-презентацией: подходит для обучающих материалов, курсов и превращения статей в видео. Такую структуру легко поддерживать и редактировать.
- Выбор за 5 шагов: определите цель контента, длительность, требования к синхронизации звука и изображения, допустимость записи экрана и частоту правок.
Для начала стоит пройти весь процесс на 15-секундном пробном ролике, а затем переходить к полноценному проекту. Для работы с моделями рекомендуем APIYI apiyi.com: через единый интерфейс можно вызывать Claude, Kimi, DeepSeek и модели серии GPT Image. Интерфейс совместим с форматами OpenAI и Anthropic. Актуальные цены указаны на странице с тарифами.
📚 Источники
- GitHub — garden-skills: репозиторий с навыками motion-showreel и web-video-presentation
- Ссылка:
github.com/ConardLi/garden-skills -
Описание: README, SKILL.md и инструкции по установке обоих навыков
-
Спецификация Agent Skills: описание формата SKILL.md
- Ссылка:
agentskills.io -
Описание: структура каталогов навыков и механизм их загрузки агентом по мере необходимости
-
Центр документации APIYI: инструкции по подключению к API
- Ссылка:
docs.apiyi.com -
Описание: параметры подключения в форматах, совместимых с OpenAI и Anthropic
-
Страница цен на модели APIYI: актуальная стоимость использования моделей
- Ссылка:
docs.apiyi.com/models - Описание: все цены в статье приведены на основе данных этой страницы
Автор: техническая команда APIYI
Технические вопросы: свяжитесь с нами через главную страницу сайта APIYI. Дополнительные материалы по подключению доступны в центре документации docs.apiyi.com.
