Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по использованию Claude AI для генерации профессиональных визуальных эффектов: от простых LUT-фильтров и анимированных счетчиков до сложных 3D-карт и динамических UI-элементов с помощью фреймворка Remotion. Разбираются как бесплатные методы в чате, так и продвинутый «вайбкодинг» через Claude Code.
👤 Кому будет полезно: Контент-мейкерам, видеомонтажерам и вайбкодерам, которые хотят создавать уникальную графику уровня Apple и премиальных YouTube-каналов, не владея After Effects.
✨ Что получите: Вы научитесь настраивать среду для генерации видео кодом, использовать Claude как полноценного моушн-дизайнера и внедрять полученные ассеты в CapCut или любой другой видеоредактор.
1. Бесплатная цветокоррекция и анимированные цифры через Claude Chat
Контекст: Даже бесплатная версия Claude способна генерировать файлы технических форматов, таких как .cube (для цветокоррекции) и .srt (для субтитров). Это позволяет быстро создавать кастомные фильтры (LUT) под свой стиль или делать эффект «тикающего счетчика» без ручного вбивания сотен цифр в редакторе.
Тайминг:[00:53], [01:58]
Выгода: Экономия часов на рутинной анимации цифр и создание уникального визуального стиля (кинематографичный лук) за секунды.
Как применить:
Шаг 1: Генерация LUT — [Claude.ai] — Используйте промпт для создания файла цветокоррекции:
Please generate a clean soft pastel .lut file for my studio YouTube videos. Cinematic and clean.
Шаг 2: Импорт в редактор — [CapCut / Premiere] — Скачайте полученный .cube файл, импортируйте в раздел Adjustments -> LUT и примените к видео (рекомендуемая интенсивность ~50%).
Шаг 3: Анимированный счетчик — [Claude.ai] — Создайте файл субтитров, который имитирует рост цифр:
Generate a SRT file for me with numbers counting from 0 to 535. Make each subtitle 0.1 seconds long and have a dollar sign in front of all of them.
Шаг 4: Настройка в CapCut — [CapCut] — Закиньте SRT на таймлайн, выделите все фрагменты, создайте Compound Clip (Объединенный клип) и ускорьте его в 10-20 раз для плавного эффекта набора цифр.
Результат: Уникальный цветовой фильтр и динамичный счетчик валюты/подписчиков, готовый к использованию.
2. Настройка среды Claude Code + Remotion для продвинутой графики
Контекст: Для создания настоящей моушн-графики (фоны, плашки, карты) обычного чата недостаточно. Нужно использовать Claude Code (доступен в платных тарифах Pro/Max) и фреймворк Remotion, который позволяет рендерить видео с помощью React-кода. Claude сам пишет этот код, запускает его и выдает вам готовое видео или превью в браузере.
Тайминг:[02:51], [03:43]
Выгода: Возможность создавать графику любой сложности через текстовые команды, не прикасаясь к коду.
Как применить:
Шаг 1: Установка Node.js — [Браузер] — Скачайте и установите Node.js с официального сайта (необходимо для запуска JavaScript на компьютере).
Шаг 2: Инициализация Remotion — [Claude Code] — В терминале Claude Code введите команду для создания проекта:
npx create-video@latest
Шаг 3: Установка зависимостей — [Claude Code] — Перейдите в папку проекта и установите пакеты:
cd my-video && npm install
Шаг 4: Активация навыка — [Claude Code] — Убедитесь, что Claude видит проект. Если он не понимает, что делать, просто напишите: "Help me install Remotion and set up the environment".
Результат: Рабочая среда, где Claude выступает в роли разработчика и дизайнера, создавая видеофайлы прямо в вашей локальной папке.
3. Создание премиальных градиентных фонов по референсу
Контекст: Вместо поиска стоковых фонов можно взять любой красивый скриншот (например, с Pinterest) и попросить Claude оживить его, создав бесконечный анимированный градиент.
Тайминг:[04:22], [05:58]
Выгода: Уникальные фоны в 4K, идеально подходящие под ваш бренд.
Шаг 2: Промпт в Claude Code — [Claude Code] — Загрузите картинку и используйте промпт:
Using the Remotion skill, turn this into an aesthetic looking motion background. Change nothing about the colors, the textures, or the way it looks. Make it a premium motion background. Rotate the image 90 degrees, aspect ratio 16:9, duration 10 seconds.
Шаг 3: Итерация — [Claude Code] — Если движение слишком медленное, просто напишите: "Make that gradient move 3 times faster".
Результат: Плавный, профессиональный видео-фон, созданный на основе статичного изображения.
4. Генерация динамических UI-элементов (Pill-плашки в стиле Apple)
Контекст: Списки и пункты меню — отличный способ удержать внимание зрителя. Claude может создать анимированные "таблетки" (pills) с текстом, которые плавно вылетают, светятся и двигаются.
Тайминг:[06:12], [08:41]
Выгода: Повышение удержания (Retention) видео за счет структурированной и эстетичной подачи информации.
Use Remotion best practices. Make a clean Apple aesthetic set of 7 pull boxes. They each appear through an animation: blur in, fade in, and smooth slide up. Animation over 2 seconds. Sequential start. Use the reference image for design style. Ask me any clarifying questions.
Шаг 2: Уточнение деталей — [Claude Code] — Ответьте на вопросы Claude (расположение: вертикально, цвета: уникальные для каждой плашки, фон: прозрачный).
Шаг 3: Прозрачный фон — [Claude Code] — Чтобы наложить графику на видео в CapCut, обязательно скомандуйте:
This looks great. Please make the background transparent.
Результат: Готовый .mp4 или .webm файл с прозрачностью, который можно наложить на любой кадр.
5. Эффект живого поиска и анимация карт
Контекст: Более сложные элементы, такие как строка поиска с имитацией набора текста (с опечатками и исправлениями) или 3D-карта перелета между городами.
Тайминг:[10:18], [11:37], [12:50]
Выгода: Создание сложного сторителлинга без покупки дорогих плагинов для карт или долгого монтажа.
Как применить:
Шаг 1: Строка поиска — [Claude Code] — Попросите создать бокс с эффектом свечения по периметру и добавить текст:
Add text 'Inter' font which types into the pull: 'How do I create stunning motion graphics like this?'. Make it look like someone is typing: mix speed, some errors, backspaces.
Шаг 2: Карта перелета — [Claude Code] — Для карт используйте открытые источники (OpenStreetMap), чтобы избежать проблем с токенами Mapbox:
Create a map animation from Los Angeles to New York. Use an open-source map (not Mapbox). Add a globe effect, colorful water, and follow the line at low altitude.
Шаг 3: Рендер — [Claude Code] — Если превью в браузере подлагивает, используйте команду рендера, которую предложит Claude, чтобы получить чистый файл на выходе.
Результат: Профессиональная анимация карты и интерактивные элементы интерфейса.
FAQ
В: Нужно ли мне знать React или JavaScript, чтобы использовать Remotion с Claude?
О: Нет. В этом и заключается магия "вайбкодинга". Вы общаетесь с Claude на обычном английском (или русском), а он сам пишет код, исправляет ошибки компиляции и запускает процесс рендеринга. Вам нужно только установить Node.js и сам Claude Code.
В: Можно ли использовать бесплатную версию Claude для создания видео?
О: Только для простых вещей типа LUT или SRT-файлов. Для полноценной графики через Remotion требуется Claude Code, который доступен в платных планах (Pro — $20/мес). Это связано с тем, что Claude должен иметь доступ к вашей файловой системе для написания и запуска кода.
В: Как перенести созданную графику в CapCut?
О: После того как Claude создаст графику, в браузере откроется окно Remotion Studio. Там есть кнопка "Render". После рендера файл сохранится у вас на диске. Если вы попросили Claude сделать фон прозрачным, вы получите файл, который можно просто перетащить в CapCut вторым слоем.
В: Что делать, если Claude выдает ошибку при создании карты?
О: Чаще всего это связано с отсутствием API-ключа Mapbox. Просто скажите Claude: "Don't use Mapbox, use an open-source map alternative". Он перепишет код под бесплатные библиотеки карт.
В: Как добиться "Apple-стиля" в графике?
О: Используйте в промптах ключевые слова: "Apple aesthetic", "SF Pro font" (или "Inter"), "soft shadows", "subtle glassmorphism", "smooth easing". Также всегда прикрепляйте скриншот-референс — Claude отлично анализирует визуальный стиль.
Ресурсы и ссылки
Claude.ai — Основной чат и доступ к Claude Code — https://claude.ai
Node.js — Среда для запуска кода на ПК — https://nodejs.org
Remotion — Фреймворк для создания видео через React — https://www.remotion.dev
Pinterest — Ресурс для поиска визуальных референсов и градиентов — https://pinterest.com
CapCut — Видеоредактор для финальной сборки — https://www.capcut.com
CapCut Lab — Продвинутый курс автора видео по монтажу и AI-инструментам — упомянут в видео
Конспект создан на основе видео «I created Premium Motion Graphics in Claude (No Editing)» канала Ben’s Business Podcast. Все права на оригинальный материал принадлежат авторам.Источник: https://youtu.be/8oIFBQ9BhVU
