К основному содержанию
скилл CX Codex

launch-video · charlie947 — скилл для Claude Code: что делает и как установить

Собирает промо-ролики для запуска продуктов на 30–45 секунд в виде автономного HTML-файла с покадровой анимацией и экспортом в MP4. Пригодится при релизе SaaS или курса.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add charlie947/motion-graphics-skills --skill launch-video -a claude-code
Открыть на GitHub

Что делает launch-video

Скилл генерирует промо-видео длительностью 30–45 секунд в виде одного автономного файла index.html. Внутри реализуется функция window.seek(seconds), которая вычисляет точный кадр для каждой секунды без внешних сетевых зависимостей. Затем готовый файл рендерится в видео MP4 через открытый инструмент HyperFrames.

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

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

Какие задачи решает

  • собрать промо-ролик для запуска SaaS в виде автономного HTML-файла
  • разложить сообщение о продукте на выверенные такты по 45-секундной сетке
  • экспортировать готовую веб-анимацию в MP4 через HyperFrames для соцсетей
  • исключить фальшивые отзывы и выдуманные цифры в рекламных материалах

Примеры запросов агенту

  • Сделай launch video для моего SaaS на 45 секунд в формате 16:9
  • Подготовь промо-ролик для запуска курса по сетке beats из launch-video
  • Собери index.html с window.seek для анонса обновления продукта

Как установить launch-video

1Через Skills CLI (Vercel)

npx skills add charlie947/motion-graphics-skills --skill launch-video -a claude-code

2Вручную: положить файлы

~/.claude/skills/launch-video/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/launch-video/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о launch-video

Как установить launch-video в Claude Code?

Выполните команду npx skills add charlie947/motion-graphics-skills --skill launch-video -a claude-code. Также можно вручную поместить файл в ~/.claude/skills/launch-video/SKILL.md.

Что делает скилл launch-video?

Он создаёт структуру сцен и генерирует страницу index.html с кодовой анимацией запуска продукта на 30–45 секунд. Скрипт разбивает видео на 7 тактов и готовит ролик к рендерингу в MP4.

Как экспортировать полученное видео в MP4?

Для экспорта используется утилита HyperFrames: добавьте её командой npx skills add heygen-com/hyperframes и запустите экспорт через npx hyperframes render.

Исходный текст

SKILL.md · MIT
---
name: launch-video
description: Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".
---

# Launch video, built in code

A launch video sells one thing in 30-45 seconds. You build it as one HTML file with `window.seek(seconds)`, then export to MP4.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## Step 1: Ask for five things, then wait

1. **What's launching,** in one line. Example: "LinkedIn AI OS, a six-week cohort that sets up your content system."
2. **The one sentence** the video says, split into 3-5 beats. Example: "Your next post, / in your voice, / checked before you see it."
3. **Proof.** Real screenshots of the product, real results with their source, or real customer posts. Attached files only.
4. **The call to action,** word for word, exactly as it appears on the sales page.
5. **Brand.** Hex codes, font, logo file. Plus the size: 1920 x 1080, 1080 x 1350 or 1080 x 1920.

Never invent a price, a date, a "spots left" count, a testimonial or a result.

## What "premium" means here (learned the hard way)

Three first drafts were rejected as "not premium" and "not my brand colours". What fixed it:
- **Your real brand colours,** sampled from your landing page or your best graphic. Never a default palette.
- **Glass UI.** Product surfaces as frosted, liquid-glass panels with soft depth, like Apple's current UI.
- **The prompt typed live** into a real-looking input box. That is the one place typing belongs.
- **Real, recent work** on the proof cards, not old examples.
- **Variety.** No two beats share the same layout.

Build the first 10 seconds in two or three styles first. Pick one. Only then build the rest.

## Step 2: Lay out the beats

Default 7 beats, 45 seconds:

| # | Time | Beat |
|---|---|---|
| 1 | 0-4s | First words of the sentence, big, on a clean background. The hook. |
| 2 | 4-9s | Next words over real proof (posts, results, screens). |
| 3 | 9-17s | The product working: a screen, a cursor typing a real prompt, the output appearing. |
| 4 | 17-22s | The quality beat: something checks, passes or ticks. |
| 5 | 22-32s | How it works: steps, weeks or features as one simple visual. |
| 6 | 32-38s | The number that matters, counted up, with its source. |
| 7 | 38-45s | Name, call to action, requirement. Holds long enough to read. |

