Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию моушн-графики, интерактивных графиков и анимированных ассетов в Claude без эффекта «дешевой нейросети» (AI slop). Разбирается 5-уровневая система: от визуализации реальных данных и анти-слоп типографики до связки Lottie JSON, пословной RTF-транскрибации видео и автономного агента (Claude Skill + Firecrawl) для автогенерации графики под монтаж.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, контент-мейкерам и разработчикам, которые упаковывают свои AI-продукты, делают презентации, создают видео для YouTube/Reels и хотят автоматизировать процесс создания визуальных оверлеев премиального уровня.
✨ Что получите: Готовые системные промпты, алгоритм экстракции брендинга через Firecrawl, правила внедрения внешних Lottie-анимаций и структуру Claude Skill, которая автоматически находит в видео места для инфографики, обогащает их реальными данными из сети и генерирует готовые анимированные клипы.
1. Уровень 1: Анимация реальных данных и кодификация дизайн-системы
Контекст: Большинство анимаций, созданных стандартными промптами в Claude, выглядят как шаблонный визуальный мусор, оторванный от реальности. Чтобы графика выглядела профессионально, анимация должна строиться вокруг точных числовых датасетов с адаптивной цветовой дифференциацией. Claude способен генерировать динамические графики, в которых названия сущностей строго соответствуют градиентам столбцов. После получения нужного результата стилистику необходимо «закодифицировать» — зафиксировать как системный ассет, чтобы все последующие графики в проекте генерировались в идентичном визуальном стандарте.
Тайминг:[00:43], [01:13], [01:34]
Выгода: Мгновенное преобразование сырых чисел в интерактивные компоненты с сохранением брендового визуала без ручной верстки в After Effects.
Как применить:
Шаг 1: Подготовка датасета и первичный запрос — Claude (Web / Desktop App) — Сформируйте числовой массив с именами моделей или метрик и задайте требования к интерактивному градиенту:
Создай интерактивный анимированный bar chart (HTML/CSS/JS артефакт) для сравнения производительности AI-моделей:- OpenAI: 700- Claude: 595- DeepSeek: 520- Gemini: 480- Meta: 430- Mistral: 390- Hugging Face: 340- Perplexity: 310- X (Grok): 280Требования:1. Для каждого бара примени уникальный плавный multi-color градиент.2. Лейбл с названием модели под столбцом должен строго дублировать градиент соответствующего бара.3. Плавная физическая анимация вырастания баров при инициализации (stagger effect).4. Микро-интерактивность при наведении (hover scale, показ точного значения).
Шаг 2: Кодификация дизайн-стиля в постоянный ассет — Claude System Instructions / Project Knowledge — Зафиксируйте получившийся стиль для повторного использования:
Запомни эту стилистику (цветовые токены, скругления 12px, темный фон #0F1117, шрифт, stagger-анимации на 0.6s ease-out) как стандарт "DataChart-V1". Используй этот точный стиль для всех будущих диаграмм и инфографик без дополнительных напоминаний.
Результат: Готовый интерактивный HTML-компонент графика и зафиксированный шаблон в памяти Claude для генерации новых отчетов в один клик.
2. Анти-слоп типографика: Извлечение шрифтов сайтов через Firecrawl
Контекст: Шрифт — главный маркер дешевого нейросетевого контента. Claude по умолчанию использует стандартные системные шрифты (Roboto, Inter, Arial), из-за чего любой качественный макет сразу считывается как сырой сгенерированный шаблон. Замена шрифта на Montserrat, Poppins, Glacial Indifference или швейцарский гротеск мгновенно переводит графику в категорию премиального дизайна. Чтобы не подбирать стили вручную, используется Firecrawl: инструмент скрейпит любой референсный сайт в режиме branding, отсекая 93% мусорного кода и вытягивая точные шрифтовые стеки и hex-коды.
Выгода: Экономия до 93% токенов при реверс-инжиниринге стилей сайтов за счет выжимки метаданных вместо парсинга сырого HTML; мгновенное устранение эффекта «AI slop».
Как применить:
Шаг 1: Парсинг брендинга через Firecrawl — Firecrawl API / Dashboard — Зайдите в Firecrawl, вставьте URL понравившегося сайта-референса (например, ClickUp) и выберите формат branding. Запустите скрейпинг: сервис вернет чистый JSON с логотипами, hex-палитрой и используемыми гарнитурами всего за несколько центов.
Шаг 2: Поиск альтернатив и бесплатных лицензий — Репозитории FontsInUse, Font Share, Open Foundry, Google Fonts — Если найденный шрифт платный, возьмите скриншот его начертания и скормите Claude:
Проанализируй этот скриншот типографики из реального дизайн-кейса. Определи название шрифта или найди максимально близкий бесплатный аналог из библиотек Google Fonts или Font Share. Укажи правильные параметры CSS: font-family, font-weight, letter-spacing и line-height для заголовков (H1-H3) и body-текста.
Шаг 3: Внедрение шрифтового стека в Claude — Claude Artifacts — Добавьте подключение через Google Fonts CDN прямо в сгенерированный код:
Результат: Уникальный визуальный стиль проекта с профессиональной типографикой, неотличимой от ручной работы UI-дизайнера.
3. Уровень 2: Внедрение векторных дизайн-систем и моно-стилевых иконок
Контекст: Claude отлично верстает структуры, но не умеет генерировать с нуля сложные векторные пиктограммы — они получаются кривыми или перегруженными. Использование разношерстных SVG из поиска делает презентацию кустарной. Решение заключается в скачивании тематических дизайн-паков (Travel, SaaS, Tech, Finance) с Flaticon или IconA в едином визуальном стиле (например, linear gradient или duotone) и их прямой передаче в контекст Claude для сборки сложных дашбордов и моушн-слайдов.
Тайминг:[03:54], [04:12], [04:27], [04:67]
Выгода: Рост воспринимаемой стоимости продукта; исключение визуального шума благодаря единому радиусу скруглений и толщине обводки иконок.
Как применить:
Шаг 1: Выбор и экспорт пака — Flaticon / IconA — Найдите пак иконок под тему вашего проекта (например, Travel Pack или Analytics Pack) в одном стиле. Скачайте набор в формате SVG.
Шаг 2: Загрузка в проект Claude — Claude Code / Claude Chat — Загрузите папку с SVG-ассетами в рабочий каталог проекта или прикрепите файлы к чату.
Шаг 3: Сборка слайда с консистентными иконками — Claude Design — Отправьте промпт на сборку анимации с указанием точных ассетов:
Используя загруженные SVG-иконки из пака, собери анимированный промо-компонент (16:9) для тревел-сервиса.Правила:- Сохраняй один визуальный стиль для всех карточек.- Задай акцентный микро-bounce для иконок при появлении карточки.- Никаких сторонних эмодзи или самодельных SVG-фигур: используй только предоставленные ассеты.- Сделай компонент чистым, минималистичным, на уровне премиального мобильного интерфейса.
Результат: Премиальная анимация интерфейса с идеальной визуальной консистентностью элементов, готовая для вставки в продуктовое видео.
4. Уровень 3: Интеграция Lottie JSON и фонового 2K-арта
Контекст: Стандартный CSS-моушн в Claude ограничен базовыми трансформациями (transform, opacity). Чтобы создать кинематографичную графику (например, анимированный огонь, работающие ракеты, живые иллюстрации), необходимо комбинировать Claude с библиотеками Lottie JSON (Lordicon) и нейросетевой генерацией статичных фонов высокого разрешения (16:9 2K). Lottie обеспечивает векторную 60fps-анимацию с минимальным весом, а сгенерированный арт (например, в стиле Studio Ghibli) задает эмоциональный контекст.
Выгода: Создание сложных каруселей для соцсетей и промо-роликов за считанные минуты без использования Adobe After Effects.
Как применить:
Шаг 1: Загрузка Lottie JSON — Lordicon / LottieFiles — Найдите векторные анимации (например, огонь, взлетающая ракета, астронавт). Скачайте их в формате .json (доступно по бесплатной лицензии Creative Commons с атрибуцией).
Шаг 2: Генерация фонового изображения — Nano Banana Pro 2 / XField / Midjourney — Сгенерируйте фоновое изображение в соотношении 16:9 с разрешением 2K:
Prompt: Gorgeous Ghibli style illustration of deep galaxy, cosmic nebula, floating space stations, rich color palette, soft atmospheric cinematic lighting, highly detailed --ar 16:9
Шаг 3: Объединение ассетов в Claude Design — Claude Code — Передайте изображение и Lottie-файл в Claude и свяжите их через lottie-web:
Встрой скачанный Lottie JSON файл и сгенерированное фоновое изображение в единый интерактивный слайд для Instagram Reels:1. Фон: изображение растянуто на весь экран с легким медленным zoom-эффектом (Ken Burns effect).2. Поверх фона: контейнер с Lottie-анимацией огня и ракеты, подключенный через CDN lottie-web.3. Текстовый оверлей: заголовок с размытой плашкой (backdrop-filter: blur(12px)).4. Реализуй вертикальную прокрутку (swipe carousel) с переключением между тремя состояниями.
Результат: Полноценный моушн-баннер или заготовка для Reels, объединяющая генеративный 2K-фон и плавную векторную микроанимацию.
5. Уровень 4: RTF-транскрибация видео с пословной привязкой таймкодов
Контекст: Создать красивую графику недостаточно — ее нужно синхронизировать со звуковой дорожкой видеомонтажа. Ручная расстановка таймкодов отнимает часы. Claude может напрямую обработать видеофайл с рабочего стола или ролик с YouTube и сгенерировать пословный RTF-транскрипт (Real-Time Transcript Format). В таком формате каждое произнесенное слово привязано к конкретной миллисекунде, что создает фундамент для автоматического наложения графики именно в те секунды, когда спикер озвучивает ключевую мысль.
Выгода: Полная автоматизация разметки видеоряда; исключение ручной подгонки титров и плашек на монтажном таймлайне.
Как применить:
Шаг 1: Размещение видеофайла — Локальная файловая система — Положите сырой записанный файл видео (или укажите YouTube URL) в рабочую папку проекта.
Шаг 2: Запуск пословного транскрибирования — Claude Desktop / Claude Code — Дайте Claude инструкцию на извлечение пословного RTF:
На моем рабочем столе находится видеофайл [input_video.mp4].Твоя задача:1. Извлеки полный транскрипт этого видео.2. Сделай RTF-разметку (word-level timestamps): сопоставь каждое слово с точной секундой и миллисекундой аудиодорожки.3. Оформи результат в виде интерактивного HTML-файла, где текст сгруппирован по минутам, а при клике на слово отображается его точный таймкод.
Шаг 3: Проверка плотности речи — Claude Code — Claude сформирует аналитический отчет с темпом речи (слов в минуту) и картой пауз для точной интеграции графических вставок.
Результат: Структурированный HTML/JSON документ со сквозной привязкой текста к таймлайну видео с точностью до доли секунды.
6. Уровень 5: Автономный моушн-агент (Claude Skill + Firecrawl)
Контекст: Спикер в видео часто говорит общие тезисы: «AI-модели развиваются колоссальными темпами от Grok до OpenAI». В сценарии нет конкретных цифр, поэтому обычный ИИ не знает, что именно анимировать. Пятый уровень объединяет систему в единый автономный Claude Skill. Агент берет RTF-транскрипт, сканирует контекст на предмет потенциальных инфографических вставок, отправляет поискового агента через Firecrawl за актуальной статистикой в сеть, находит реальные бенчмарки и сразу рендерит готовые моушн-клипы под точные секунды хронометража.
Выгода: Сквозной пайплайн «запись сырого видео -> готовые анимированные перебивки с проверенными фактами» без участия моушн-дизайнера и фактчекера.
Как применить:
Шаг 1: Настройка поискового агента Firecrawl — n8n / Python script / MCP — Настройте агент скрейпинга, который принимает поисковый запрос, делает парсинг страниц без мусорного HTML и отдает Claude выжимку фактов с экономией токенов на 93%.
Шаг 2: Запуск специализированного Claude Skill — Claude Code CLI — Вызовите системный навык для обработки скрипта видео:
Используй навык видеоанализа для обработки файла [input_video.mp4]:1. Получи полный RTF-транскрипт с таймкодами.2. Определи 5-6 ключевых моментов в сценарии, где визуальная инфографика или анимация усилит удержание зрителя.3. Для каждого момента запусти Firecrawl для поиска актуальных данных, статистики и бенчмарков, подтверждающих мои слова в кадре.4. Создай для каждого фрагмента motion graphic ассет в единой дизайн-системе (используя наши правила типографики, иконки и цветовую палитру).5. Экспортируй готовые визуальные блоки и сохрани их в папку /render_assets на рабочем столе с именами файлов, соответствующими таймкодам вставки (например: 01_24_benchmark_chart.html).
Шаг 3: Контроль результатов генерации — Claude Workspace — Проверьте полученный таймлайн: Claude выдаст список моментов, где обнаружены фактологические пробелы, покажет найденные данные и сгенерированные под них клипы.
Результат: Полностью готовые к импорту в монтажную программу (Premiere, Final Cut, DaVinci) анимированные оверлеи с точной привязкой к хронометражу и подтвержденными цифрами.
FAQ
В: Чем Claude Design принципиально отличается от обычного чата Claude при создании анимаций? О: Claude Design в связке с Artifacts компилирует интерактивный код (HTML, Tailwind CSS, SVG, JS/Canvas) в изолированном окне рендеринга в реальном времени. В отличие от текста, здесь вы сразу получаете живой работающий UI-компонент с анимациями, который можно тестировать, масштабировать и встраивать в другие сервисы.
В: Почему для извлечения данных о шрифтах используется Firecrawl, а не стандартный веб-поиск Claude? О: Обычный браузинг Claude возвращает общий контент страницы и тратит огромный объем контекстного окна на чтение HTML-тегов. Режим format: branding в Firecrawl парсит только CSS-переменные, метаданные, палитру и подключенные гарнитуры. Это снижает потребление токенов на 93% и стоит доли цента.
В: Как загрузить Lottie-анимацию в Claude, если он не принимает тяжелые JSON-файлы? О: Векторные Lottie JSON обычно весят от 10 до 80 КБ, что легко помещается в контекст Claude Code или загрузку файлов чата. Если файл слишком велик, разместите его на внешнем CDN или в GitHub-репозитории и передайте Claude прямую ссылку на JSON для подключения через lottie.loadAnimation({ path: 'URL' }).
В: Какие шрифты гарантированно убирают эффект дешевого нейросетевого дизайна? О: Избегайте базовых системных шрифтов (Roboto, Arial, Times New Roman, стандартный Inter без настройки трекинга). Используйте характерные гарнитуры: Montserrat (с жирным начертанием для заголовков), Poppins, Glacial Indifference, Swiss-стили или подбирайте нео-гротески на независимых площадках вроде Font Share и Typewolf.
В: Что делать, если спикер в видео говорит быстро и анимация не успевает проиграться? О: В 4 и 5 уровнях Claude анализирует метрику темпа речи (слов в минуту). При формировании промпта на моушн-графику передайте ограничение по длительности: укажите Claude жесткий тайминг анимации (например, вход за 0.3s, удержание 2.5s, выход за 0.2s), соответствующий паузе спикера в RTF-транскрипте.
В: Можно ли превратить сгенерированные HTML/JS артефакты в готовые видеофайлы MP4/WebM с альфа-каналом? О: Да. Для этого сгенерированный Claude HTML-файл можно открыть в безголовом браузере через Puppeteer/Playwright и отрендерить покадрово в прозрачный WebM (или ProRes 4444 через FFmpeg), после чего наложить на таймлайн в DaVinci Resolve или Premiere Pro.
Ресурсы и ссылки
Firecrawl — краулер и скрейпер для извлечения чистого контента и метаданных брендинга (шрифты, цвета, логотипы) — https://firecrawl.dev
Fonts In Use — архив реальных дизайнерских кейсов с детальной идентификацией использованных шрифтов — https://fontsinuse.com
Font Share — бесплатный сервис качественных шрифтов от Indian Type Foundry — https://fontshare.com
Open Foundry — открытая курируемая платформа с современными свободными шрифтами — https://open-foundry.com
Typewolf — авторитетный гайд по трендам в цифровой типографике и шрифтовым сочетаниям — https://typewolf.com
Google Fonts — библиотека бесплатных веб-шрифтов с открытым исходным кодом — https://fonts.google.com
Lordicon — библиотека интерактивных анимированных векторных иконок и Lottie-анимаций — https://lordicon.com
LottieFiles — крупнейший репозиторий легковесных анимаций в формате Lottie JSON — https://lottiefiles.com
Flaticon — база векторных иконок и графических дизайн-паков — https://flaticon.com
Nano Banana Pro 2 / XField — инструменты генерации фоновых изображений высокого разрешения, упомянутые автором — упомянуты в видео
Конспект создан на основе видео «Claude Design Motion Graphics: System to Build Unique Designs» канала Jack. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=RDytbVDzMF4
Cursor