motion-graphic-director

动态图形导演

这项技能会让你在编写任何代码之前，先像专业的动态影像导演和视频剪辑师那样思考。最终 Remotion 视频的输出质量完全取决于此处设计决策的质量，以及这些决策是否在开始实现之前被转换成精确的帧数。

工作流程

每个视频都遵循以下确切顺序。不要跳过步骤。

1. SRT/Script Input
2. Script Analysis       →  script-[name].md
3. Visual Ideation       →  video-design-[name].md   (shown to user for approval)
4. User Approves Design
5. Frame Timing          →  frame-timing-[name].md   (calculator + beat table for every scene)
6. User Approves Timing
7. Remotion Build        →  uses remotion-best-practices skill

步骤 3 和步骤 5 都需要用户批准后才能继续。步骤 5 并非可选—— 它能在纸面上而非渲染结果中，发现所有时间安排错误、冷场问题、弹簧配置错误和转场冲突。

---

步骤 1：解析脚本

如果收到 SRT 文件，请运行随附的转换脚本：

python scripts/srt_to_script.py <input.srt> "<Video Title>" [output.md]

这会生成一个 script-[name].md，其中每条 SRT 字幕对应一个片段，并包含准确的旁白文本—— 格式与 examples/ 中的示例脚本一致。片段名称会是通用占位名称（“Segment 1”等），请在步骤 2 的分析过程中将它们改成有意义的场景名称。

如果收到的是原始旁白文本而非 SRT，请手动整理成相同格式。 确切格式请参见 references/design-doc-format.md，并参考 examples/video-script-1.md。

---

步骤 2：构思前先分析

在设计任何内容之前，请从脚本中提取：

• 核心论点——要证明的唯一观点是什么？
• 情绪曲线——哪里 tension 上升？哪里得到缓解？高潮在哪里？
• 关键词——哪些词语或概念值得配上专属的视觉隐喻？
• 目标观众——精通技术？普通观众？他们可能抱有什么焦虑或好奇心？
• 视频时长——决定每个片段的节奏预算

这项分析将指导每个设计决策。绝不要跳过。

---

步骤 3：构思设计

这是最重要的创意步骤。像导演一样思考，而不是像程序员一样。

核心设计决策（先做这些）

1. 视觉识别

• 选择 2-3 种颜色组成的调色板。通常包括：1 种深色／中性色背景 + 1 种鲜艳的强调色 + 1 种用于“错误／不正确”状态的次要强调色
• 每种颜色都必须有含义——引导观众将它与某种情绪联系起来 （例如，绿色 = 正确／进展，红色 = 错误／警告）
• 选择一种主导的字体风格（等宽／黑客风、粗体衬线／编辑风、简洁无衬线）

2. 主导视觉隐喻

• 哪一个是将核心论点可视化的唯一核心隐喻？
• 这个隐喻必须在开场钩子中引入，并在结尾处再次出现

3. 节奏架构

• 这类视频节奏极快——持续运动，没有冷场，视觉效果始终配合旁白节奏。 研究示例文件，校准你的判断。
• 任何单一静态元素都不应无故静止超过约 22 帧（30fps 下约 0.73 秒）。 如果没有任何元素在动，必须有意为之。
• 规划张力曲线：开场钩子 → 铺垫 → 模式中断 → 讲解 → 高潮 → 收束 → 行动号召
• 张力／缓解模式请参见 references/editorial-patterns.md

4. 动态图形语汇

• 确定 2-3 种反复出现的标志性动画手法
• 阅读 references/motion-graphic-prompts.md，将其作为创意库

分段设计规则

针对每个片段，按顺序回答以下问题：

1. 观众进入这一片段时处于什么心理状态？
2. 他们到片段结尾时必须理解哪一个概念？
3. 表现这一概念最有力的视觉隐喻是什么？
4. 背景／环境在做什么？
5. 具体有哪些元素进入画面？如何进入？
6. 这一片段如何转场退出？为什么选用这种特定的转场类型？
7. 为什么做出这些选择？（编辑意图——务必写明）

---

步骤 4：记录设计

输出一个 video-design-[name].md 文件，每个片段对应一个章节。

每个片段都遵循与视频示例文件完全相同的 4 个小节格式：

## [timestamp] | [Scene Name]

**Backgrounds & Tints:** ...

**Motion Graphics & Typography:** ...

**Transitions & Pacing:** ...

**Editorial Thinking/Intent:** ...

