Иван, 21 августа 2026
Claude Design
Все анимации в моих последних роликах сделаны в Claude Design. Без него я бы столько графики просто не успевал. Главная функция, которую почти все упускают: анимация работает по расшифровке. Я отдаю текст озвучки с таймкодами, и графика встаёт ровно под мои слова уже после записи. На выходе обычный видеофайл, который я кладу в монтаж.
Ниже весь процесс: от первого промпта до готового куска на таймлайне.
Что внутри
- 01Процесс монтажа
Путь от промпта до готового куска ролика, по шагам.
- 02Четыре опоры
Только промпт, картинка, несколько картинок, дизайн-система. Чем больше опоры, тем точнее результат.
- 03Каталог анимаций
Какие типы графики я уже собирал и на что каждая опирается.
- 04Промпты
Общий промпт для графики поверх говорящей головы и промпты из кейсов, дословно.
- 05Панель в Premiere
Наезды и говорящая голова в углу за одно нажатие.
На 21.08.2026 нужна платная подписка Claude Pro или Max, отдельного тарифа под дизайн нет. Вход через claude.ai/design или иконку в боковой панели Claude. В шаблонах выбираете Animation.
Как я монтирую ролик
Результат зависит не от длины промпта, а от того, на что модель опирается. Поэтому процесс у меня всегда один и тот же, а меняются только опоры.
- Записываю озвучку
Сначала пишу и записываю ролик целиком. Графика делается после записи и подгоняется под готовую речь, а не наоборот.
- Получаю транскрипт в SRT
Кидаю кусок видео в Gemini и прошу расшифровку с нормализацией в формате SRT. Он расставляет пунктуацию, чинит названия вроде Claude и отдаёт таймкоды. Занимает секунд десять. SRT это обычный текстовый файл: таймкод, под ним фраза.
- Выбираю дизайн-систему и шаблон Animation
В Claude Design выбираю свою дизайн-систему канала, соотношение 16:9. Если нужны картинки-референсы, добавляю их в то же поле.
- Вставляю общий промпт и транскрипт
Общий промпт (он ниже) гоняю из ролика в ролик. SRT копирую и вставляю в конец промпта.
- Правлю комментариями
Вешаю комментарии прямо на макет и надиктовываю правки. В одном кейсе набралось шесть: отправил одним прогоном, он прошёл по всем и исправил. Иногда модель сама замечает и исправляет ошибки по ходу сборки, иногда приходится отдельно показать, что не так.
- Генерирую кусками
Анимации делаю кусками по 30 секунд, минуте, полторы. На ролик выходит несколько таких кусков, и дизайн-система держит их в одном стиле.
- Кладу в монтаж
Забираю видеофайл и ставлю на таймлайн: графика снизу, я сверху. Наезды и голову в углу собирает панель в Premiere, о ней ниже.
Claude здесь не рисует видео, он пишет код: HTML отвечает за структуру, CSS за оформление, JS за движение. Поменял скругление или заливку, и превью перестраивается сразу. Обычный видеогенератор отдаёт один плоский файл: красиво, но внутри менять уже нечего.
Четыре опоры
Своя панель в Premiere
Руками наезд делается так: ключи на масштаб и позицию, сглаживание кривой, чтобы не дёргалось, маска синхронно с движением, и так на каждый наезд. Монтаж у меня типовой: одни и те же наезды, одна и та же голова в углу, одни и те же приёмы из ролика в ролик. Поэтому я собрал в Claude Code панель прямо внутри монтажки.
Выбираю точку на живом кадре, задаю масштаб и длительность, жму «собрать». Кривая считается сама, ключи раскладываются сами. Есть семь кривых плавности и режим наезда поверх склеек через корректирующий слой.
Выбираю угол и форму: вертикаль 9:16, кружок, квадрат или широкая 16:9. Панель собирает масштаб, позицию, кадрирование, скругление, обводку, тень и свечение, каждое отдельной ручкой. Если голову надо перенести, ставлю плейхед, выбираю новое место, и она перелетает плавно вместе с маской.
Панель отдаёт Claude слепок таймлайна, получает план действий, показывает его списком и применяет по кнопке.
Кнопка «Убрать» возвращает всё на весь кадр одним нажатием. Панель для Premiere я собрал специально для этого ролика. До этого похожая система с теми же принципами работала у меня в Final Cut, только управлялась через терминал, без визуального интерфейса.
Весь монтаж по сути тоже данные: проект, клипы, эффекты, ключи. К ним можно обратиться программно. У меня получается снять типовые вещи: наезды, голову, повторяющиеся приёмы. Остальное всё равно делает человек.
Каталог анимаций
Всё это собрано в Claude Design и показано в ролике.
Четыре пути от одной картинки
Claude не анимирует саму картинку, он пересобирает идею кодом. Поэтому от одной картинки можно идти четырьмя путями: повторить композицию максимально близко, взять только стиль, собрать интерфейс или нарисовать схему. Тот же стиль потом ложится на любую поверхность: дашборд, статью, лендинг.
Как собрать дизайн-систему
В Claude Design под выбором системы жмёте плюс и выбираете сборку прямо там. Вводных нужно немного, но точных: название, пара слов о бренде, источник (код с GitHub, файлы с компьютера, файл Figma, шрифты, логотипы, картинки). Мне хватило одной картинки. В поле пожеланий я написал обычными словами: тёмный минимализм в стиле Apple, крупная типографика, чистые графики, и попросил переиспользуемые стили под сравнение, характеристики, графики и рейтинг. На выходе документ с готовыми кадрами по каждому разделу. Имя система придумала сама.
Что такое дизайн-система внутри
По сути это папка с инструкциями и файлами. Под капотом работает тот же агент с файловой системой: он читает правила и собирает по ним. Туда же грузятся логотипы, шрифты и изображения, и дальше он переиспользует их сам.
Данные Claude находит сам, но перед публикацией их всё равно нужно перепроверять. В кейсе с пузырями цифры ориентировочные, а исторические факты в таймлайне я бы тоже сверял: красиво здесь не значит точно.
Промпты
Общий промпт для графики поверх говорящей головы
Главное в нём: графика следует транскрипту, где можно, стоят графика и иконки вместо текста, а правая треть свободна. Без этой строчки модель рисует на весь экран, и себя поставить некуда. Дальше в том же поле идёт SRT.
Мне нужна моушн-графика, которая будет накладываться поверх видео с говорящим человеком в кадре (он будет справа в кадре). Графика должна следовать транскрипту, вставленному ниже, и визуально иллюстрировать соответствующие идеи в нужные моменты времени. По умолчанию, где это возможно, используй графику и иконки для визуализации концепций. Когда это уместно, показывай элементы интерфейса. Текст используй минимально, только чтобы подчеркнуть ключевые мысли или подписать объекты. Исключение: определения, для которых имеет смысл показать точный текст целиком на экране. В основном оставляй свободной правую треть экрана, чтобы я мог разместить там себя в кадре. Верхнюю треть обычно имеет смысл оставлять свободной, когда нужно крупно подчеркнуть какую-то мысль или показать определение. Если конкретная сцена этого требует, можно использовать весь экран под анимацию и вообще не оставлять места для говорящего человека. Также референсы, которые я тебе прислал, можешь использовать, особенно персонажа.
Бывает и короткий вариант под конкретный ролик: сцены не расписываю, а ставлю задачу, чтобы это было интересно смотреть даже без звука. Что показывать, как двигать и в каком темпе, модель решает сама.
Инфографика по двум референсам
Первая картинка задаёт композицию, вторая точный контур, чтобы форму модель не выдумывала.
Сделай анимированную инфографику 16:9 для YouTube «Из чего состоит цена кроссовка». Первое референсное изображение, это основной визуальный ориентир: максимально строго придерживайся его композиции, пропорций, цветов, расположения подписей и общей подачи, постоянно сверяясь с ним. Второй референс используй как точную основу SVG-контура кроссовка, не придумывай свою форму. Поэтапно заполняй силуэт цветными сегментами стоимости слева направо, добавляя суммы и подписи. Тёмный фон с сеткой, белый контур, плоские яркие цвета, чистая экономическая инфографика.
Объяснялка из одного промпта
Всё остальное я заполнил в форме уточняющих вопросов: аудитория, язык, глубина, что обязательно показать. Длинный промпт обычно не нужен.
Визуально объясни, как Claude обрабатывает текст в токены, как заполняется контекст и почему из-за этого расходуется лимит использования
Смена стиля одной строкой
Отправил после первой версии рейтинга процессоров. Модель переделала всё на чёрный фон, SF Pro и полосы с градиентами, а тайминг и данные не тронула и сама об этом написала.
Более Apple-like сделай пожалуйста
Симуляция интерфейса
Кидаю скриншот почты и пишу первую строку. Когда письмо открылось, прошу ответить второй.
оживи этот экран
ответь за меня
Итог
Если оставить одну мысль: дизайн-система превращает отдельные генерации в один ролик. Собрали её один раз, и стиль держится дальше, где бы вы её ни использовали. Транскрипт с таймкодами ставит графику под слова, общий промпт оставляет место под вас, а типовой монтаж можно отдать панели.
Моушн-дизайнера это не заменяет: дорогую вылизанную графику по-прежнему делает человек. Но часть повседневных задач Claude закрывает быстро, обычными словами и без сотен ручных ключей. Чем точнее референс, тем лучше результат.
Не получается повторить? Спросите помощника в Telegram. Он знает все разборы и уроки и отвечает со ссылками.
Спросить помощникаНужно так же, но под вашу задачу? Внедряю ИИ в маркетинг и учу команды.
Работа со мной
