# 20 секунд моушена в обычном Claude

Как собрать 20-секундную продуктовую анимацию, исправить её по референсу и получить форматы 1920×1080 и 1080×1920 без отдельной подписки на Claude Motion.

Claude Motion появился 8 октября и умеет превращать данные, интерфейсы и идеи в анимированные ролики. Доступ к нему ограничен тарифами Team и Enterprise. При этом сам принцип можно повторить в обычном Claude: собрать дизайн-систему, создать HTML-анимацию, доработать её по референсу и экспортировать результат в MP4.

Внутри - полный маршрут от трёх исходников до двух готовых форматов. Ты получишь 7 промптов: для дизайн-системы, сценария, первой генерации, разбора референса, исправления дефектов, экспорта со звуком и версии для Reels.

Результат этого процесса - 20-секундная продуктовая анимация в фирменном стиле. Дополнительных сервисов генерации видео не требуется: работа идёт внутри стандартной подписки Claude и, при необходимости, в Claude Code.

- «3 ИСХОДНИКА» — скриншоты, логотип, референс
- «20 СЕКУНД» — готовая продуктовая анимация; стрелка «7 промптов и две версии MP4»

## Один ролик прошёл путь 20 + 19 + 5 минут

Первая версия собиралась около 20 минут. Она уже работала в формате 1920×1080, но движение жило почти только внутри скриншотов. Вторая версия после повторного разбора референса заняла ещё 19 минут. Экспорт MP4 потребовал около 5 минут, а отдельная вертикальная версия - около 10.

Это время конкретного проекта, а не обещание скорости для любой задачи. На результат влияют длина ролика, количество сцен, качество исходников и число итераций. Здесь Claude создал 207 HTML-анимаций через ключевые точки, поэтому даже короткий ролик оказался полноценной сценой, а не одной движущейся картинкой.

Смотри на эти цифры как на ориентиры процесса. Основная работа человека происходит до генерации: выбрать материал, сформулировать задачу и точно назвать дефекты. Ожидание можно оставить Claude.

врезка `// честно`: текст «Время генерации не равно времени твоей работы. Чем точнее входные данные, тем меньше итераций приходится переделывать.»

карточка 1 — метка «первая версия» / значение «≈ 20 минут» / капшен «1920×1080»; карточка 2 — метка «версия по референсу» / значение «19 минут» / капшен «пересобранное движение»; карточка 3 — метка «экспорт» / значение «≈ 5 минут» / капшен «MP4 на рабочем столе»; карточка 4 — метка «вертикальный формат» / значение «≈ 10 минут» / капшен «1080×1920». Ключевая — #2

## До первого сообщения собери три группы исходников

Начни со скриншотов продукта. Выбери экраны, на которых видны ключевые функции и понятен путь пользователя. Каждый скрин должен отвечать на один вопрос: что именно зритель должен заметить за эти 2-4 секунды.

Добавь логотип и ссылку на сайт. Сайт нужен Claude как источник реальной палитры, типографики, формы кнопок, карточек и общего ритма. Если у бренда есть отдельные файлы шрифтов или гайдлайн, приложи их в тот же чат.

Третья группа - один основной видеореференс и 2-3 дополнительных кадра. В Pinterest удобно искать композицию и движение по запросу `Claude Motion`, но выбирай референс по механике: как появляется текст, куда движется камера, как раскрываются элементы интерфейса. Чужие логотипы, тексты и графику переносить не нужно.

карточка 1 — метка «01» / значение «ПРОДУКТ» / капшен «скриншоты ключевых функций»; карточка 2 — метка «02» / значение «БРЕНД» / капшен «логотип, сайт, шрифты»; карточка 3 — метка «03» / значение «ДВИЖЕНИЕ» / капшен «один ролик и 2-3 кадра»

## Сначала зафиксируй бренд, потом запускай движение

Открой Claude Design и создай новую дизайн-систему. Прикрепи скриншоты приложения, логотип, ссылку на сайт и дополнительные материалы бренда. Claude должен не нарисовать одну красивую страницу, а извлечь правила, которые можно повторять в следующих проектах.