用户会审阅并批准此文档。文档必须足够详细，让经验丰富的开发者无需提问即可实现设计。

完整示例请参阅 references/design-doc-format.md。

---

步骤 5：帧时序文档

此步骤在设计获批后、编写任何 Remotion 代码前进行。

帧时序文档（frame-timing-[name].md）会将设计文档中的每项创意决策转换为精确的帧编号。这是工程规范。帧是此处所有内容的计量单位——不是秒，也不是“大约一半”。每个动画节拍、每个转场时段、每段停留都必须有明确的帧范围。

在此处先在纸面上发现以下问题，避免渲染后才发现：

• 空白时段（场景在最后一个动画结束后仍闲置过久）
• 弹簧配置错误（阻尼不足的弹簧来回振荡，而不是快速弹出）
• 转场冲突（场景级入场动画与 TransitionSeries 相互干扰）
• 帧数计算错误（因未扣除转场重叠帧数而导致 TOTAL 错误）
• 阶段时序错误（阶段 2 在阶段 1 完成前触发）

子步骤 A — 运行帧数计算器

python scripts/frame_calculator.py \
  --fps 30 \
  --durations <S1_dur> <S2_dur> ... <SN_dur> \
  --transition <T_dur> \
  --names "Scene 1 Name" "Scene 2 Name" ... \
  --last-anim <last_anim_local_1> <last_anim_local_2> ... \
  --springs "springLabel:damping:stiffness[:mass]" ...

计算器会输出：

• 每个场景和每个转场时段的绝对起始帧／结束帧
• 每个场景的局部帧 ↔ 绝对帧转换
• 每个场景的空白时段警告（若转场退出前闲置帧数 > 22f，则标记）
• 每种配置的弹簧 ζ（阻尼比）和稳定时间

不要手动计算这些数字。 一旦有帧数计算误差，就会悄无声息地传递到代码中。运行计算器，并将其输出原样粘贴到帧时序文档开头。

包含弹簧分析的 6 场景视频示例调用：

python scripts/frame_calculator.py \
  --fps 30 \
  --durations 150 180 150 210 200 120 \
  --transition 15 \
  --names "Hook" "Definition" "Solution" "Demo" "Processing" "Dialogue" \
  --last-anim 125 150 110 178 177 95 \
  --springs "errorStamp:10:300" "staccatoPop:28:400" "cardEntrance:12:200"

子步骤 B — 编写逐场景节拍表

为每个场景制作一张帧范围表，涵盖每个不同的动画节拍。帧范围必须连续——不能有间隙或无法解释的跳跃。每一行都必须包含局部帧和绝对帧两列。

帧范围（局部）	绝对帧范围	动作	备注／风险
0–44	0–44	...	...
45–52	45–52	...	...
...	...	...	...

任何没有编写动画的帧范围也必须以具名停留的形式列入表中：“停留 — [当前仍可见的内容，以及让画面保持活力的微动画]。”绝不能留有空隙。

子步骤 C — 为每个转场编写专门章节

每个转场都必须有自己的章节。不要在场景表中概述转场。每个转场章节都必须回答以下问题：

1. 使用何种呈现方式——确切的导入路径和函数调用
2. 使用何种时序——使用 linearTiming 还是 springTiming，以及原因
3. 编辑意图——为什么在这个叙事节拍使用这种特定转场；改用其他类型会有什么问题
4. 重叠时段内每个场景的动作——退出场景在最后 T 帧内有哪些可见内容／动画，进入场景在最初 T 帧内显示什么
5. 具体风险——此转场节点可能发生的任何问题

子步骤 D — 验证帧数计算

提交代码前，手动验证总帧数：

TOTAL = sum(all scene durations) - (num_transitions × transition_duration)

在文档中明确写出此计算。如果 TOTAL 与 SCENE_TIMING.TOTAL 和 Root.tsx durationInFrames 中填写的值不一致，视频就会提前切断或留下空白尾段。这项检查绝不可省略。

完整格式规范以及涵盖 VibeCodingPRD 视频全部 6 个场景的详细示例，请参阅 references/frame-timing-format.md。

步骤 6：等待批准

向用户展示帧时间文档。在用户批准之前，不要开始编写 Remotion 代码。如果用户要求修改，请修改帧时间文档，而不是代码。

如果用户此时要求修改设计文档，请使用更新后的时长重新运行计算器，然后再继续。时长的变化会影响后续所有绝对帧数。

---

步骤 7：使用 Remotion 构建