Show the beat sheet and wait for a yes.

## Step 3: Build brief (paste into Claude Code)

```
Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.

Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.

Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.

Beats: follow my beat sheet exactly, with its timings.

Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.

After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.
```

## Step 4: Check it like a buyer

- Would a stranger know what's launching by second 4?
- Is every number traceable to a source?
- Does the call to action hold for at least 3 seconds?
- Is it readable on a phone, with the sound off?

## Step 5: Export

HyperFrames (free, open source): `npx skills add heygen-com/hyperframes`, then `npx hyperframes render`. Export a 16:9 and a 4:5 cut. Check which tools exist before installing, and ask first.

© charlie947 · MIT · charlie947/motion-graphics-skills

Похожие скиллы

Всё по теме «Маркетинг и контент» →

Сначала — launch-video от других авторов.

launch-video iart-ai Помогает собрать промо-ролик на 15–60 секунд по структуре хук-тизер-дроп-монтаж-финал. Синхронизирует кадры с битом трека и готовит рендер в 16:9, 9:16 и 1:1. CX Codex +1 964установок hyperframes-registry heygen-com Находит и добавляет в проект около 450 готовых визуальных блоков HyperFrames — от титров до шейдеров. Пригодится, когда видеоэффект проще взять из базы, чем верстать с нуля. CX Codex +1 1 000 000установок 8-bit-orbit-video-template nexu-io Скилл задаёт шаблон ретро-видео в стиле 8-bit для Hyperframes. Он пригодится, когда нужно собрать HTML-композицию из нескольких сцен с переходами и предпросмотром. CX Codex +1 2 800установок weread-year-in-review-video-template nexu-io Создаёт вертикальное HTML-видео 9:16 для годового отчёта о чтении в стиле WeRead: статистика, заметки, ключевые слова и карточка читательского типа. CX Codex +1 2 400установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок explainer-high-energy Barty-Bart Собирает 12–20-секундный динамичный промо-ролик о продукте: HTML-страница рендерится в MP4 с синтезированной музыкой. CX Codex +1 831установок presentation-video iart-ai Собирает из колоды или плана слайдов анимированное видео с озвучкой: каждый слайд перестраивается как motion-графика, а длительность привязана к аудио. CX Codex +1 1 200установок

Из того же набора15

apple-launch-film Собирает лонч-фильм в стиле Apple для Mac целиком в коде: меню-бар, чёлку, виджеты и градиентные обои. Пригодится, когда нужен ролик без записи экрана и After Effects. CX Codex +1 1 500установок animated-chart Строит одну петляющую анимированную диаграмму в HTML-коде и выгружает её в MP4 и GIF. Пригодится для поста в LinkedIn или врезки в рассылку. CX Codex +1 1 400установок title-sequence-3d Скилл собирает кинематографичный 3D-опенер на Three.js в одном HTML-файле. Пригодится, когда для видеоролика или рассылки нужна яркая заставка с неоновыми вывесками и логотипами. CX Codex +1 1 500установок brand-intake Скилл проводит короткое интервью и разбирает 3–5 референсов, чтобы собрать brand.md и MOTION.md — файлы, из которых остальные скиллы пака берут цвета, шрифты и тайминги. CX Codex +1 1 500установок motion-brief-writer Превращает сырую идею анимированной графики в точный build-промпт для Claude. Спрашивает недостающее, не выдумывает числа. CX Codex +1 1 500установок reel-export Превращает горизонтальное или квадратное видео в вертикальный файл 1080 x 1920 для Reels и TikTok, который загружается без искажения цвета. CX Codex +1 1 500установок reference-to-motion Разбирает видео и референсы стиля, чтобы собрать готовый промпт для Claude Motion с таймингами сцен под ваш бренд. Пригодится для создания моушн-роликов по образцу. CX Codex +1 917установок motion-prompt-writer Составляет готовый бриф из 8 частей для генерации зацикленной моушн-графики под ваш бренд. Пригодится, когда нужно превратить идею анимации в чёткий промпт без ручного подбора параметров. CX Codex +1 851установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой