launch-video

用代码制作发布视频

一支发布视频要在 30-45 秒内推销一件事。用一个 HTML 文件制作，并通过 window.seek(seconds) 导出为 MP4。

**开始之前：**如果 brand.md 和 MOTION.md 存在，请先阅读。如果不存在，请先运行 brand-intake，或询问十六进制颜色代码、字体和 Logo 文件。没有这些信息，绝不要声称成品符合品牌风格。

第 1 步：询问五件事，然后等待

1. **即将发布什么，**用一句话说明。例如：“LinkedIn AI OS，一个为期六周、帮你搭建内容系统的训练营。”
2. **视频要表达的一句话，**拆分成 3-5 个节拍。例如：“你的下一篇帖子，/ 用你的语气，/ 在你看到之前先经过检查。”
3. **证明材料。**真实的产品截图、附有来源的真实成果，或真实的客户帖子。仅限附件中的文件。
4. **行动号召，**逐字照抄，必须与销售页面上的内容完全一致。
5. **品牌信息。**十六进制颜色代码、字体、Logo 文件，以及尺寸：1920 x 1080、1080 x 1350 或 1080 x 1920。

绝不要编造价格、日期、“剩余名额”数量、推荐语或成果。

这里所说的“高级质感”（都是经验之谈）

前三个初稿都因“没有高级感”和“不是我的品牌颜色”而被拒。以下做法解决了问题：

• **使用真实的品牌颜色，**从落地页或最好的宣传图中取色。绝不要使用默认调色板。
• **玻璃质感 UI。**将产品界面做成带柔和景深的磨砂液态玻璃面板，类似 Apple 当前的 UI。
• **在真实感输入框中实时输入提示词。**这是唯一适合呈现打字效果的地方。
• **证明卡片展示近期的真实作品，**而不是旧例子。
• **保持多样性。**不同节拍不要采用相同布局。

先用两到三种风格制作前 10 秒。选定一种后，再制作其余部分。

第 2 步：安排各个节拍

默认安排为 7 个节拍，共 45 秒：

#	时间	节拍
1	0-4s	以简洁背景呈现这句话的开头几个词，字号要大。这就是钩子。
2	4-9s	将接下来的词叠加在真实证明材料上（帖子、成果、屏幕）。
3	9-17s	展示产品的实际运作：一个屏幕、光标输入真实提示词、输出逐渐显现。
4	17-22s	展示品质：某项内容经过检查、通过验证或打勾。
5	22-32s	展示工作原理：用一个简单的视觉效果呈现步骤、周数或功能。
6	32-38s	展示重要数字，并配上来源，数字逐步递增。
7	38-45s	展示名称、行动号召和要求。停留足够长的时间，确保观众读得完。

展示节拍表，然后等待确认。

第 3 步：制作简报（粘贴到 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.

第 4 步：从买家的角度检查

• 陌生人能在第 4 秒前知道即将发布什么吗？
• 每个数字都能追溯到来源吗？
• 行动号召是否至少停留 3 秒？
• 静音时，用手机也能看清内容吗？

第 5 步：导出

HyperFrames（免费、开源）：运行 npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render。分别导出 16:9 和 4:5 版本。安装前先检查有哪些工具可用，并先征求同意。