设计文档和帧时间文档都获批后，使用 remotion-best-practices 技能进行实现。帧时间文档就是你的规格说明。

关键实现原则：

• 每个动画都由 useCurrentFrame() 驱动，不使用 CSS 过渡
• 场景时间常量源自帧时间文档，不在组件中使用魔法数字
• 使用 TransitionSeries 时不需要 SCENE_X_START 值，因为位置会自动计算。只需要时长常量。
• 所选调色板中的颜色值必须定义为常量，不能内联
• 设计文档中描述的每个视觉隐喻都必须在代码中呈现
• 第 N 阶段的起始帧必须根据第 N-1 阶段的结束帧推导，而不是硬编码：

  const PHASE2_START = PHASE1_END + HOLD_DURATION; // NOT a literal number
  

---

质量标准

完成设计文档前，请根据以下清单检查每个片段：

• 背景有设计意图——具有恰当的颜色或纹理，而不是默认灰色
• 至少包含一个视觉隐喻（而不只是屏幕上的文字）
• 过渡有明确的缓动描述（而不只是“淡入”）
• 编辑意图解释了观众的心理，而不只是视觉上发生了什么
• 颜色使用一致——同一种颜色在整个过程中代表同一种含义
• 开场钩子在前 2 秒内吸引注意力
• 至少包含一个模式中断（语调转变、梗或意料之外的视觉效果）
• 最后一个片段营造出视觉真空——去除所有元素，将注意力集中到 CTA 或包袱上
• 节奏有所变化——并非每个片段的视觉密度都相同
• 每个场景在停留期间都有微动画（不能是完全静止的帧）

完成帧时间文档前，请根据以下清单检查每个场景：

• 每个帧范围都有明确归属——没有无法解释的空档
• 每个范围都标明了局部帧数和绝对帧数
• 空白静止帧数未超出预算（≤ 22f），或已明确说明原因
• 每个弹簧配置都已通过计算器运行，且 ζ 处于预期范围
• 每个过渡都有独立章节，说明其意图和风险
• 帧数总计已核实，并明确写出算式
• 阶段起始帧是推导值，而非字面量

---

可能出现的问题

以下是在实际制作中遇到的失败情况。每一种都曾导致代码审查时看似正确的渲染结果作废。动笔编写任何代码之前，请先了解这些问题。

---

1. 空白停滞——静止尾帧

表现： 场景中的最后一个动画结束后，画面冻结 1–3 秒，之后才触发过渡。观众失去兴趣，观看时长下降。

原因： 场景时长设置得过于宽裕（“留点喘息空间”），却没有考虑最后一个动画实际何时结束。如果场景时长为 180f，而最后一个动画在局部第 120 帧结束，就会有 60 帧的静止尾段（2 秒的空白）。

如何发现： 在计算器中运行 --last-anim 标志。任何报告 idle > 22f 的场景都有静止尾段。

如何修复：

• 缩短场景时长，使 scene_duration ≈ last_animation_end + 20f hold + transition_duration。
• 如果出于设计原因无法缩短，就添加微动画——光晕脉冲、光标闪烁、环境粒子——来衔接停留时间。画面绝不能完全静止。

预算： 最后一个设计动画结束到过渡退出开始之间，空闲帧数 ≤ 22 帧。 在 30fps 下约为 0.73 秒，足以让观众吸收最终状态而不失去兴趣。

---

2. 弹簧配置错误 — 持续振荡

表现： 本应干脆利落地弹入并略微过冲的元素，反而会反复来回弹动。药丸卡片、勾选标记和图标的入场动画都显得抖动又不专业。动画始终无法平稳结束。

原因： 弹簧阻尼比 ζ 小于 0.5。使用 damping: 8, stiffness: 400 时，ζ = 0.2，属于严重欠阻尼。元素会振荡 3 秒以上。使用 damping: 28, stiffness: 400 时，ζ = 0.7，属于轻度欠阻尼，只会干净地过冲一次至约 105%，并在 12 帧内稳定下来。

公式：

ζ = damping / (2 × sqrt(stiffness × mass))
ζ < 0.5  →  wrong. Will oscillate.
0.5–0.85 →  correct for pops. Single overshoot, snappy settle.
0.85–1.0 →  correct for slides and magnetic clicks. Near-critical, smooth.
> 1.0    →  overdamped. Slow creep, no overshoot. Use for deliberate heavy entrances.

如何发现： 在计算器中运行 --springs "label:damping:stiffness"。任何 ζ < 0.5 的配置都会被标记。在编写组件前完成此检查。

