vox-explainer

Vox 风格的解说短片，用代码制作

制作一部 30-60 秒的纪录片式解说短片：先用一个 HTML 文件完成，再导出为 MP4。每一帧都由代码生成。不使用视频生成器，不用素材库视频。

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

第 1 步：询问四项内容，然后等待

1. 问题。 一个陌生人能大致理解的“为什么”问题。例如：“为什么现在所有品牌徽标看起来都一样？”
2. 事实。 用于回答问题的名称、日期和数字，每项都要附上来源链接。如果用户没有提供，请先查找，并在开始制作前展示带来源的清单。
3. 颜色。 三个十六进制颜色代码，再加一种强调色。默认配色（来自我的徽标短片）：红色 #B8312A、奶油色 #F1E6D0、纸张色 #FBF7EE、海军蓝 #14213D、黄色强调色 #F2C230。将默认配色标注为默认值。
4. 尺寸。 1920 x 1080（YouTube）、1080 x 1350（LinkedIn 信息流）或 1080 x 1920（Story 或 Reel）。

屏幕上的每项事实都有来源后，才能开始制作。

审核规则（来自那些被拒绝的制作轮次）

• 声音不可或缺。 无声的解说短片会让人觉得尚未完成。用代码编写配乐：低沉的底音、每个新镜头的重击声，以及最后一句的渐强。
• 用卡片和图片，不要只用线条。 一根横条或一条线在屏幕上移动，会显得静止。每个镜头都要使用在纵深中移动的卡片、真实图片或物件。
• **徽标要填满卡片，**并且必须来自真实文件。大框里漂着一个小徽标，看起来不对。
• 网格要保持对称。 卡片大小相同，间距相等。布局歪斜会显得像是失误。
• 人声要突出。 如果旁白被音效盖住，就降低配乐音量，直到能听清为止。人声轨道（你自己的录音，或文字转语音）是“为什么”类短片的核心。
• 开场白必须让观众知道接下来会讲什么。 标题太小、没有充分展现短片内容，会让观众在精彩部分开始前就离开。把问题大声说出来，然后在 5 秒内展示第一个惊喜。
• 每条口述事实都要先在事实文件中附上来源，再写进脚本。 如果研究只表明两者相似，就说“看起来像”，不要说“就是”。
• 要么惊艳，要么就不算完成。 如果开头 3 秒不能让你停下滑动，就先重做开头，再制作其余部分。

第 2 步：编写脚本，每个镜头一行

• 8-14 个镜头。每个镜头一句话。第 1 个镜头就是问题本身。
• 每个镜头都要回答上一句提出的某个问题。如果说不清一个镜头证明了什么，就删掉它。
• 最后一个镜头呈现结论，最多五个词。

将脚本以编号列表形式展示，然后等待确认。

第 3 步：为每行选择一种镜头类型

镜头	用途
动态陈述	用于一句你希望观众记住的话。将三行简短的粗体压缩字体排在一条撕边纸条上。
纸张卡片	用于同时展示多项内容（徽标、产品、引言）。撕边卡片带着浅阴影落下。
前后对比	用于展示随时间发生的变化。使用同一张卡片，翻转日期标签。
标签标注	用于指出图片中的某个事物。先画出标记圆圈，再显示标签。
计数器	用于展示不断增长的数字。用代码生成，绝不凭空猜测。
网格	用于表达“它们看起来都一样”。展示许多相同的图块，然后让其中一个打破规律。

第 4 步：开始制作

将这份制作说明连同脚本和镜头列表一起粘贴到 Claude Code 中：

Build one self-contained HTML file called index.html. No external fonts, images or libraries unless I attached them. Nothing loaded from the internet.

Look: editorial documentary explainer. Palette strictly [RED], [CREAM], [NAVY] with a [YELLOW] accent. Torn paper cards with small drop shadows. Halftone dots, paper grain and fine film grain over the whole frame. Colour fringing at the frame EDGES ONLY, and a soft vignette. Bold condensed sans-serif type, fully formed as blocks.

Motion: STEPPED, animating on twos (hold each drawn pose for 2 frames at 24fps). Never smooth corporate easing. NO typewriter effect. No gradients on text, no glow, no bouncing.

Facts: every name, date and number on screen is typed exactly as given in my fact list. Add nothing I did not give you.

Timing: follow my shot list. Each shot holds long enough to read aloud.

Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. The last frame can differ from the first (this is a film, not a loop).

After the build: capture one frame from the middle of every shot. Check each for cut-off text, overlapping cards, misspelt names and any date that is not in my fact list. Fix what is real and keep the first version.

第 5 步：像剪辑师一样检查

导出前，逐帧检查所有画面，并确认：

• 每个日期和名称都与事实清单逐字一致。
• 没有卡片遮住另一张卡片上的文字。
• 应该采用跳帧效果的地方没有变得平滑。
• 开头 3 秒已经展示了问题（观众会在 3 秒内做决定）。

第 6 步：导出

最简单的方式：使用 HeyGen 的免费开源工具 HyperFrames（先运行 npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render）。任何能逐步调用 window.seek 并将帧保存为 MP4 的工具也可以。安装任何工具前，请先检查有哪些工具可用，并征求同意。

此技能不会做什么

• 编造事实、日期或引言。
• 凭记忆重现真实品牌的徽标。请使用用户的文件，或用品牌名称设置纯文本。
• 声称某个趋势由单一因素导致。请说「一个原因」，而不是「原因」。