Как делать AI-видео о продукте, на которых люди перестают листать ленту
Девять реальных роликов, первые кадры, которые изменились, и практический процесс превращения обновления продукта в видео для соцсетей — с Claude Code, HyperFrames и промптами, которые можно использовать повторно.
Примеры
Запускающее видео OpenDesign Motion
Промпт для воссоздания (сам промпт на английском)
A 37s 16:9 launch film, "Introducing OpenDesign Motion" — the open-source alternative to Claude Motion. Playful, premium, minimal text, cut to an upbeat 115 BPM funk track.
Open on a living oil-painting sky where a prompt types itself in the OpenDesign composer; on send, the letters fly into a 3D title. On the drop, the Claude logo appears and "The open-source alternative" slams in above it. Pull back into a tilting wall of motion films and dive into three of them. Beat break: "Not just Opus 5.5." Then "Any model. Any agent." with logos flicking on the beat. In the real OpenDesign workspace, one click on the model pill spins a floating reel of models while the preview swaps films. The preview morphs into the OpenDesign logo, becomes a 3D die rolling one case per face (each arrow styled like its film), and lands on the classic mark — arrow spins on the final hit, "OpenDesign Motion", open-design.ai.Вертикальная версия
Промо-видео Motion Week
Промпт для воссоздания (сам промпт на английском)
A 40s 16:9 main-tweet film for "OpenDesign Motion Week" (Oct 20–27): DeepSeek V4.1 Flash runs at DeepSeek's official off-peak price all day for a week. Key line: "Opus 5.5-level motion. DeepSeek off-peak price." Glitch-hop track, dense playful motion, soft-shadow real-UI cards, Albert Sans with green italic accents. Never hard-shadow sticker style.
A price chart peaks under a DeepSeek ticker card; the OpenDesign arrow cursor grabs the peak and drags it down into a valley. A 3D "50% / Off-peak price" flips to "100% / Full model" with the chip "Official DeepSeek API · not quantized". A split-flap board flips "OCT 20 – 27" to "$60 / WEEK" as the official GO plan logo draws on; tiles compare ×0.5 vs ×0.25. Quick reset beat: the arrow turns once, the 5-hour and 7-day bars refill, "For every subscriber." Giant knockout letters "MOTION" act as windows into motion films; dive in for a beat-cut montage. Then the real flow: OpenDesign composer, Motion design chip, prompt, frames assemble, film plays → an X compose window, post, likes. Four reward objects, one per 1.5 beats: membership (GO/PLUS/PRO/MAX logos), creator verification, early beta access, usage reset card. A pill "Tag @OpenDesignHQ for a chance to win" rides over a tilted wall of posts for ~4s; the posts tile into a mosaic OpenDesign mark and the cursor arcs home into the arrow slot on the final hit.Видео с разъяснением цен
Промпт для воссоздания (сам промпт на английском)
A 45s 16:9 comedic clarifier for OpenDesign Motion Week, with a cute original mascot and a sweet voiceover. Bouncy cute track (~150 BPM). Frame 0 is a full cover card, no entrance: OpenDesign logo, "// quick clarification · Motion Week, Oct 20 – 27", headline "DeepSeek off-peak week, explained." and chips "$60 a week? / Every plan 2× / Off-peak 24/7 / Full model".
Mascot: an original cute girl drawn in halftone — round face, big glossy eyes with two highlights, twin tails with curled ends, blue bows, pink heart-shaped sunglasses, an OpenDesign-logo pin. She is smug: "Think $60 is less than $120?" Record scratch: "Think again." A blue wipe: "It's $60 per week." Cards: usual week $30 vs this week $60, 2× stamp. "You read half. It's double." Then every plan doubles for this model (Go $30→$60, Plus $40→$80, Pro $90→$180, Max $150→$300 per week; resets every 7 days), so this month is "$150+, not $120". A 24-hour dial: off-peak price 24/7. "The full model." Official DeepSeek API, not quantized. A dotted globe with pins: "We serve users worldwide. In some regions, check your network and IP." "Questions? Find us on Discord." End card: "double. all week." Keep it generous and upbeat; never show the offer ending.Видео о настройке в один клик
Промпт для воссоздания (сам промпт на английском)
A 47s 16:9 promo for OpenDesign's One-click agent setup. Happy cartoon track (~95 BPM), playful and eye-catching rather than faithful to the website's design spec. Frame 0: "OpenDesign API into [agent] in one click." with chips for Claude Code, Codex, Grok Build, OpenCode, OpenClaw, Hermes Agent; on each beat the agent name and a full-screen brand-colour flood swap.
Then the green one-click button is clicked on every beat and turns into something new each time: a toggle, a key in a lock, a slot machine of agents, an orbit of models, a crumpled .env file, a plug meeting a socket, confetti. The OpenDesign logo appears, the camera dives into its arrow, and the arrow grows eyes and becomes the guide. It walks through the real pages: OpenDesign app Upgrade → pricing (Go) → checkout ($8 first month) → console → API Keys → "One-click agent setup" → install CC Switch (free, open source) → pick Claude Code + model (default deepseek-v4.1-flash) → "Import into CC Switch" → confirm → a new key "Claude Code · Mac" turns Active. "Your original config is kept. Switch back anytime." Close with "One click. Any agent. Any model." and the path open-design.ai → API Keys → One-click setup; the guide flies back into the logo ring on the final hit.Видео-туториал по API
Промпт для воссоздания (сам промпт на английском)
A 67s 16:9 tutorial: "Use the OpenDesign API in your agent." Playful funk track, no voiceover, English on-screen text. Frame 0 states the topic with agent chips (Claude Code, Codex, Hermes, OpenCode, + more).
Hero character: the arrow from the OpenDesign logo, acting as the cursor. Opening: on each beat the screen floods with a different agent's brand colour while API keys rain into a messy pile, then implode into "One key." Show a wall of supported model logos (official icons from open-design.ai/pricing, never redrawn), then the agents they plug into. Then 3 clear steps in recreated product UI: 1) subscribe to Go monthly ($8 first month, then $10), 2) open the console → API Keys → Create API key, 3) paste the base URL and key into your agent (Chat Completions / Responses: https://amr-link.open-design.ai/v1; Anthropic Messages for Claude Code: https://amr-link.open-design.ai). Mention DeepSeek V4.1 Flash auto-upgraded to 1017 and the 5-hour / 7-day usage reset. Tease One-click setup (coming soon): "3 steps → 1 click", "Click once. Every agent ready." Mask all keys and emails (sk-amr-••••, [email protected]).Видео об обновлениях
Промпт для воссоздания (сам промпт на английском)
A 22s 16:9 promo whose only goal is to get people to open open-design.ai/updates. Playful and bouncy, built in Three.js. Lime (#87EA5C) and ink, two-tone 3D type (ink faces, lime sides) shot at eye level so it reads on a phone.
A gummy, jelly-like 3D "39" (releases since Apr 28) drops in and hops with squash-and-stretch, then flips to "67" (updates). Real update cards swirl around it; four milestone cards fly at the camera: Plugin Everything, Team workspace, Arena, Motion. The cards fall and a 3D "Can't keep up?" lands. A thick 3D screen shows the real Updates page; the cursor taps RSS. The URL "open-design.ai/updates" drops in letter by letter, and an extruded OpenDesign logo lands on the final hit. No video clips, no stat slides.Видео с примерами дизайна
Промпт для воссоздания (сам промпт на английском)
A 34s 16:9 promo for the OpenDesign Showcase (open-design.ai/showcase), a growing library of AI design examples, each with the full prompt that made it. Modern Apple-ad electronic track; smooth, continuous camera (no shaking or beat punches); one main message per screen, held long enough to read.
Frame 0 already carries the headline over a live, moving case (the Harbor Skirmish FPS island): "98+ AI design examples. Every prompt included." The camera glides back into a tilted 3D wall of real cases playing as footage, not screenshots. A giant word "Motion" appears with each letter windowing a different motion film; dive into the "o" for four beat cuts. Then a case goes full-bleed and its prompt card slides up, the prompt types out, a cursor clicks "Copy prompt". Same prompt, different models: side-by-side outputs with white monochrome model logos on a 3D arc. Never imply a fixed size — say "and counting", "latest models". End on the OpenDesign logo and the URL.Видео об использовании
Промпт для воссоздания (сам промпт на английском)
A 19s 16:9 quote-tweet video for OpenDesign's new Usage page. Same visual language and music grid as the Motion Week film. Opens on "How much have you used?"
Path in recreated product UI: Console → choose workspace → Usage (right under API Keys). A table of calls shows time, member, model, input/output/cache tokens and credits; filters by member, model and time range. Hover the ⓘ next to credits to open the breakdown: DeepSeek V4.1 Flash multiplier ×0.5 → ×0.25 during Motion Week. Click the underlined rules link: a browser bar types open-design.ai/model-credits and the page "Design Plan credit multipliers" slides in. End: "Stay on top of your usage. Track every call. Plan every credit." + OpenDesign logo.Начинайте с поста, а не с анимации
Прежде чем открывать таймлайн, напишите по одному предложению в ответ на каждый вопрос:
- Где это появится? Основной анонс, дополнительный пост, туториал или разъяснение?
- Что должен понять зритель? Выберите одну мысль, которую ролик может продемонстрировать.
- Что должно произойти дальше? Перейти на страницу, попробовать функцию, сохранить шаги, ответить или создать проект?
Для основного запуска покажите самый сильный результат продукта как можно раньше и сделайте ролик понятным без пояснений. Для дополнительного поста выделите один ракурс. Для разъяснения сначала явно назовите исправленный факт, а уже потом переходите к шутке или визуальным украшениям.
Ваш первый результат: короткий бриф с аудиторией, местом размещения, одним сообщением, одним действием и источником каждого утверждения о продукте. Если два сообщения конкурируют, разделите их на два ролика.
Шаг 1. Составьте бриф, который можно проверить
Сначала настройте Claude Code. В кратком руководстве HyperFrames сейчас описана такая установка плагина:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesВ Claude Code вызовите /hyperframes:hyperframes в отдельной папке проекта. Попросите создать короткую тестовую композицию, показать предпросмотр и экспортировать MP4, прежде чем начинать ролик для кампании. Следуйте инструкциям по рендеру установленного плагина, чтобы команды соответствовали вашей версии.
Создайте BRIEF.md в проекте видео. Включите актуальный URL продукта, утверждённые формулировки, точные единицы измерения для чисел и дату, когда вы их проверили. Цена без периода оплаты — неполный факт. Количество библиотек из прежней записи — не текущее количество.
Соберите официальный логотип, фирменную графику, скриншоты или записи экрана, оригинальные примеры и референсные ролики, которые вам разрешено изучать. Храните исходные материалы отдельно от экспортов, чтобы можно было заменить скриншот, не потеряв ранее утверждённую версию монтажа.
Используйте Claude Code для планирования и реализации проекта, HyperFrames для рендеринга анимации на основе HTML, а GSAP или Three.js — когда они нужны визуальной идее. Для работы со звуком используйте FFmpeg, а для озвучки — Kokoro TTS. Не обязательно применять все инструменты в каждом ролике: анонсу на основе типографики может хватить двумерной композиции.
Прежде чем планировать демонстрацию, откройте реальный продукт. Проверьте названия в навигации, порядок кнопок и результат. Используйте демо-аккаунт и замените реальные ключи, адреса и названия рабочих пространств до записи.
Шаг 2. Выберите направление до рендеринга
Попросите два-три конкретных направления: первый кадр, повторяющийся визуальный приём, последовательность планов и финал. Каждое направление должно объяснять, как оно доносит один и тот же бриф.
Не выбирайте между расплывчатыми прилагательными вроде «премиальный» и «игривый». Выбирайте между видимыми идеями: стрелка, тянущая цену вниз, курсор, собирающий процесс настройки, или пружинящее число, открывающее стену обновлений.
Если направление неочевидно, запросите несколько стайл-фреймов. В них должны быть настоящие слова и реальные материалы, особенно самый длинный заголовок и самый загруженный кадр интерфейса. Утвердите композицию и сообщение, прежде чем делать полный рендер.
Видео об обновлениях — полезный контрпример. Его итерации прошли через счётчик версий, таймлайн, флипбук, живописную обработку и, наконец, пружинящие трёхмерные цифры. Бесконечные рендеры не заменили согласования направления.
Шаг 3. Выберите музыку и спланируйте биты
Прослушайте кандидатов сами. Попросите у агента ссылки для предпрослушивания, сведения о лицензии и описание вступления, нарастания и дропа. Не выбирайте только по рейтингу популярности или имени файла.
Сопоставьте собственную структуру трека с историей: исходное утверждение, демонстрация, развязка и финальная карточка. Монтируйте по музыкальным границам и сохраняйте фразу. Если хорошей сцене нужно больше времени, пересмотрите музыкальный монтаж, а не удаляйте сцену ради произвольной длительности.
Если в ролике есть закадровый текст, установите тайминг речи до тонкой настройки анимации. Сделайте сообщение понятным без звука, а затем используйте звук, чтобы добавить энергии и прояснить действия.
Проверьте лицензию на предполагаемое коммерческое использование. Регистрация в Content ID и разрешение на использование трека — разные вопросы: отсутствие автоматических претензий не доказывает наличие лицензии. Храните лицензию и источник вместе с проектом.
Шаг 4: Поручите первому кадру задачу
Поставьте видео на паузу на нулевой секунде. Сможет ли человек, который никогда не видел публикацию, понять, о чём это видео? Почти пустой кадр, который проясняется секундой позже, может не пройти эту проверку.
Впишите в композицию короткий читаемый заголовок. Покажите на экране продукт или проблему. Используйте первое движение, чтобы развивать это сообщение, а не заставляйте зрителя ждать появления заголовка.
Уточнение: число превратилось в объяснение
Обзор API: пустое начало превратилось в обещание
Настройка в один клик: вопрос превратился в ответ
Проверяйте эти кадры в размере телефона. Если заголовок приходится увеличивать, уберите конкурирующее оформление или перекомпонуйте кадр. Не рассчитывайте, что сопроводительная публикация объяснит нечитаемое изображение.
Шаг 5: Анимируйте историю, а не стопку карточек
Выберите один повторяющийся элемент, который свяжет сцены: курсор, стрелку, персонажа или объект. Дайте ему причину двигаться. Стрелка может вытянуть цену; курсор может провести через настройку; счётчик может показать растущую коллекцию.
Используйте настоящий интерфейс продукта, когда шаг зависит от реального элемента управления. Декоративный макет интерфейса может выглядеть аккуратнее, но научить неверному действию. Пусть ключевую фразу несёт крупный шрифт, а детали — демонстрация.
Для объёмной типографики проверяйте контраст между лицевой стороной и боковыми гранями каждой буквы. Сохраняйте угол обзора достаточно простым, чтобы число сразу узнавалось. Убирайте мелкие подписи и декоративные HUD-линии, если они спорят с сообщением.
В отрендеренной анимации каждый кадр должен воспроизводиться по своей временной метке. Избегайте логики анимации, которая зависит от того, что предыдущий кадр уже был обработан: сегментированный или параллельный рендеринг может вычислять кадры не по порядку. Проверьте несколько непоследовательных временных меток, прежде чем тратить время на полный экспорт.
Шаг 6. Просмотрите полный экспорт
Стайл-фреймы подтверждают композицию; только экспорт показывает темп, переходы, звук и финал. Каждый полный черновой рендер смотрите дважды: со звуком и без. Затем изучите моменты, которые не сработали.
Давайте три–шесть конкретных замечаний за раунд. Для каждого укажите диапазон времени или сцену, опишите видимую проблему и желаемый результат. Также назовите то, что нужно оставить без изменений. «Первый заголовок работает, оставьте его. На 8–11 секундах карточки становятся слишком мелкими для чтения на моём телефоне» — это применимое замечание.
Если ваша реакция — лишь «плоско» или «некрасиво», попросите диагноз до очередной полной переделки. Проблема в ритме, контрасте, типографике, движении камеры или в слишком большом числе несвязанных элементов? Выберите наименьшее изменение, решающее реальную проблему.
Завершите обратную связь просьбой самостоятельно проверить родственные проблемы. Это не заменяет ваш просмотр, но не даёт реализации остановиться на буквальном списке комментариев.
Шаг 7. Перепроверьте факты и экспортируйте
Используйте актуальный утверждённый бриф как чек-лист. Сверьте с источниками цены и единицы, названия функций, количества, логотипы, URL и даты предложений. Если запуск ещё меняется, задержите экспорт до стабилизации фактов.
Проверьте скриншоты на ключи, адреса электронной почты, названия рабочих пространств и данные аккаунта. Используйте очевидно демонстрационные значения, а не правдоподобные учётные данные. Убедитесь, что примеры, персонажи, музыку и голосовые материалы можно использовать в планируемой публикации.
Просмотрите экспортированный файл от начала до конца. Убедитесь, что звук есть там, где задумано, текст переживает сжатие, финал держится на экране достаточно долго, а последний кадр случайно не пустой. Сохраните редактируемый проект, бриф, лицензированные материалы и утверждённый экспорт.
Шаг 8. Перекомпонуйте, опубликуйте и сделайте выводы
Создайте дополнительное соотношение сторон после утверждения основной версии. Переместите текст, измените масштаб главного героя и выберите, какие кадры интерфейса должны остаться целыми внутри карточки. Обрезка горизонтального файла не заменяет проверку каждого плана.
Пишите пост вокруг того же единственного сообщения. Согласуйте призыв к действию в посте и на финальной карточке. Если используете отслеживаемую ссылку, проверьте место назначения и зафиксируйте названия кампании до публикации.
После публикации ищите повторяющиеся вопросы и недопонимания. Они могут стать следующим коротким роликом. Сравнивайте результаты в одном и том же отчётном окне и различайте охват, вовлечённость, визиты и действия в продукте.
Готовые промпты
Замените значения в скобках перед использованием шаблонов.
Начальный бриф
Я хочу продвигать [функцию, страницу или кампанию]: [URL].
Аудитория: [кому это важно].
Размещение: [основной анонс / дополнительный пост / туториал / разъяснение].
Одно сообщение: [единственное, что должны понять зрители].
Следующее действие: [перейти / попробовать / сохранить / ответить / создать].
Основной формат: 16:9. Затем спланируйте отдельно скомпонованную версию 9:16.
Факты и источники:
[Актуальная документация продукта, утверждённый бриф, страница цен и дата проверки.]
Запишите проверенные утверждения и их единицы в BRIEF.md. Отметьте всё сомнительное.
Материалы:
- Официальный логотип: [путь]
- Фирменная графика и оригинальные примеры видео: [пути]
- Демо-доступ к продукту или очищенные записи экрана: [детали]
Реализация: Claude Code + HyperFrames; используйте GSAP или Three.js, когда это требуется идее.
Используйте реальные шаги продукта. Не раскрывайте учётные данные или личные данные аккаунта.
Изучайте референсы для композиции и анимации; не используйте чужие видео без разрешения.
Первый кадр должен объяснять, что это такое. Ключевой текст должен читаться на телефоне.
Показывайте ценность продукта через движение и демонстрацию. Избегайте мелких декоративных подписей.
Для музыки дайте ссылки для предпрослушивания и сведения о лицензии, чтобы я проверил и выбрал.
Не рендерите полный ролик пока. Предложите 2–3 конкретные концепции с первым кадром,
визуальным героем, последовательностью планов, звуковым направлением и финалом.Рецензия на итерацию
Сохраните эти утверждённые части: [сцены, тайминги, типографика или музыка].
1. На [временной метке / в сцене] я вижу [конкретную проблему].
Вместо этого зритель должен понять или почувствовать [желаемый результат].
2. На [временной метке / в сцене] измените [конкретный элемент], потому что [причина].
3. На [временной метке / в сцене] проверьте [читаемость / темп / звук / точность по продукту].
Объясните причину, прежде чем делать масштабную переработку. Проверьте соседние сцены на ту же проблему.
Сохраните утверждённый бриф и несвязанные части. Отрендерите новый полный MP4.
Просмотрите экспорт и сообщите о любых оставшихся проблемах, прежде чем передавать результат.Финальная проверка экспорта
Проверьте итоговый экспортированный MP4, а не только исходную композицию.
- В нулевой момент поймёт ли новый зритель тему в размере телефона?
- Понятно ли единственное сообщение без звука?
- Сверены ли шаги интерфейса, числа, единицы, логотипы и URL с BRIEF.md?
- Удалены ли личные данные аккаунта?
- Задокументированы ли разрешения на музыку, примеры, персонажа и голос?
- Правильно ли отображается каждый переход на непоследовательных временных метках?
- Просмотрели ли вы полный экспорт со звуком и проверили ли финальную карточку?
- Перекомпонована ли вертикальная версия и просмотрена ли она отдельно?
Перечислите фактически выполненные проверки, нерешённые проблемы и точный просмотренный экспорт.
Не отмечайте невыполненные проверки как пройденные.Частые вопросы
Нужен ли для этого процесса After Effects?
Показанный процесс использует Claude Code и рендеринг на основе HTML с HyperFrames. After Effects не требуется. Вам всё равно нужно выстраивать историю, проверять материалы и просматривать экспортированную анимацию и звук.
С чего начинать: с полного рендера или стайл-фреймов?
Начинайте со стайл-фреймов, если визуальное направление неочевидно. Когда концепция согласована, просматривайте полные экспорты, чтобы оценить тайминг и звук. Ни один вид проверки не заменяет другой.
Какой длины должно быть видео о продукте?
Достаточной, чтобы донести единственное сообщение без воды. Исходные примеры варьируются от коротких продолжений до более длинного разбора настройки. Выбирайте длительность под задачу и проверяйте, нужен ли каждой сцене её фрагмент.
Можно ли использовать тот же монтаж для вертикального формата?
Используйте ту же историю и материалы, но проверяйте композицию план за планом. Демонстрациям интерфейса часто нужна целая карточка или новая компоновка, чтобы оставаться читаемыми в 9:16.
Ваш первый проект
Выберите одну реальную функцию и одно действие, которое должен выполнить зритель. Напишите бриф, выберите первый кадр, утвердите визуальное направление и сделайте один полный горизонтальный ролик. Просмотрите его на телефоне, прежде чем переходить к дополнительным форматам или сопровождающим постам.