如何修复： 增大阻尼。对于刚度 400，阻尼 28 对应 ζ = 0.70。对于刚度 200，阻尼 20 对应 ζ = 0.71。经验法则：弹入动画的 ζ 目标值为 ∈ [0.65, 0.80]。

应避免的常见错误预设：

// WRONG — ζ = 0.20, will bounce for 3 seconds
spring({ damping: 8, stiffness: 400 })

// WRONG — ζ = 0.25, same problem
spring({ damping: 10, stiffness: 400 })

// CORRECT — ζ = 0.70, single pop
spring({ damping: 28, stiffness: 400 })

---

3. 自定义入场动画与 TransitionSeries 冲突

表现： 场景通过 TransitionSeries 滑动或擦除效果入场时，会像空白面板一样滑入，然后内容在过渡进行到一半时突然出现。或者内容在滑动过程中被裁剪，直到滑动完成后才变得可见。

原因： 场景组件最外层的 AbsoluteFill 应用了 clipPath、transform 或 opacity 入场动画。TransitionSeries 会将每个场景包裹在自己的容器中，并对该包装器应用过渡变换。内部 AbsoluteFill 上的任何裁剪路径或变换都会叠加到包装器变换之上，从而导致：

• 内部元素设置裁剪路径 → 滑动期间内容不可见（裁剪比例为 0%）
• 内部元素设置变换 → 发生双重变换，移动位置错误
• 内部元素设置不透明度 → 淡入效果独立于滑动发生，产生重影效果

典型示例： 在最外层的 AbsoluteFill 上使用径向圆形擦除裁剪路径：

// WRONG — clip-path at frame 0 is 0%, so scene slides in blank
<AbsoluteFill style={{ clipPath: `circle(0% at 50% 50%)` }}>

如何发现： 帧计时文档的过渡风险部分必须明确说明入场场景的最外层元素是否有任何入场动画。如果有，必须在应用 TransitionSeries 过渡前移除。

如何修复： 将所有入场动画移到最外层 AbsoluteFill 内的子元素上。最外层元素必须是纯容器，不得设置变换、裁剪路径或动画不透明度。让 TransitionSeries 控制容器的移动。

---

4. 帧数计算错误 — TOTAL 不正确

表现： 视频在最后一个场景结束前就被截断，或者 CTA 后面出现一段黑屏空白。或者 Remotion Studio 中的时间线预览显示 1010 帧，而视频本应为 935 帧。

原因： TOTAL 被设为场景时长总和，却没有减去过渡重叠部分。对于有 N 个场景、共享过渡时长 T 的情况：

TOTAL = sum(durations) - (N - 1) × T

每次过渡都会让相邻场景重叠 T 帧。忘记扣除会导致 TOTAL 大于实际合成时长。

如何发现： 帧数计算器会打印明确的算式：

Verify: 150+180+150+210+200+120 - (5×15) = 1010 - 75 = 935

将其写入帧计时文档。如果 SCENE_TIMING.TOTAL 不匹配，请在 Root.tsx 采用错误值之前修正。

如何修复： 在常量中设置 TOTAL = sum(durations) - (N-1) × transition_duration。如果每次过渡的时长不同，则分别扣除。

---

5. 阶段顺序——阶段 2 在句子中途开始

现象： 在先显示打字机转录文本、随后显示 UI 元素（药丸标签、卡片、复选标记）的场景中，转录文本还在输入时，UI 元素就开始出现。打字机效果和 UI 争夺观众的注意力。

原因： PHASE2_START 被硬编码为一个字面值，而不是根据转录文本的实际结束帧推导得出。转录文本的长度会变化（设计师写了 60 个字符，但 VO 后来更新到了 74 个字符），硬编码常量因此不再匹配。

修复方法： 始终根据上一阶段动画的实际结束帧推导阶段起始帧：

const TRANSCRIPT_END = TRANSCRIPT_START + Math.ceil(TRANSCRIPT.length / CHARS_PER_FRAME);
const PHASE2_START   = TRANSCRIPT_END + HOLD_FRAMES; // HOLD_FRAMES = 12

绝不要写 const PHASE2_START = 113;。只要内容有变化，它就会出错。

---

6. 突兀切换——状态变化没有过渡

现象： 某个元素在单帧内消失或改变颜色。观众会被吓一跳，看起来像是 Bug，而不是特效。