Через несколько минут проверь результат. В системе должны быть конкретные цвета, типографика, сетка, компоненты, правила работы с логотипом и базовые принципы движения. Удали элементы, которых нет в исходниках. Если Claude предлагает декоративный приём от себя, попроси показать, из какого материала он его вывел.

Такая система пригодится дальше для моушен-графики, SMM-материалов и новых страниц сайта. Один раз зафиксированный визуальный язык становится общим контекстом для следующих чатов.

```
Мне нужно создать дизайн-систему по моему онлайн-сервису yoolip.ai.
В эту дизайн-систему должны входить цвета кнопки и всё остальное, что можно взять с основного сайта. Цель этой дизайн-системы: создавать motion-анимации и анимационные презентации для продвижения моего SaaS.
Используй основной сайт, прикреплённые скриншоты интерфейса и логотип как источники. Не добавляй цвета, шрифты, компоненты и декоративные приёмы, происхождение которых нельзя объяснить этими материалами.
Зафиксируй палитру с назначением цветов, типографику и иерархию, сетку и отступы, кнопки и другие повторяемые компоненты, правила использования логотипа, а также принципы анимации текста, интерфейса и переходов.
Если каких-то данных на сайте и в приложенных материалах нет, не придумывай их. Перечисли такие пробелы отдельно. В конце проверь, что система подходит для motion-анимаций и анимационных презентаций и что каждое правило связано с исходным материалом.
```

_Готовый запрос для создания дизайн-системы._

- 01 «прикрепить» — метрика «3 группы» — продукт, бренд, референс
- 02 «извлечь» — метрика «7 слоёв» — от палитры до движения
- 03 «проверить» — метрика «0 выдумок» — каждое правило связано с исходником
- 04 «сохранить» — метрика «1 система» — для следующих чатов и форматов

## Преврати идею ролика в техническое задание по секундам

Новый чат нужен для отдельной задачи: подготовить точный промпт на анимацию. Прикрепи созданную дизайн-систему и опиши продукт обычными словами. Назови аудиторию, цель ролика, главную функцию и действие, которое зритель должен понять после просмотра.

Затем задай формат: 20 секунд, 1920×1080, конкретное число сцен и порядок смыслов. Добавь желаемую механику движения. Текст, интерфейс и логотип должны иметь свою роль в таймлайне, иначе Claude оживит только самые очевидные объекты.

Этот запрос сначала создаёт производственный промпт. Он полезен, когда идея пока существует в виде «хочу показать продукт красиво», а Claude должен превратить её в последовательность сцен с проверяемыми параметрами.

```
Я хочу сделать в 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 вопросов, которые сильнее всего изменят результат. Потом напиши промпт: сцены с таймингом, точные слова на экране, что происходит в кадре, стиль отдельным абзацем. Движение описывай словами режиссёра, а не цифрами.
```

_Запрос, который собирает финальный промпт на анимацию._

- 01 «смысл» — метрика «1 функция» — что должен понять зритель
- 02 «таймлайн» — метрика «20 секунд» — что происходит по секундам
- 03 «движение» — метрика «каждый объект» — появление, акцент, уход
- 04 «приёмка» — метрика «4 проверки» — формат, читаемость, бренд

## Первая генерация нужна для диагноза

Открой новый проект в Claude Design, выбери созданную дизайн-систему и вставь производственный промпт. Приложи исходники ещё раз: новый чат не должен угадывать, какие изображения использовались раньше.

Первая версия может выглядеть аккуратно и всё равно не решать задачу. В кейсе движение оказалось сосредоточено внутри скриншотов, а холст оставался почти статичным. Это полезный результат: теперь видно, какие слои промпта были описаны слабо.

Не проси «сделать динамичнее». Зафиксируй диагноз: какие объекты стоят, где текст появляется слишком просто, какой переход отсутствует, какая сцена не поддерживает смысл. Следующая итерация должна менять названные механики.

