Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию анимированных 2D-видео для YouTube и соцсетей с помощью AI-агента Claude Code (CLI / Co-work desktop app). Разбирается гибридный пайплайн: написание кода анимации на HTML/CSS/JS, рендеринг через FFmpeg и Hyperframes skill, локальная генерация голоса через Kokoro TTS, тайминг субтитров через Nvidia Parakeet и генерация ассетов через Runware API.
👤 Кому будет полезно: Вайбкодерам, контент-мейкерам, разработчикам AI-агентов и владельцам YouTube-каналов, которые хотят автоматизировать производство контента без ручного монтажа и дорогостоящих подписок на видеогенераторы.
✨ Что получите: Готовый набор промптов для Claude Code, архитектуру локального пайплайна (TTS + STT + Render) с нулевой стоимостью за озвучку/транскрипцию, а также методику разбиения длинных сценариев на чанки для серийного производства 10–12 роликов в месяц на базовом тарифе Claude Pro ($20/мес).
1. Архитектура генерации анимации через Claude Code: HTML/CSS/JS + Hyperframes + FFmpeg
Контекст: В отличие от диффузионных видеомоделей (Sora, Seedance), Claude не генерирует видеофайлы напрямую через пиксели. Claude является языковой моделью, которая превосходно пишет фронтенд-код: генерирует разметку HTML, стили CSS и логику анимации на JavaScript. Затем сгенерированные сцены покадрово отрисовываются на Canvas и с помощью утилиты FFmpeg собираются в готовый MP4-видеоряд с привязкой к звуковой дорожке. Чтобы агент понимал весь этот процесс, ему подключают специальный набор инструкций (AI skill) под названием Hyperframes.
Тайминг: , ,
Выгода: Полный контроль над векторными элементами, текстом и таймингами без артефактов нейросетевой интерполяции; нулевая стоимость рендеринга на стороне видеомоделей.
Как применить:
Шаг 1: Подготовка среды — Терминал / Bash] — Убедитесь, что в системе установлен консольный инструмент ffmpeg для захвата и склейки кадров.
# Установка FFmpeg на macOS через Homebrewbrew install ffmpeg
Шаг 2: Подключение навыка Hyperframes — Claude Code] — В начале работы укажите AI-агенту использовать открытый репозиторий с инструкциями Hyperframes, чтобы Claude сам настроил таймлайн и рендеринг через Canvas.
Skill: Use hyperframe skill on GitHub to generate the video.
Результат: Claude Code автоматически подтягивает логику рендеринга, структуру таймлайна и алгоритмы сборки кадров через FFmpeg без необходимости вручную писать скрипты склейки.
Контекст: Для синхронизации анимации с голосом AI-агенту требуется аудиодорожка и точный пословный таймстемп (start time / end time каждого слова). Если передать только аудио, агент не сможет синхронизировать появление надписей и персонажей. Использование облачных API (ElevenLabs, Deepgram) требует платных подписок и расходует бюджет. Автор выстраивает полностью бесплатный локальный стек: модель генерации речи Kokoro TTS (24 голоса, пресет af_heart) и модель распознавания Nvidia Parakeet 0.6 через приложение Spokenly, которая работает даже на Apple Silicon Mac M1 с 8 ГБ RAM.
Тайминг: , , ,
Выгода: Экономия 100% затрат на TTS и транскрипцию; идеальная пословная синхронизация субтитров и анимационных триггеров на таймлайне.
Как применить:
Шаг 1: Настройка локального синтеза речи (TTS) — Kokoro TTS] — Установите модель Kokoro локально. Для женской начитки укажите голос af_heart (American Female - Heart).
Шаг 2: Настройка пословной транскрипции (STT) — Spokenly / Nvidia Parakeet] — Установите Spokenly и загрузите легковесную модель Nvidia Parakeet 0.6 для генерации JSON с таймкодами каждого слова.
Шаг 3: Добавление инструкций в промпт — Claude Code] — Укажите агенту пути к локальным инструментам.
Voiceover: Use Kokoro already installed with voice af_heart to create the voiceover.
Transcription: Nvidia Parakeet 0.6 model is already installed. Use it through Spokenly API to generate word-level timestamps.
Результат: Получение готового MP3-файла начитки и синхронизированного JSON-файла с миллисекундными отметками для управления элементами анимации.
3. Оптимизация расхода токенов: вынос генерации графики во внешние API (Runware)
Контекст: Если попросить Claude генерировать сложные фоны и персонажей чистым CSS-кодом, контекстное окно модели моментально переполнится сотнями строк стилей, что приведет к исчерпанию лимита сообщений (Rate Limits) и низкому визуальному качеству. Рациональный подход — делегировать отрисовку растровых ассетов (фонов и стикеров персонажей) специализированным моделям генерации изображений через быстрые API (Runware, FAL AI, Higgsfield), передав Claude API-ключ через переменные окружения.
Тайминг: , ,
Выгода: Снижение расхода токенов Claude на 70–80%, ускорение генерации сцен и повышение качества графики до уровня коммерческих иллюстраций.
Как применить:
Шаг 1: Экспорт API-ключа в конфигурационный файл — Zsh / Bash] — Добавьте ключ Runware в системные переменные, чтобы Claude Code имел к нему доступ.
# Добавление ключа в ~/.zshrc (для macOS/Linux)echo 'export RUNWARE_API_KEY="your_api_key_here"' >> ~/.zshrcsource ~/.zshrc
Шаг 2: Указание параметров модели в промпте — Claude Code] — Задайте использование быстрой модели GPT Image 2.5 Flare в низком/среднем качестве для ускорения сборки драфта.
Visuals: API key is in the .zshrc file. Use image model GPT image 2.5 flare via Runware API. Use low quality for fast generation.
Результат: Claude генерирует фоновые подложки (background plates) и элементы переднего плана (stickers) в формате PNG с прозрачностью через внешний сервис, а в коде оставляет только легковесную анимацию их движения.
4. Промпт-инжиниринг: от статичного слайд-шоу к динамичной 1960s Cartoon анимации
Контекст: Базовый абстрактный промпт приводит к неудачному результату: Claude просто раскладывает статические картинки одну за другой под аудиодорожку с рассинхроном. Чтобы получить настоящую динамику, агенту необходимо явно специфицировать расслоение сцены (отдельно background plates, отдельно движущиеся sticker elements), стиль (например, 1960s Tom and Jerry cartoon), соотношение сторон (16:9), звуковые эффекты (SFX) и фоновую музыку. При этом нужно строго ограничивать полномочия агента по использованию платных внешних API.
Тайминг: , , ,
Выгода: Получение полноценного анимированного ролика с 20+ анимированными элементами, звуковыми акцентами и синхронной музыкой за одну итерацию без скрытых переплат по API.
Как применить:
Шаг 1: Составление комплексного системного промпта — Claude Code CLI] — Скопируйте и выполните итоговый проверенный промпт:
Task: Create an animated video of about 40 seconds on the topic "The Hare and the Tortoise story".Aspect Ratio: 16:9 for YouTube.Style: 1960s cartoon style (Tom & Jerry aesthetic).Skill: Use hyperframe skill on GitHub to generate and render the video.Voiceover: Use locally installed Kokoro TTS with voice af_heart.Transcription: Use locally installed Nvidia Parakeet 0.6 model via Spokenly API for word-level sync.Visuals: API key is in the .zshrc file. Generate isolated sticker elements and separate background plates using Runware API (model: GPT image 2.5 flare).Animation Requirements:- Do NOT make a static slideshow.- Create multi-layered scenes: animated foreground sticker elements moving over background plates.- Synchronize animations and visual triggers strictly with the voiceover timestamps.- Add dynamic sound effects (SFX) and background music bed synchronized with action points.
Результат: Сгенерированное видео на 40 секунд, содержащее 22 анимированных стикера, 5 фоновых подложек, 22 синхронизированных звуковых эффекта (SFX) и фоновую музыкальную подложку.
5. Экономика и лимиты: расчет производительности на тарифе Claude Pro ($20/мес)
Контекст: Многие опасаются, что генерация кода анимации через Claude Opus / Sonnet быстро сожжет лимиты подписки. Практический замер автора показывает: на генерацию первого 40-секундного ролика ушло 13% от 5-часового лимита и 2% от недельного. На вторую, более сложную версию (со стикерами и SFX) ушло еще 11% 5-часового лимита и 1% недельного. Это позволяет масштабировать производство длинных роликов без перехода на дорогостоящие Enterprise-планы.
Тайминг: , ,
Выгода: Четкое понимание пропускной способности подписки Claude Pro: возможность собирать от 10 до 12 готовых YouTube-видео хронометражем по 5–8 минут в месяц за фиксированные $20/мес.
Метрики расхода квоты Claude Pro:
Простой 40-сек ролик (статичные сцены): ~13% от 5-часового окна / 2% от недели.
Сложный 40-сек ролик (22 анимированных ассета + SFX): ~11% от 5-часового окна / 1% от недели.
Время генерации и сборки сцены: ~10–15 минут.
Месячная производительность на аккаунт: 10–12 полноценных роликов по 5–8 минут (при разбивке на чанки).
6. Промышленная автоматизация: модульный конвейер и мультиагентный рендеринг
Контекст: Попытка скормить нейросети длинный сценарий (на 5–10 минут) целиком приводит к галлюцинациям, потере контекста и сбоям в коде JavaScript. Для создания длинных видео применяется архитектура сегментации: сценарий нарезается на смысловые абзацы по 30–40 секунд с сохранением непрерывности персонажей (character continuity), после чего для каждого блока генерируются отдельные брифы и запускается рендеринг через доступных AI-агентов.
Тайминг: , , ,
Выгода: Бессбойная генерация видео любой длительности; возможность параллельного рендеринга через альтернативные движки при исчерпании лимитов Claude.
Архитектура пайплайна по шагам:
Входной скрипт (Script Input): Загрузка полного текста сценария в пайплайн.
Озвучка и транскрипция (Voice & STT): Пакетная генерация аудио через Kokoro TTS и пословных таймкодов через Spokenly.
Сегментация (Script Chunking): Разбиение сценария на группы абзацев по 30–40 секунд для изоляции контекста анимации.
Генерация брифов (Brief Planning): Отправка чанков в LLM (Gemini / OpenAI / Claude) для создания структурированных промптов анимации.
Мультиагентный рендеринг (Render Engine): Распределение задач по доступным агентам (Claude Code, Antigravity, Codex, OpenCode) для сборки финальных сцен и их последующего склеивания в единый фильм.
Результат: Масштабируемый пайплайн, способный генерировать месячный объем контента для YouTube за 1 день в полуавтоматическом режиме.
FAQ
В: Почему нельзя использовать Claude для генерации видео напрямую, как Runway или Sora? О: Claude является большой языковой моделью (LLM) и умеет генерировать только текст и код. Он не создает пиксели видео напрямик. Вместо этого Claude пишет код анимации на HTML/CSS/JavaScript, рендерит кадры в браузере/canvas и склеивает их в видео через FFmpeg.
В: Что такое Hyperframes и зачем он нужен? О: Hyperframes — это специализированный набор инструкций (AI Skill), размещенный на GitHub. Он объясняет Claude, как правильно структурировать слои, запускать анимацию элементов во времени, работать с HTML5 Canvas и синхронизировать отрисовку кадров с аудиодорожкой.
В: Можно ли полностью убрать платные API из этого пайплайна? О: Да. Озвучку можно генерировать локально через Kokoro TTS, распознавание таймингов делать локально через Nvidia Parakeet в Spokenly, а визуальные элементы создавать встроенными CSS/SVG средствами самого Claude (хотя для сложных фонов автор рекомендует недорогие API вроде Runware).
В: Почему первая попытка автора сгенерировать видео выдала статичное слайд-шоу? О: В первом промпте задача была сформулирована слишком абстрактно ("create animated video"). Claude оптимизировал задачу простейшим путем: создал полноэкранные картинки и наложил поверх звук. Для живой анимации нужно явно требовать разделения на анимированные стикеры (stickers), фоны (background plates) и указывать динамические стили.
В: Зачем Claude обратился к сервису Magnific, если автор его об этом не просил? О: Claude Code имеет доступ к переменным окружения (в файле .zshrc). Когда в расширенном задании появилось требование добавить звуковые эффекты (SFX) и музыку, агент попытался вызвать ElevenLabs. Обнаружив отсутствие прав на генерацию музыки у этого ключа, Claude самостоятельно нашел в .zshrc ключ Magnific и применил его. Чтобы избежать непредвиденных списаний, в промпте нужно строго ограничивать разрешенные API.
В: Почему нельзя сразу отправить 10-минутный сценарий в Claude Code? О: Длинный контекст с сотнями строк кода анимации перегружает память агента, что неизбежно ведет к сбоям в коде, галлюцинациям и рассинхрону аудио. Надежнее делить сценарий на независимые смысловые чанки длительностью по 30–40 секунд.
Ресурсы и ссылки
Claude Code — агентный CLI-инструмент от Anthropic для написания и выполнения кода — упомянут в видео.
Hyperframes — AI-скилл на GitHub для создания кода анимаций и рендеринга через Canvas — упомянут в видео.
Kokoro TTS — локальная легковесная модель синтеза речи с открытым исходным кодом — упомянута в видео.
Nvidia Parakeet 0.6 — локальная модель распознавания речи для пословного тайминга — упомянута в видео.
Spokenly — десктопное приложение для запуска локальных моделей распознавания речи (STT) на Mac — упомянуто в видео.
Runware — высокоскоростной API-провайдер для генерации изображений (использовалась модель GPT image 2.5 flare) — упомянут в видео.
FFmpeg — утилита с открытым исходным кодом для обработки, покадрового захвата и склейки видео/аудио — упомянута в видео.
ElevenLabs — облачный сервис генерации голоса и SFX — упомянут в видео.
Magnific AI — сервис генерации визуальных и аудио ассетов — упомянут в видео.
Конспект создан на основе видео «How to Make Engaging Videos with Claude Code (Full Tutorial)» канала GSB. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=as6qAlnM8UE