原因： 类似 {frame >= PHASE2_START && <NewElement />} 的条件会在条件刚成立的那一帧，以完全不透明的状态渲染元素。没有为其规划入场动画。

必须始终避免的突兀切换示例：

• REC 指示灯：{frame < PHASE2_START && <RecDot />}——会在单帧内消失。修复方法：使用 interpolate，在 10 帧内淡出。
• 场景切换：场景之间硬切，而不是使用 TransitionSeries。修复方法：每次场景过渡都必须使用 TransitionSeries 过渡，即使只是 fade() 也一样。
• 虚空白场：从暗色场景瞬间跳到纯白。修复方法：白色背景必须在 ≥6 帧内淡入。单帧白闪看起来像渲染故障。
• 状态颜色突变：混乱线条原本是一种颜色，却在单帧内变成红色。这个特定情况是有意为之（冻结本身就是特效）——但必须在节拍表中明确记录，以免将来的开发者“修复”它。

---

7. 尺寸与缩放——元素在 1080×1920 画面中太小

现象： 文本在 Remotion Studio 中理论上可读，但到了手机屏幕上就变得难以辨认。卡片看起来像 UI 装饰，而不是有力的表达。视频给人的感觉像是缩小后的桌面网站，而不是原生竖屏视频。

原因： 尺寸是在查看缩小预览时确定的，或者直接沿用了 1080×1080 或 16:9 布局中的尺寸，没有针对 9:16 重新校准。

1080×1920（30fps）下的最小尺寸规则：

元素类型	最小尺寸	推荐尺寸
主视觉／核心概念文本	80px	100–140px
场景标题／关键标签	40px	48–60px
正文／说明文本	28px	32–36px
终端／代码／等宽文本	22px	26–30px
UI 标签／说明文字	18px	20–24px
不得低于	16px	—

内边距规则：

• 1080px 宽画面的左右内边距：每侧至少 80px。有效内容宽度：920px。
• 上下安全区：各 80px。内容不得从顶部 80px 区域内开始，也不得延伸至底部 80px 区域内。
• 卡片／药丸标签：内部内边距至少 16px。边框必须清晰可见（描边 ≥ 1.5px）。

常见错误：

• 在居中容器上设置 maxWidth: 800——可以，但还要加上 width: '100%'，让容器在较窄的父容器中填满可用空间。
• 终端行使用 fontSize: 18——在桌面上可读，在手机上却看不见。应使用 26 以上。
• 卡片边框：border: '1px solid ...'——在 1080px 画面中太细。至少使用 1.5px。

编写布局代码之前： 在帧时序文档的“备注／风险”列中，为每个承载关键信息的元素明确写出像素宽度和字号。如果预览中无法在手臂伸直的距离看清，观众在手机上也看不清。

8. 颜色含义漂移

表现： 强调色出现在中性或负面的元素上，混淆了观众已经形成的颜色联想。或者，错误／状态色被随意用于装饰。

示例：

• 在表现问题的场景中，光标使用绿色强调色。场景明明在表达错误，光标却让人觉得“正确”。
• 因为“看起来不错”，装饰性边框使用红色状态色。现在观众会下意识地把边框看作警告。
• 所有列表项都使用绿色对勾，包括仍处于“待处理”状态的项目。在真正的成功时刻到来之前，绿色的语义分量就已经被消耗殆尽。

规则： 绿色 = 已解决／正确／进展。红色 = 损坏／错误／缺失。这些含义在第 0 帧就已确立，绝不能漂移。如果需要第三种颜色表示“中性”或“待处理”状态，请使用文本暗淡色（深色系统中的 #4A4A5A）。绝不要把强调色用于装饰。

---

9. 局部帧与绝对帧混淆

表现： 场景组件中的动画触发条件（例如 frame > 500）始终不会触发，因为 useCurrentFrame() 返回的是局部帧（0 到 scene_duration-1），而此场景的时长只有 200 帧。该条件永远无法满足。

原因： 开发者按绝对帧来考虑动画，却用局部帧编写条件（或反过来）。

规则： 在任何场景组件中，useCurrentFrame() 返回从 0 开始的局部帧。使用帧时序文档中的绝对帧数之前，必须先将其转换为局部帧：

// In the component — always local
const GLITCH_START = 73; // local frame 73 = absolute 73 (Scene 1 starts at absolute 0)

// For Scene 2 (absolute start = 135):
const WIPE_START = 10; // local — absolute equivalent is 135 + 10 = 145
// Never write: const WIPE_START = 145; // WRONG inside Scene 2 component

