20 секунд моушена в обычном Claude
Как собрать 20-секундную продуктовую анимацию, исправить её по референсу и получить форматы 1920×1080 и 1080×1920 без отдельной подписки на Claude Motion.
Содержание12 глав
- 01Один ролик прошёл путь 20 + 19 + 5 минут
- 02До первого сообщения собери три группы исходников
- 03Сначала зафиксируй бренд, потом запускай движение
- 04Преврати идею ролика в техническое задание по секундам
- 05Первая генерация нужна для диагноза
- 06Референс надо разложить по кадрам
- 07Весь процесс держится на одном цикле
- 08Правка начинается с таймкода и наблюдаемой ошибки
- 09Проект передаётся в Claude Code целиком
- 10Reels требует новой композиции, а не обрезки
- 11Готовый MP4 проходит 12 проверок
- 12Начни с одного экрана продукта
Claude Motion появился 8 октября и умеет превращать данные, интерфейсы и идеи в анимированные ролики. Доступ к нему ограничен тарифами Team и Enterprise. При этом сам принцип можно повторить в обычном Claude: собрать дизайн-систему, создать HTML-анимацию, доработать её по референсу и экспортировать результат в MP4.
Внутри - полный маршрут от трёх исходников до двух готовых форматов. Ты получишь 7 промптов: для дизайн-системы, сценария, первой генерации, разбора референса, исправления дефектов, экспорта со звуком и версии для Reels.
Результат этого процесса - 20-секундная продуктовая анимация в фирменном стиле. Дополнительных сервисов генерации видео не требуется: работа идёт внутри стандартной подписки Claude и, при необходимости, в Claude Code.
Один ролик прошёл путь 20 + 19 + 5 минут
Первая версия собиралась около 20 минут. Она уже работала в формате 1920×1080, но движение жило почти только внутри скриншотов. Вторая версия после повторного разбора референса заняла ещё 19 минут. Экспорт MP4 потребовал около 5 минут, а отдельная вертикальная версия - около 10.
Это время конкретного проекта, а не обещание скорости для любой задачи. На результат влияют длина ролика, количество сцен, качество исходников и число итераций. Здесь Claude создал 207 HTML-анимаций через ключевые точки, поэтому даже короткий ролик оказался полноценной сценой, а не одной движущейся картинкой.
Смотри на эти цифры как на ориентиры процесса. Основная работа человека происходит до генерации: выбрать материал, сформулировать задачу и точно назвать дефекты. Ожидание можно оставить Claude.
До первого сообщения собери три группы исходников
Начни со скриншотов продукта. Выбери экраны, на которых видны ключевые функции и понятен путь пользователя. Каждый скрин должен отвечать на один вопрос: что именно зритель должен заметить за эти 2-4 секунды.
Добавь логотип и ссылку на сайт. Сайт нужен Claude как источник реальной палитры, типографики, формы кнопок, карточек и общего ритма. Если у бренда есть отдельные файлы шрифтов или гайдлайн, приложи их в тот же чат.
Третья группа - один основной видеореференс и 2-3 дополнительных кадра. В Pinterest удобно искать композицию и движение по запросу Claude Motion, но выбирай референс по механике: как появляется текст, куда движется камера, как раскрываются элементы интерфейса. Чужие логотипы, тексты и графику переносить не нужно.
Сначала зафиксируй бренд, потом запускай движение
Открой Claude Design и создай новую дизайн-систему. Прикрепи скриншоты приложения, логотип, ссылку на сайт и дополнительные материалы бренда. Claude должен не нарисовать одну красивую страницу, а извлечь правила, которые можно повторять в следующих проектах.
Через несколько минут проверь результат. В системе должны быть конкретные цвета, типографика, сетка, компоненты, правила работы с логотипом и базовые принципы движения. Удали элементы, которых нет в исходниках. Если Claude предлагает декоративный приём от себя, попроси показать, из какого материала он его вывел.
Такая система пригодится дальше для моушен-графики, SMM-материалов и новых страниц сайта. Один раз зафиксированный визуальный язык становится общим контекстом для следующих чатов.
Промт 15 строк · 942 знака
Мне нужно создать дизайн-систему по моему онлайн-сервису yoolip.ai. В эту дизайн-систему должны входить цвета кнопки и всё остальное, что можно взять с основного сайта. Цель этой дизайн-системы: создавать motion-анимации и анимационные презентации для продвижения моего SaaS. Используй основной сайт, прикреплённые скриншоты интерфейса и логотип как источники. Не добавляй цвета, шрифты, компоненты и декоративные приёмы, происхождение которых нельзя объяснить этими материалами. Зафиксируй палитру с назначением цветов, типографику и иерархию, сетку и отступы, кнопки и другие повторяемые компоненты, правила использования логотипа, а также принципы анимации текста, интерфейса и переходов. Если каких-то данных на сайте и в приложенных материалах нет, не придумывай их. Перечисли такие пробелы отдельно. В конце проверь, что система подходит для motion-анимаций и анимационных презентаций и что каждое правило связано с исходным материалом.
Готовый запрос для создания дизайн-системы.
Преврати идею ролика в техническое задание по секундам
Новый чат нужен для отдельной задачи: подготовить точный промпт на анимацию. Прикрепи созданную дизайн-систему и опиши продукт обычными словами. Назови аудиторию, цель ролика, главную функцию и действие, которое зритель должен понять после просмотра.
Затем задай формат: 20 секунд, 1920×1080, конкретное число сцен и порядок смыслов. Добавь желаемую механику движения. Текст, интерфейс и логотип должны иметь свою роль в таймлайне, иначе Claude оживит только самые очевидные объекты.
Этот запрос сначала создаёт производственный промпт. Он полезен, когда идея пока существует в виде «хочу показать продукт красиво», а Claude должен превратить её в последовательность сцен с проверяемыми параметрами.
Промт 117 строк · 1401 знак
Я хочу сделать в Claude Design 20-секундную анимированную рекламу своего сервиса. Сначала помоги собрать подробный промпт - саму анимацию пока не делай. Сервис: Yoolip AI (yoolip.ai) - аналитика продаж и рекламы для продавцов на Ozon. Что он делает (говорить можно только это): - собирает данные кабинета и рекламы Ozon на один экран: дашборд, товары, реклама, юнит-экономика, финансы, поставки; - данные обновляются сами каждую ночь; - в таблице товаров есть быстрые фильтры «Нет остатков», «ДРР выше порога», «В минусе»; - AI-анализ раскладывает подсказки на «Действие», «Наблюдение», «Возможность»; - бесплатное расширение для Chrome показывает юнит-экономику прямо в карточке товара на Ozon. Нельзя: число пользователей, обороты, цены, «в реальном времени», «сам управляет рекламой». Где покажу: первые секунды моего YouTube-ролика (16:9), потом Reels (9:16). Часто смотрят без звука - всё главное должно читаться словами на экране. Зритель: продавец на Ozon, который каждый день сводит отчёты вручную. Финал: кнопка «Начать бесплатно» и адрес yoolip.ai. Бренд: тёмный фон #0D1117, карточки #161B22, зелёный #0E9E5A, шрифт Onest. Логотип и 4 скриншота интерфейса приложу. Задай до 5 вопросов, которые сильнее всего изменят результат. Потом напиши промпт: сцены с таймингом, точные слова на экране, что происходит в кадре, стиль отдельным абзацем. Движение описывай словами режиссёра, а не цифрами.
Запрос, который собирает финальный промпт на анимацию.
Первая генерация нужна для диагноза
Открой новый проект в Claude Design, выбери созданную дизайн-систему и вставь производственный промпт. Приложи исходники ещё раз: новый чат не должен угадывать, какие изображения использовались раньше.
Первая версия может выглядеть аккуратно и всё равно не решать задачу. В кейсе движение оказалось сосредоточено внутри скриншотов, а холст оставался почти статичным. Это полезный результат: теперь видно, какие слои промпта были описаны слабо.
Не проси «сделать динамичнее». Зафиксируй диагноз: какие объекты стоят, где текст появляется слишком просто, какой переход отсутствует, какая сцена не поддерживает смысл. Следующая итерация должна менять названные механики.
Промт 112 строк · 3122 знака
Создай в Claude Design 20-секундную HTML-анимацию для Yoolip AI. Это реклама аналитики продаж и рекламы для продавцов на Ozon. Используй прикреплённую дизайн-систему, логотип и 4 скриншота интерфейса. Первая версия нужна в формате 1920×1080 для начала YouTube-ролика. Зритель - продавец на Ozon, который каждый день вручную сводит отчёты из кабинета и рекламы. Ролик часто будут смотреть без звука, поэтому вся основная мысль должна читаться в тексте на экране. СЦЕНА 1 · 00:00-00:03. Начни с ощущения ручной рутины. На тёмном фоне последовательно появляются разрозненные карточки отчётов и таблиц, будто их приходится собирать из разных мест. Камера медленно приближается, карточки начинают теснить друг друга. Точный текст на экране: «Каждый день сводишь отчёты вручную?» СЦЕНА 2 · 00:03-00:06. Разрозненные карточки плавно собираются в единый интерфейс Yoolip AI. Покажи скриншот общего дашборда крупно, без искажения пропорций. Точный текст: «Кабинет и реклама Ozon - на одном экране». СЦЕНА 3 · 00:06-00:09. Переведи внимание на данные внутри интерфейса. Элементы обновляются мягкой волной, затем фиксируются. Не рисуй счётчики и вымышленные цифры. Точный текст: «Данные обновляются каждую ночь». СЦЕНА 4 · 00:09-00:12. Покажи таблицу товаров. Фокус последовательно переходит между тремя существующими фильтрами. Их названия должны читаться дословно: «Нет остатков», «ДРР выше порога», «В минусе». Движение спокойное и точное, без мигания и случайного свечения. СЦЕНА 5 · 00:12-00:15. Перейди к AI-анализу. Три карточки собираются одна за другой и остаются в кадре как единая система. Точные подписи: «Действие», «Наблюдение», «Возможность». Не приписывай AI автоматическое управление рекламой. СЦЕНА 6 · 00:15-00:18. Покажи бесплатное расширение Chrome прямо в карточке товара на Ozon. Интерфейс входит в кадр как увеличенный фрагмент реального скриншота. Точный текст: «Юнит-экономика прямо в карточке товара». СЦЕНА 7 · 00:18-00:20. Интерфейс уходит на второй план, логотип Yoolip AI становится главным объектом. Финальный текст: «Начать бесплатно». Ниже - адрес «yoolip.ai». Оставь финальный кадр неподвижным настолько, чтобы кнопку и адрес успели прочитать. СТИЛЬ. Тёмный фон #0D1117, карточки #161B22, акцентный зелёный #0E9E5A, шрифт Onest. Движение собранное и технологичное: карточки входят по траектории, интерфейс раскрывается слоями, камера мягко переводит внимание между функциями. Анимируй весь холст, а не только содержимое скриншотов. Логотип, тексты и интерфейс остаются резкими и читаемыми. ОГРАНИЧЕНИЯ. Не упоминай число пользователей, обороты, цены, работу «в реальном времени» и фразу «сам управляет рекламой». Не добавляй функции, которых нет в описании. Не используй новые цвета, другие шрифты, зелёное свечение на буквах, повтор одной анимации дважды, резкие скачки масштаба и декоративные объекты вне дизайн-системы. ПЕРЕД ЗАВЕРШЕНИЕМ. Проверь длительность ровно 20 секунд, размер 1920×1080, читаемость без звука, границы текста, качество логотипа, отсутствие наложений и повторных ключевых точек. Покажи готовую версию целиком и перечисли три места, которые человеку стоит проверить вручную.
Готовый производственный промпт для первой версии.
Референс надо разложить по кадрам
Прикрепи основной референс повторно и попроси Claude разобрать его по времени. Важны не общие слова «быстро» или «дорого», а конкретные наблюдения: когда появляется логотип, как собирается текст, какой объект становится центром кадра, сколько длится переход.
Разбор по долям секунды помогает перенести механику на собственный продукт. Фирменные элементы референса остаются у автора: тексты, логотипы, иллюстрации и бренд не копируются. Ты забираешь монтажную логику, ритм, работу камеры и принцип появления объектов.
После анализа попроси встроить эти механики в текущий проект. Существующие сцены, данные продукта и дизайн-система остаются основой. Claude меняет движение, а не подменяет твой ролик чужим.
Промт 14 строки · 829 знаков
Проанализируй прикреплённый видеореференс покадрово и по таймкодам. Сначала ничего не меняй в моём проекте. Для каждого смыслового отрезка укажи: длительность; композицию; главный объект; положение камеры; появление и уход текста; движение интерфейсных элементов; маски и переходы; ускорение и замедление; паузы; момент визуального акцента. Отдельно выдели три механики, которые сильнее всего создают ощущение качественного моушена. Не копируй логотипы, тексты, иллюстрации, фирменные элементы и сюжет референса. После анализа перенеси только найденные механики движения в мой 20-секундный проект. Сохрани мои скриншоты, тексты, логотип, порядок смыслов и дизайн-систему. Особое внимание удели тому, как в референсе визуализируются отдельные элементы сайта и как анимируется текст. Покажи список внесённых изменений с таймкодами.
Разбор референса и перенос механики.
| Что разобрать | Что перенести |
|---|---|
| таймкод | длительность сцены |
| текст | появление и уход |
| интерфейс | маски и фокус |
| камера | масштаб и траектория |
| переход | ритм между сценами |
Весь процесс держится на одном цикле
Рабочий контур состоит из шести действий: собрать исходники, зафиксировать дизайн-систему, написать сценарий по секундам, получить первую версию, сравнить её с референсом и внести точечные правки. После этого проект можно экспортировать и адаптировать под другой формат.
Каждый новый чат получает полный контекст своей задачи. Дизайн-система отвечает за бренд. Производственный промпт отвечает за смысл и таймлайн. Референс отвечает за механику движения. Список дефектов отвечает за качество финальной итерации.
Не смешивай эти роли в одном огромном сообщении. Отдельные этапы дают понятную точку проверки: система похожа на бренд, сценарий укладывается в 20 секунд, первая версия читается, референс разобран, дефекты устранены, MP4 открывается.
Правка начинается с таймкода и наблюдаемой ошибки
Во второй версии осталось два конкретных дефекта. Зелёное свечение на буквах выбивалось из визуального языка. Некоторые движения запускались дважды и создавали эффект лага или «гармошки». Обе проблемы можно проверить глазами и привязать к сцене.
Пиши правку как баг-репорт: таймкод, объект, фактическое поведение, ожидаемое поведение. Попроси сохранить все сцены, которые уже работают. Полная пересборка после каждой мелкой ошибки легко возвращает старые дефекты или ломает удачный фрагмент.
После исправления Claude должен пройти таймлайн ещё раз и проверить дубли ключевых точек, пересечения объектов, обрезанный текст, случайные эффекты и паузы. Финал начинается не с фразы «выглядит хорошо», а с пустого списка критических дефектов.
Промт 14 строки · 923 знака
Проведи технический аудит текущей 20-секундной анимации. Сначала составь таблицу дефектов: таймкод, объект, фактическое поведение, ожидаемое поведение, предполагаемая причина. Затем исправь только подтверждённые проблемы, сохранив удачные сцены без изменений. Обязательно проверь: случайное зелёное или другое свечение на тексте; повторный запуск одной анимации; дубли ключевых точек; эффект лага или «гармошки»; пересечение объектов; обрезанный текст; скачки масштаба; пустые паузы; выход элементов за холст; несоответствие дизайн-системе. Не пересобирай весь проект, если дефект локальный. После правок повторно проиграй таймлайн от 00:00 до 00:20 и выдай короткий отчёт: что исправлено, что осталось, какие три места человеку нужно посмотреть вручную. Критерий готовности: нет повторных анимаций, случайного свечения, обрезанного текста и визуальных скачков; ролик длится ровно 20 секунд и сохраняет исходный смысл сцен.
Точечная правка и финальный контроль качества.
Проект передаётся в Claude Code целиком
Для звукового сопровождения скачай весь проект, открой его копию в Claude Code и попроси сначала изучить структуру и таймлайн. Звук должен поддерживать уже готовые события: появление текста, переходы, движение интерфейса и финальный акцент.
Дай Claude Code право работать только внутри копии проекта. Пусть он проверит доступные инструменты, предложит план, а затем добавит звуки из разрешённых источников или создаст простые синтетические эффекты. Музыка и чужие аудиофайлы без лицензии в проект не попадают.
Для экспорта зафиксируй H.264, 1920×1080, 20 секунд и совместимый цветовой формат. После рендера проверь файл технически и глазами: длительность, разрешение, первый и последний кадры, плавность, синхронизацию звука и отсутствие чёрных полей.
Промт 14 строки · 1045 знаков
Ты - моушен-инженер и саунд-дизайнер. Работай только внутри копии проекта [ПУТЬ К ПАПКЕ]. Сначала изучи структуру HTML-анимации и таймлайн, ничего не меняй. Определи события, которым нужен звук: появление текста, переход, акцент функции, движение интерфейса и финальный кадр. Предложи короткий план звукового сопровождения с таймкодами и дождись подтверждения. Используй только аудио с подтверждённой лицензией для проекта или создай простые синтетические эффекты локально. Не скачивай и не добавляй чужую музыку без разрешения. После подтверждения добавь звук, сохрани исходную версию и создай отдельную сборку. Затем экспортируй MP4: 1920×1080, ровно 20 секунд, H.264, yuv420p, без чёрных полей и обрезанных элементов. Если в проекте нет готового экспорта, используй доступный локальный инструмент и запиши команду в README. Проверь готовый файл: он открывается, разрешение и длительность совпадают, звук синхронизирован, пики не клиппуют, первый и последний кадры корректны. В отчёте укажи путь к MP4, параметры файла и все изменения проекта.
Звук и горизонтальный MP4 в Claude Code.
Reels требует новой композиции, а не обрезки
Вертикальный ролик собирай отдельной версией проекта. Холст 1080×1920 меняет расстояния, масштаб текста и порядок внимания. Простая обрезка горизонтального кадра потеряет интерфейс по краям и сломает композицию.
Сохрани те же 20 секунд и тот же смысл, но заново расставь объекты в каждой сцене. Главная функция должна оставаться в центральной безопасной зоне. Текст не прижимается к краям, логотип не попадает под элементы интерфейса площадки, мелкие детали продукта увеличиваются.
Отдельная анимация допустима и часто нужна. Вертикальный формат может начинаться с более крупного текста, быстрее раскрывать интерфейс и иначе собирать финальный кадр. Проверяй его как самостоятельный ролик.
Промт 14 строки · 888 знаков
Создай отдельную вертикальную версию текущей 20-секундной анимации для Reels. Размер - 1080×1920. Не обрезай горизонтальный ролик и не растягивай готовый кадр. Пересобери композицию каждой сцены под вертикальный холст: главный объект и ключевой текст держи в центральной безопасной зоне; увеличь важные детали интерфейса; перенеси второстепенные элементы; проверь поля сверху и снизу; не размещай логотип и важный текст у краёв. Сохрани продукт, дизайн-систему, порядок смыслов и общую длительность. Анимацию можно изменить, если вертикальный формат требует другого появления текста, движения камеры или перехода. Не добавляй новые функции и тексты. Экспортируй отдельный MP4 1080×1920, H.264, yuv420p, ровно 20 секунд. Перед завершением проверь читаемость на экране телефона, отсутствие обрезки и наложений, плавность движения, первый и последний кадры. Горизонтальную версию не изменяй.
Отдельная версия 1080×1920 для Reels.
Готовый MP4 проходит 12 проверок
Открой ролик без звука и посмотри один раз. После просмотра должно быть понятно, что делает продукт и какая функция была главной. Затем включи звук и проверь, что акценты помогают движению, а не спорят с ним.
Пройди техническую часть отдельно. Оба файла открываются, имеют правильное разрешение и длятся 20 секунд. Текст не обрезан, логотип не искажён, скриншоты читаются, ключевые объекты не выходят за безопасную область, анимации не повторяются случайно.
Последний проход - по бренду. В ролике используются только разрешённые цвета, шрифты, компоненты и эффекты. Любой новый приём либо добавляется в дизайн-систему, либо удаляется из ролика.
Начни с одного экрана продукта
Для первого прогона не нужен большой рекламный ролик. Возьми одну функцию продукта, 3-5 скриншотов, логотип и один референс движения. Собери дизайн-систему, разложи 20 секунд по сценам и получи первую версию.
После черновика выпиши три самых заметных дефекта. Исправь их по таймкодам, экспортируй горизонтальный MP4 и только потом переходи к Reels. Так ты проверишь весь контур на маленькой задаче и сохранишь рабочие промпты для следующих проектов.
У тебя уже есть всё необходимое: 7 промптов, два формата и 12 точек проверки. Замени поля в квадратных скобках своими данными, а в примерах Yoolip AI перепиши блок продукта под свой сервис. После этого загрузи исходники в Claude.
Связанные материалы