```
Создай в 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 меняет движение, а не подменяет твой ролик чужим.

```
Проанализируй прикреплённый видеореференс покадрово и по таймкодам. Сначала ничего не меняй в моём проекте.
Для каждого смыслового отрезка укажи: длительность; композицию; главный объект; положение камеры; появление и уход текста; движение интерфейсных элементов; маски и переходы; ускорение и замедление; паузы; момент визуального акцента.
Отдельно выдели три механики, которые сильнее всего создают ощущение качественного моушена. Не копируй логотипы, тексты, иллюстрации, фирменные элементы и сюжет референса.
После анализа перенеси только найденные механики движения в мой 20-секундный проект. Сохрани мои скриншоты, тексты, логотип, порядок смыслов и дизайн-систему. Особое внимание удели тому, как в референсе визуализируются отдельные элементы сайта и как анимируется текст. Покажи список внесённых изменений с таймкодами.
```

_Разбор референса и перенос механики._

строки «Что разобрать → Что перенести»: таймкод → длительность сцены; текст → появление и уход; интерфейс → маски и фокус; камера → масштаб и траектория; переход → ритм между сценами. Сноска: «чужой бренд и контент не копируются»

## Весь процесс держится на одном цикле

Рабочий контур состоит из шести действий: собрать исходники, зафиксировать дизайн-систему, написать сценарий по секундам, получить первую версию, сравнить её с референсом и внести точечные правки. После этого проект можно экспортировать и адаптировать под другой формат.

Каждый новый чат получает полный контекст своей задачи. Дизайн-система отвечает за бренд. Производственный промпт отвечает за смысл и таймлайн. Референс отвечает за механику движения. Список дефектов отвечает за качество финальной итерации.

Не смешивай эти роли в одном огромном сообщении. Отдельные этапы дают понятную точку проверки: система похожа на бренд, сценарий укладывается в 20 секунд, первая версия читается, референс разобран, дефекты устранены, MP4 открывается.

плашка-термин: «Контур моушена» (последовательность из контекста, генерации, сравнения и точечной правки)

- 01 «исходники» — метрика «3 группы» — скриншоты, логотип, сайт
- 02 «система» — метрика «правила бренда» — цвет, шрифт, компоненты
- 03 «сценарий» — метрика «20 секунд» — смысл и движение
- 04 «генерация» — метрика «1920×1080» — получить черновик
- 05 «референс» — метрика «по таймкодам» — сравнить механику
- 06 «финал» — метрика «2 формата» — исправить и экспортировать

## Правка начинается с таймкода и наблюдаемой ошибки

Во второй версии осталось два конкретных дефекта. Зелёное свечение на буквах выбивалось из визуального языка. Некоторые движения запускались дважды и создавали эффект лага или «гармошки». Обе проблемы можно проверить глазами и привязать к сцене.

Пиши правку как баг-репорт: таймкод, объект, фактическое поведение, ожидаемое поведение. Попроси сохранить все сцены, которые уже работают. Полная пересборка после каждой мелкой ошибки легко возвращает старые дефекты или ломает удачный фрагмент.

После исправления Claude должен пройти таймлайн ещё раз и проверить дубли ключевых точек, пересечения объектов, обрезанный текст, случайные эффекты и паузы. Финал начинается не с фразы «выглядит хорошо», а с пустого списка критических дефектов.

```
Проведи технический аудит текущей 20-секундной анимации. Сначала составь таблицу дефектов: таймкод, объект, фактическое поведение, ожидаемое поведение, предполагаемая причина. Затем исправь только подтверждённые проблемы, сохранив удачные сцены без изменений.
Обязательно проверь: случайное зелёное или другое свечение на тексте; повторный запуск одной анимации; дубли ключевых точек; эффект лага или «гармошки»; пересечение объектов; обрезанный текст; скачки масштаба; пустые паузы; выход элементов за холст; несоответствие дизайн-системе.
Не пересобирай весь проект, если дефект локальный. После правок повторно проиграй таймлайн от 00:00 до 00:20 и выдай короткий отчёт: что исправлено, что осталось, какие три места человеку нужно посмотреть вручную.
Критерий готовности: нет повторных анимаций, случайного свечения, обрезанного текста и визуальных скачков; ролик длится ровно 20 секунд и сохраняет исходный смысл сцен.
```

_Точечная правка и финальный контроль качества._

врезка-пара: левый callout — метка `// дефект 01`, текст «зелёное свечение на буквах»; правый callout — метка `// дефект 02`, текст «двойной запуск движения и эффект лага»

