Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию профессионального видеомонтажа и сложного моушн-дизайна за считанные минуты с помощью связки Claude AI, CapCut и программного фреймворка Remotion. Разбирается полный цикл: от быстрой цветокоррекции через сгенерированные ИИ LUT-файлы до создания анимированных счетчиков, абстрактных фонов, интерактивной UI-графики и 3D-анимации карт маршрутов.
👤 Кому будет полезно: Вайбкодерам, контент-мейкерам, соло-фаундерам, маркетологам и видеомонтажерам, которые хотят генерировать премиальную анимацию и графику программным путем без покупки дорогих плагинов и многочасового рендера в Adobe After Effects.
✨ Что получите: Готовую рабочую связку инструментов (Claude Code + Remotion + CapCut), набор системных промптов и алгоритм генерации графических ассетов с прозрачным альфа-каналом для моментального наложения на таймлайн.
1. Цветокоррекция за секунды: генерация кастомных 3D LUT через текстовые промпты
Контекст: Съемка на камеры в плоских профилях (Log/Flat) требует обязательной цветокоррекции, на которую редакторы тратят часы ручной настройки цветовых кругов (Color Wheels), часто получая блеклое изображение. Стандартное решение — покупка паков LUT или наем колориста. Автор предлагает генерировать файлы .cube (LUT — Lookup Table) прямо в диалоге с Claude. LUT представляет собой готовую инструкцию по переназначению оттенков, которую Claude компилирует в файл, поддерживаемый любым видеоредактором, включая бесплатный CapCut.
Тайминг:[01:08], [01:37], [02:00]
Выгода: Экономия от $50 до $300 на покупке шаблонных LUT-пакетов; мгновенный подбор стилистики (пастель, cinematic, теплая кожа) без необходимости глубоко изучать DaVinci Resolve или Lumetri Color.
Как применить:
Шаг 1: Формирование запроса на цветовую гамму — Claude AI (бесплатная или Pro-версия) — Опишите желаемую эстетику кадра. Укажите характер теней, сплит-тонирование и тон кожи.
Шаг 2: Генерация и скачивание .cube — Claude AI — Отправьте промпт в чат:
Please generate a clean soft pastel LUT file for my YouTube videos. Cinematic and clean.
Шаг 3: Корректировка формулы (при необходимости) — Claude AI — Если результат дает паразитный оттенок (например, избыточный teal в тенях), попросите скорректировать рецепт:
Create a version without the teal tint in shadows, keep skin tones soft and natural.
Шаг 4: Импорт и настройка интенсивности — CapCut Desktop — Перейдите во вкладку Adjustment -> LUT -> нажмите Import и выберите загруженный .cube файл. Перетащите LUT на верхнюю дорожку над футажом и выставьте интенсивность (Strength) на уровень 50%, чтобы получить мягкий журнальный вид без перенасыщения.
Результат: Готовый сбалансированный цветовой грейд всего исходника за 2 минуты с возможностью тонкой регулировки прозрачности слоя.
2. Анимация динамического счетчика чисел без кейфреймов через хак с субтитрами SRT
Контекст: Популярный в динамичных YouTube-видео (стиль MrBeast) эффект крутящихся/нарастающих цифр со знаком валюты обычно требует проставления сотен ключевых кадров (keyframes) в After Effects или сложных выражений (expressions). Если шаблон ломается, проект крашится. Автор нашел нестандартное решение: сгенерировать последовательность чисел в виде файла субтитров .srt с ультракоротким таймингом (0.1 сек на кадр) и использовать движок титров самого видеоредактора.
Тайминг:[02:40], [03:20], [03:56]
Выгода: Сокращение времени создания эффекта с 60 минут ручной анимации до 2 минут. Полная свобода изменения шрифта, цвета и обводки средствами CapCut.
Как применить:
Шаг 1: Генерация SRT с инкрементом — Claude AI — Запросите у модели генерацию файла субтитров с нужным диапазоном и шагом:
Generate an SRT file for me with numbers counting from 0 to 600. Make each subtitle .1 seconds long and add a dollar sign in front of each.
Шаг 2: Экспорт и наложение — CapCut — Скачайте полученный .srt файл из чата Claude и перетащите его прямо на таймлайн CapCut.
Шаг 3: Стилизация шрифта — CapCut — Выделите дорожку субтитров, задайте жирный шрифт, цвет, размер и тень по вкусу.
Шаг 4: Ускорение через Compound Clip — CapCut — Так как 600 субтитров по 0.1 секунды займут 60 секунд таймлайна, выделите все созданные плашки субтитров, нажмите правой кнопкой мыши и выберите Create compound clip. Перейдите во вкладку Speed и увеличьте скорость воспроизведения в 10x раз.
Шаг 5: Фиксация финального числа (Freeze/Hold trick) — CapCut — Дважды кликните по компаунд-клипу, перейдите к последнему субтитру (например, $600) и растяните его хвост на 2-3 секунды вправо, чтобы число зафиксировалось на экране после анимации.
Результат: Идеально плавный эффект бегущего счетчика валюты за 120 секунд без единого кейфрейма.
3. Развертывание стека Remotion + Claude Code для программного рендеринга графики
Контекст: Для создания комплексных анимаций (фона, плашек, карточек) простых встроенных средств видеоредактора недостаточно, а After Effects перегружает оперативную память и требует дорогостоящей подписки. Решением выступает фреймворк Remotion, позволяющий создавать видео с помощью React и веб-технологий. Интегрируя Remotion с инструментом Claude Code (Co-work/CLI от Anthropic), пользователь получает автономного ИИ-агента, который сам пишет код анимации, проверяет ошибки и собирает готовый mp4.
Тайминг:[04:25], [04:55], [05:16]
Выгода: Отказ от Adobe After Effects; автоматическая сборка графики силами ИИ-агента с поддержкой горячей перезагрузки и предварительного просмотра в браузере.
Как применить:
Шаг 1: Установка среды Node.js — Терминал ОС / Nodejs.org — Скачайте LTS-версию Node.js с официального сайта и установите на Mac или Windows.
Шаг 2: Инициализация Remotion-проекта — Терминал / Claude Code — Запустите команду создания шаблона:
npx create-video@latest
Шаг 3: Настройка прав автономности — Claude Code — В интерфейсе Claude переключите режим подтверждения с accept edits на bypass permissions. Это позволит агенту самостоятельно создавать файлы, запускать локальный сервер и вносить правки без запроса подтверждения на каждое действие.
Шаг 4: Установка зависимостей оптимизации — Терминал — Установите дополнительные пакеты производительности (Claude автоматически установит порядка 562 пакетов для работы моушн-навыков Remotion).
Результат: Развернутое локальное окружение, в котором Claude Code напрямую управляет кодом композиций Remotion и запускает веб-интерфейс предпросмотра.
4. Создание абстрактного градиентного моушн-фона по референсу из Pinterest
Контекст: Статичный задний план в «говорящей голове» снижает удержание аудитории. Динамические градиентные подложки обычно покупаются на стоках (Envato, Motion Array). С помощью визуального анализа Claude и математических шейдеров Remotion можно воспроизвести любой визуальный референс в бесконечной процедурной анимации с разрешением Full HD или 4K.
Тайминг:[05:40], [06:20], [06:50]
Выгода: Бесплатное получение уникальных фирменных фонов под брендбук за 3-5 минут без стоковых подписок.
Как применить:
Шаг 1: Поиск референса — Pinterest — Найдите референс по запросам gradient background или gradient figures и скачайте картинку (например, неоновое синее световое пятно).
Шаг 2: Загрузка в сессию Claude Code — Claude Code — Создайте новую сессию, перетащите файл изображения в чат.
Use the motion skill to transform this into an attractive motion background without altering the colors, textures, or the overall appearance. It should look like a premium motion background. Rotate the image 90 degrees and set the aspect ratio to 16:9. The entire project duration should be 10 seconds.
Шаг 4: Итеративная настройка динамики — Claude Code — Откройте сформированное превью в браузере. Если движение слишком медленное или тусклое, напишите агенту естественным языком:
Make the blue gradient move much faster, about 3 times faster, and increase the brightness of the glowing orb.
Шаг 5: Экспорт видео — Remotion Studio / Браузер — Нажмите кнопку Render в интерфейсе Remotion и скачайте файл в разрешении 1080p или 4K для импорта в CapCut.
Результат: Оригинальный циклический анимированный фон с плавно движущимися источниками света, точно повторяющий цвета исходного референса.
5. Генерация интерактивных UI-эксплейнеров и карточек с прозрачным фоном
Контекст: При объяснении сложных шагов, схем или воронок продаж в маркетинговых видео диктор нуждается в наглядной инфографике (появляющиеся один за другим блоки, списки). Создание таких плашек в классических редакторах требует кропотливого выравнивания, добавления размытий и масок. Использование техники «уточняющих вопросов» в Claude Code позволяет идеально собрать UI-виджет под композицию ролика.
Тайминг:[07:15], [07:48], [08:44], [09:35]
Выгода: Экономия от 2 часов ручной сборки слоев до 4 минут генерации кода; сохранение чистого альфа-канала для наложения прямо поверх спикера.
Как применить:
Шаг 1: Подготовка концепта — Pinterest / Дропбокс — Загрузите скриншот эстетичных квадратных UI-блоков в Claude Code.
Шаг 2: Системный промпт с триггером уточнения — Claude Code — Отправьте промпт, обязательно завершив его директивой обратной связи:
Create a modern motion graphics explainer using square shaped UI boxes based on this reference. Ask me any clarifying questions so that we nail this spot on.
Шаг 3: Ответы на вопросы агента — Claude Code — Ответьте на уточняющий опросник модели:
Расположение: вертикальный стек (Vertical stack).
Тип анимации: последовательное появление по цепочке (Sequential start: 1, 2, 3, 4, 5).
Контент: только текст (Text only).
Поведение в конце: задержка на экране, затем общее затухание (Hold, then fade at the end).
Микро-анимация: добавить легкое плавное покачивание блоков во время паузы (Subtle smooth motion during hold).
Шрифт и цвет: Inter SemiBold, глубокий черный цвет блоков.
Шаг 4: Устранение непрозрачности для оверлея — Claude Code — После сборки черновика скомандуйте убрать подложку:
This looks great. Please make the background transparent but keep the boxes' transparency off.
Шаг 5: Рендер с альфа-каналом — Remotion — Скомпилируйте прозрачное видео (ProRes 4444 или WebM с альфа-каналом) и наложите вторым слоем на видеодорожку в CapCut.
Результат: Премиальная минималистичная UI-анимация шагов, накладываемая поверх живого видео без использования зеленых экранов (Chroma Key).
6. Параллельная сборка графики: умный маркер текста и 3D-анимация карты маршрута
Контекст: Создание видео часто упирается в линейность процесса: пока монтируется один фрагмент, остальная работа стоит. Работая через несколько терминальных сессий Claude Code, можно параллельно собирать разные моушн-компоненты. В этом примере параллельно решаются две задачи: эффект плавного выделения цитаты маркером (Text Highlight) из скриншота статьи и анимированная траектория перелета между городами на глобусе.
Выгода: Параллельное выполнение нескольких задач снижает общее время продакшена на 70%; обход платных API за счет перехода на открытые библиотеки карт прямо в процессе кодинга.
Как применить:
Шаг 1: Параллельный запуск Сессии А (Маркер текста) — Claude Code (Окно 1) — Сделайте скриншот веб-страницы или статьи, прикрепите в чат и отправьте запрос:
Take this screenshot and create a kinetic highlight effect. Animate a smooth highlight marker across these specific words: [вставьте точные слова из статьи]. Make the highlight fluid and natural, not choppy.
Шаг 2: Параллельный запуск Сессии Б (Анимация карты) — Claude Code (Окно 2) — Запустите задачу генерации трекинга маршрута:
Create a new project 1920x1080 with an animated travel map showing a flight from Los Angeles to New York. Show country and state borders, follow the dotted line at low altitude, smooth camera movement. Ask clarifying questions if needed.
Шаг 3: Обход ошибки токена Mapbox — Claude Code — При попытке запроса токена Mapbox (Mapbox Token Error), скомандуйте ИИ переключиться на открытые движки:
We don't have a Mapbox token. Switch to an open-source map provider (OpenStreetMap / MapLibre GL) and render the composition using headless GL rules.
Шаг 4: Стилизация под 3D-глобус (Civilization Style) — Claude Code — Для придания кинематографичности задайте стилистику глобальной стратегии:
Make the map feel colorful with distinct ocean water shaders, add a curvature globe effect instead of a flat map, and style the animated route line like the Civilization game.
Шаг 5: Финальный сбор проекта — CapCut — Импортируйте отрендеренный ролик хайлайтера текста и анимацию полета камеры над картой в CapCut, подрезав под закадровый голос.
Результат: Два сложных кинематографичных элемента (маркер цитирования прессы и 3D-полет над континентом) созданы одновременно за 5–7 минут без единого запущенного окна сторонних плагинов.
FAQ
В: Нужна ли платная подписка на Claude для повторения этого пайплайна? О: Базовые задачи — генерацию кастомных файлов LUT (.cube) и файлов анимации счетчика (.srt) — можно выполнять на бесплатном тарифе в стандартном чате Claude. Однако для создания сложного моушн-дизайна (фоны, плашки, карты) требуется Claude Code / Co-work, который доступен на платной подписке Pro ($20/мес).
В: Почему нельзя сразу сделать всю графику внутри CapCut? О: В CapCut есть базовые шаблоны, но они выглядят шаблонно, имеют ограниченные возможности кастомизации и не позволяют генерировать процедурные шейдеры, выравнивать UI-блоки по точным пиксельным сеткам или динамически строить карты на основе реальных географических координат.
В: Что делать, если при установке Remotion в терминале сыплются ошибки? О: Убедитесь, что у вас установлена свежая версия Node.js (LTS). Если ошибка сохраняется, скопируйте лог ошибки в Claude Code со словами: «I got this error during Remotion setup, fix the dependencies». ИИ автоматически обновит package.json и перезапустит установку нужных библиотек.
В: Поддерживает ли Remotion экспорт видео с прозрачным фоном (Alpha Channel)? О: Да. Remotion поддерживает рендеринг в форматы ProRes 4444 (в контейнере .mov) или WebM с поддержкой прозрачности. При передаче прозрачного видео в CapCut черный фон исчезает автоматически без применения инструмента «Chroma Key» или режимов наложения «Screen/Blend».
В: Заменяет ли этот метод Adobe After Effects целиком? О: Для 90% задач YouTube-контента, продуктового маркетинга, SaaS-демо и социальных сетей — да. After Effects по-прежнему нужен для узкоспециализированного VFX, тяжелого 3D-композитинга и сложного персонажного риггинга, но базовую инфографику и кинетическую типографику связка Claude + Remotion делает в разы быстрее.
В: Как Claude Code понимает, как именно анимировать объекты по картинке из Pinterest? О: Мультимодальная модель анализирует структуру элементов (координаты, скругления, цвета) на прикрепленном скриншоте. Затем активируется встроенный навык (Skill) Remotion Best Practices, транслирующий визуальные слои в компоненты React с интерполяцией таймингов через функцию spring() или interpolate().
Ресурсы и ссылки
Claude AI — Десктопное приложение и веб-интерфейс нейросети для генерации ассетов и кода — https://claude.ai
CapCut — Бесплатный видеоредактор для финальной сборки таймлайна, нарезки и наложения эффектов — https://www.capcut.com
Node.js — Среда выполнения JavaScript, необходимая для запуска Remotion на локальной машине — https://nodejs.org
Remotion — Фреймворк для программного создания видео и моушн-дизайна с помощью кода React — https://www.remotion.dev
Pinterest — Платформа для поиска качественных визуальных референсов градиентов, UI-виджетов и композиций — https://www.pinterest.com
Конспект создан на основе видео «I Built an Entire Video with Claude (No After Effects)» канала AI Uncovered. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=j4FzO2fF1kg
