Анимацию раньше заказывали в самом конце и за отдельные деньги. Сейчас Claude пишет её кодом: логотип, кнопки, первый экран сайта, видео-объяснение и демо продукта. Ниже пять промптов под каждую анимацию, как сохранить результат в SVG и в видео и чем собрать ролик без монтажёра.
Внутри: 5 промптов для Claude под логотип, микроанимации, первый экран сайта, видео-объяснение и демо, как забрать результат в SVG, HTML и MP4.
Как это работает
Claude не рисует кадры как видеоредактор. Он пишет код анимации: SVG, CSS или HTML-страницу, которая двигается. Отсюда три следствия.
Результат открывается в браузере сразу, его видно в окне предпросмотра Claude (вкладка с артефактом).
Правки идут словами: «медленнее», «логотип собирается из точек», «цвет как у кнопки на сайте».
Видео получается записью этой страницы: экраном или инструментом, который превращает HTML в MP4 (ниже).
Перед первым промптом подготовь три вещи: логотип в SVG или PNG на прозрачном фоне, два-три фирменных цвета в формате #RRGGBB и одну фразу, какое настроение у бренда.
Промпт 1. Анимация логотипа
Даёт короткую заставку на 2-3 секунды для роликов, сайта и сторис.
Промпт логотипа
Действуй как моушн-дизайнер брендов. Вот мой логотип [прикрепи файл или опиши: форма, буквы]. Фирменные цвета: [#цвет1, #цвет2]. Настроение бренда: [например, спокойный премиум]. Сделай анимацию логотипа на 2,5 секунды одним HTML-файлом на чистом SVG и CSS, прозрачный фон, без внешних библиотек. Сценарий: элементы появляются по очереди, в конце логотип стоит 0,8 секунды целиком. Дай три варианта движения: сборка из линий, проявление с лёгким масштабом, буквы по одной. Каждый вариант отдельным файлом, в начале файла комментарий, как поменять длительность и цвета. Если логотип сложный и SVG не получается, упрости форму и напиши, что именно упростил.
Для сайта бери SVG-вариант как есть.
Для видео открой файл в браузере на чёрном или зелёном фоне и запиши экран, либо собери MP4 через HyperFrames (раздел ниже).
Промпт 2. Микроанимации
Кнопки, загрузка, галочка «готово». Мелочь, из-за которой продукт выглядит дорогим.
Промпт микроанимаций
Действуй как продуктовый дизайнер интерфейсов. Мой продукт: [что это и для кого]. Цвета: [#основной, #фон]. Сделай набор микроанимаций одним HTML-файлом на CSS: кнопка при наведении и нажатии, индикатор загрузки, галочка успешной оплаты, всплывающее уведомление. Каждая анимация до 400 мс, плавность ease-out, без резких вспышек. Покажи все четыре на одной странице с подписями и рядом дай CSS-код каждой отдельным блоком для копирования.
Промпт 3. Первый экран сайта
Самое видимое место, за которое обычно платят студии.
Промпт первого экрана
Действуй как веб-дизайнер премиальных лендингов. Сделай первый экран сайта для [продукт/услуга] одним HTML-файлом: заголовок «[твой заголовок]», подзаголовок «[одна строка]», кнопка «[текст кнопки]», фон [фото товара / градиент #цвет1 → #цвет2]. Анимации: заголовок проявляется по словам за 0,8 с, кнопка мягко пульсирует раз в 4 секунды, при прокрутке фон уходит медленнее текста. Адаптив под телефон обязателен. В конце объясни, куда в коде вставить мой текст и картинку.
Промпт 4. Видео-объяснение
Короткий ролик, который показывает, как работает твой продукт.
Промпт видео-объяснения
Действуй как режиссёр анимированных объяснялок. Продукт: [что это]. Главная польза: [одна фраза]. Сделай ролик на 20 секунд как HTML-страницу 1080x1920, которая проигрывается сама: 4 сцены по 5 секунд. Сцена 1 проблема клиента, сцена 2 продукт, сцена 3 как это работает в трёх шагах иконками, сцена 4 результат и призыв «[призыв]». Текст крупный, не больше 8 слов на сцену, мои цвета [#цвет1, #цвет2]. Добавь кнопку «Сначала», чтобы запускать заново для записи экрана.
Показ интерфейса с кликами и переходами, который раньше делал моушн-дизайнер кадр за кадром.
Промпт демо
Действуй как моушн-дизайнер запусков приложений. Вот скриншоты моего приложения или сайта [прикрепи 2-4 скрина]. Пересобери интерфейс в HTML так, чтобы он выглядел как на скринах, и сделай демо на 15 секунд: курсор нажимает [кнопка 1], открывается [экран 2], появляется [результат]. Курсор движется плавно, нажатие показывай кружком. Формат 1080x1350, фон [#цвет], телефон или окно браузера по центру.
Как превратить код в видео без монтажёра
Два пути, от простого к точному.
Запись экрана: открой HTML в браузере на весь экран и запиши встроенной записью экрана телефона или компьютера. Подходит для сторис и тестов.
HyperFrames: открытый инструмент от HeyGen, который превращает HTML-страницу в MP4 кадр в кадр, одинаково каждый раз. Подходит, когда нужен чистый ролик без рывков.
Если Claude выдал анимацию, которая дёргается, напиши: «Сделай движения плавнее, используй transform и opacity, без анимации ширины и высоты». Это лечит большинство рывков.
А можно, чтобы это делал агент сам
Всё, что ты сейчас прочитал, можно не делать руками каждый раз. У меня это делает ИИ-агент: живёт в Телеграме и работает по голосовым задачам с телефона.
Анимации под новый продукт агент собирает сам: говоришь голосом, что нужно, получаешь готовые файлы и ролик в чат.
Ставится за вечер по пошаговой инструкции, без программиста.
Дальше говоришь задачу голосом, он приносит готовый результат в чат.
Как поставить такого агента себе, расскажу тебе в чате, загляни туда.
Следующий шаг
Хочешь так же, но под свой блог и продукт?
Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.