## Проект передаётся в Claude Code целиком

Для звукового сопровождения скачай весь проект, открой его копию в Claude Code и попроси сначала изучить структуру и таймлайн. Звук должен поддерживать уже готовые события: появление текста, переходы, движение интерфейса и финальный акцент.

Дай Claude Code право работать только внутри копии проекта. Пусть он проверит доступные инструменты, предложит план, а затем добавит звуки из разрешённых источников или создаст простые синтетические эффекты. Музыка и чужие аудиофайлы без лицензии в проект не попадают.

Для экспорта зафиксируй H.264, 1920×1080, 20 секунд и совместимый цветовой формат. После рендера проверь файл технически и глазами: длительность, разрешение, первый и последний кадры, плавность, синхронизацию звука и отсутствие чёрных полей.

```
Ты - моушен-инженер и саунд-дизайнер. Работай только внутри копии проекта [ПУТЬ К ПАПКЕ]. Сначала изучи структуру HTML-анимации и таймлайн, ничего не меняй. Определи события, которым нужен звук: появление текста, переход, акцент функции, движение интерфейса и финальный кадр.
Предложи короткий план звукового сопровождения с таймкодами и дождись подтверждения. Используй только аудио с подтверждённой лицензией для проекта или создай простые синтетические эффекты локально. Не скачивай и не добавляй чужую музыку без разрешения.
После подтверждения добавь звук, сохрани исходную версию и создай отдельную сборку. Затем экспортируй MP4: 1920×1080, ровно 20 секунд, H.264, yuv420p, без чёрных полей и обрезанных элементов. Если в проекте нет готового экспорта, используй доступный локальный инструмент и запиши команду в README.
Проверь готовый файл: он открывается, разрешение и длительность совпадают, звук синхронизирован, пики не клиппуют, первый и последний кадры корректны. В отчёте укажи путь к MP4, параметры файла и все изменения проекта.
```

_Звук и горизонтальный MP4 в Claude Code._

- 01 «скачать проект» — метрика «полная папка» — HTML, ассеты и таймлайн
- 02 «разметить звук» — метрика «по таймкодам» — событие получает свой акцент
- 03 «собрать копию» — метрика «исходник цел» — изменения не затирают проект
- 04 «экспортировать» — метрика «1920×1080» — H.264 MP4 длительностью 20 секунд

## Reels требует новой композиции, а не обрезки

Вертикальный ролик собирай отдельной версией проекта. Холст 1080×1920 меняет расстояния, масштаб текста и порядок внимания. Простая обрезка горизонтального кадра потеряет интерфейс по краям и сломает композицию.

Сохрани те же 20 секунд и тот же смысл, но заново расставь объекты в каждой сцене. Главная функция должна оставаться в центральной безопасной зоне. Текст не прижимается к краям, логотип не попадает под элементы интерфейса площадки, мелкие детали продукта увеличиваются.

Отдельная анимация допустима и часто нужна. Вертикальный формат может начинаться с более крупного текста, быстрее раскрывать интерфейс и иначе собирать финальный кадр. Проверяй его как самостоятельный ролик.