组件中的每个时序常量都应添加注释，标明局部值及其对应的绝对值，以便读者首次需要交叉参照时查看：

const TYPE_START = 99; // local 99 = absolute 99 (Scene 1 starts at 0)

---

10. 转场进入时内容闪现

表现： 在滑动或擦除转场期间，进入的场景短暂显示本应等到转场完成后才出现的内容（文字、光效、UI 元素）。观众会同时看到场景 N 正在退出、场景 N+1 的内容正在进入，两者混杂在一起。

原因： 场景 N+1 中编写的动画从局部帧 0 开始，而这正是转场开始的帧。因此，在 15f 的滑动转场期间，场景 N+1 会在滑动仍在进行时运行局部帧 0–14。如果场景 N+1 的开场动画（例如标题打字机效果）从局部帧 0 开始，那么容器仍在滑动途中时，该动画就会显现并开始播放。

修复方法： 将场景 N+1 中第一个编写的动画设置为从 TRANSITION_DURATION 或之后开始（例如，15f 转场对应局部帧 15）。利用这个缓冲窗口，仅显示正在进入的背景／环境，让转场平稳结束后再显示内容。场景 2 中的 WIPE_DURATION 模式（WIPE_DURATION = 10）正是如此：它有意设置缓冲，避免线条在滑动转场进入时开始绘制。

---

捆绑文件 — 请阅读

scripts/

• scripts/srt_to_script.py — 将 SRT 字幕文件转换为结构化的 script-[name].md。用法：python scripts/srt_to_script.py <input.srt> "<Title>" [output.md]

• scripts/frame_calculator.py — 请阅读此文件顶部的文档字符串。 计算 所有场景和转场的绝对帧范围，检测静默片段，并分析弹簧阻尼比。在编写任何帧时序文档之前，请在步骤 5 中运行此脚本。用法：python scripts/frame_calculator.py --fps 30 --durations ... --transition ... --names ... --last-anim ... --springs ...

examples/ —— 质量基准。开始设计前请先阅读这些内容。

这里收录了表现出色的动态图形视频的真实逐镜头拆解，以及对应的完整旁白脚本。你做出的每个设计决策，都应以它们展现的水准为基准。

• examples/video-example-1.md + examples/video-script-1.md —— Claude Code 技巧视频（约 54 秒）。 重点学习：暗黑黑客美学、霓虹薄荷绿点缀、故障风钩子、断奏式勾号弹出、上下文窗口滑块隐喻、液态 Alpha 遮罩擦除转场、视觉真空式 CTA。
• examples/video-example-2.md + examples/video-script-2.md —— ZIP 压缩解说视频（约 56 秒）。 重点学习：暖米色调、安全橙点缀、复古计算隐喻、吃豆人游戏化设计、流程图线条绘制、无损还原证明、AI 转折高潮。
• examples/video-example-3.md + examples/video-script-3.md —— Brand Gravity 营销视频（约 80 秒）。 重点学习：薄荷绿单色世界、漏斗变墓碑的变形钩子、时空网格隐喻、权威锚点切镜、企业门面破碎、客户轨道式汇聚。

**何时阅读：**在第 2 步（脚本分析）开始时，阅读全部六个文件。深入理解“编辑思考/意图”部分的深度——你自己的设计文档也必须达到这一水准。脚本会准确展示时间戳如何对应旁白密度。

references/ —— 设计规则和格式规范。

• references/design-doc-format.md —— script-[name].md 和 video-design-[name].md 的确切格式，附有完整示例和需要避免的反模式。 在第 4 步阅读。

• references/frame-timing-format.md —— 第 5 步最重要的参考文档。 frame-timing-[name].md 的确切格式，附有完整示例，涵盖 VibeCodingPRD 视频的全部 6 个场景和 5 个转场。今后每个视频的帧时序文档都必须达到此处展示的细节水准。在第 5 步阅读。

• references/design-system.md —— 色彩架构、字体排印层级、作为情感语言的缓动、场景密度校准、背景层次规则。在第 3 步阅读。

• references/editorial-patterns.md —— 张力曲线架构、模式中断技巧、认知减负设计、视觉隐喻构建公式、钩子类型、CTA 真空机制、叙事弧模式。在第 3 步阅读。

• references/motion-graphic-prompts.md —— 涵盖 5 个类别的 75 个动态图形概念。在第 3 步构思某个片段的动画表达方式时阅读。