```
Создай отдельную вертикальную версию текущей 20-секундной анимации для Reels. Размер - 1080×1920. Не обрезай горизонтальный ролик и не растягивай готовый кадр.
Пересобери композицию каждой сцены под вертикальный холст: главный объект и ключевой текст держи в центральной безопасной зоне; увеличь важные детали интерфейса; перенеси второстепенные элементы; проверь поля сверху и снизу; не размещай логотип и важный текст у краёв.
Сохрани продукт, дизайн-систему, порядок смыслов и общую длительность. Анимацию можно изменить, если вертикальный формат требует другого появления текста, движения камеры или перехода. Не добавляй новые функции и тексты.
Экспортируй отдельный MP4 1080×1920, H.264, yuv420p, ровно 20 секунд. Перед завершением проверь читаемость на экране телефона, отсутствие обрезки и наложений, плавность движения, первый и последний кадры. Горизонтальную версию не изменяй.
```

_Отдельная версия 1080×1920 для Reels._

- версус-карточки A/B: «1920×1080» — подпись «горизонтальный ролик», композиция «широкая» / интерфейс «несколько зон» / экспорт «основной MP4»
- «1080×1920» — подпись «отдельная версия Reels», композиция «вертикальная» / интерфейс «центральный фокус» / экспорт «отдельный MP4». Наше — второе.

## Готовый MP4 проходит 12 проверок

Открой ролик без звука и посмотри один раз. После просмотра должно быть понятно, что делает продукт и какая функция была главной. Затем включи звук и проверь, что акценты помогают движению, а не спорят с ним.

Пройди техническую часть отдельно. Оба файла открываются, имеют правильное разрешение и длятся 20 секунд. Текст не обрезан, логотип не искажён, скриншоты читаются, ключевые объекты не выходят за безопасную область, анимации не повторяются случайно.

Последний проход - по бренду. В ролике используются только разрешённые цвета, шрифты, компоненты и эффекты. Любой новый приём либо добавляется в дизайн-систему, либо удаляется из ролика.

врезка `// проверка`: текст «Ролик готов, когда смысл читается без звука, техника проходит проверку, а визуальные решения объясняются дизайн-системой.»

карточка 1 — метка «01» / значение «смысл» / капшен «главная функция понятна после одного просмотра»; карточка 2 — метка «02» / значение «таймлайн» / капшен «ровно 20 секунд без пустых пауз»; карточка 3 — метка «03» / значение «техника» / капшен «MP4 открывается, размер совпадает»; карточка 4 — метка «04» / значение «бренд» / капшен «цвета, шрифты и логотип по системе»; карточка 5 — метка «05» / значение «движение» / капшен «нет дублей, лагов и случайного свечения». Ключевая — #5

## Начни с одного экрана продукта

Для первого прогона не нужен большой рекламный ролик. Возьми одну функцию продукта, 3-5 скриншотов, логотип и один референс движения. Собери дизайн-систему, разложи 20 секунд по сценам и получи первую версию.

После черновика выпиши три самых заметных дефекта. Исправь их по таймкодам, экспортируй горизонтальный MP4 и только потом переходи к Reels. Так ты проверишь весь контур на маленькой задаче и сохранишь рабочие промпты для следующих проектов.

У тебя уже есть всё необходимое: 7 промптов, два формата и 12 точек проверки. Замени поля в квадратных скобках своими данными, а в примерах Yoolip AI перепиши блок продукта под свой сервис. После этого загрузи исходники в Claude.

- 01 «собрать исходники» — метрика «3-5 скриншотов» — выбрать одну функцию продукта
- 02 «создать систему» — метрика «1 бренд» — зафиксировать визуальные правила
- 03 «запустить ролик» — метрика «20 секунд» — получить первую рабочую версию

карточка 1 — моно-метка «инструмент», заголовок «Claude», описание «Создай новый проект и прикрепи исходники», кнопка «Открыть Claude»; карточка 2 — моно-метка «материал», заголовок «7 готовых промптов», описание «Замени переменные и блок продукта своими данными», кнопка «Сохранить 7 промптов»

3 группы исходников · 7 промптов · 20 секунд · 2 формата · 12 проверок

---

Источник: https://localhost:3000/m/20-sekund-moushena-v-obychnom-claude