make-a-video

制作视频 — 从入门到完成 MP4 的技能

两个阶段，八道连续关卡。每道关卡都会产出下一道关卡所需的具体产物。不要跳过关卡。

何时使用此技能 — 何时移交

适用场景：

• 用户刚开始接触 HyperFrames，正从一个概念、脚本或大纲着手
• 用户想要端到端的操作指引，而不是框架参考资料
• 用户尚未决定视频格式

移交场景：

• 用户粘贴了 URL，并想制作一个关于该网站的视频 → 调用 /website-to-hyperframes
• 用户明确想要 9:16 竖屏对话视频，包含人脸摄像画面和场景叠加层 → 在此运行第 1–4 关，然后从第 5 关起调用 /short-form-edit
• 用户询问的是框架规则，而不是视频 → 调用 /hyperframes

两个阶段

• 阶段 1 — 访谈（第 1–4 关）： 先通过一轮对话收集所有信息，再编写代码。包括意图、格式、脚本、配音、风格、素材和节奏。整理成 BRIEF.md，并等待用户明确批准。
• 阶段 2 — 构建（第 5–8 关）： 搭建框架 → 故事板 → 合成 → lint 检查 → Studio 预览 → 草稿渲染 → 视觉核验 → MP4 预览 → 最终渲染。

---

第 1 关 · 意图与格式

每次通过 AskUserQuestion 只问一个问题，尽可能使用多选题。

1. 这个视频用来做什么？（宣传片 · 社交广告 · 发布预告 · 产品演示 · 教程 · 讲解视频 · 片头/片尾卡片 · 其他）
2. 受众是谁？（开放式问题）
3. 目标时长？（10–20 秒短片 · 20–45 秒宣传片 · 45–90 秒讲解视频 · 1.5–3 分钟课程 · 自定义）
4. 画面比例？（16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080）
5. 帧率？（默认 30 · 清晰呈现 UI 用 60 · 电影感用 24）
6. 平台 / 交付限制？（文件大小 · 截止时间 · 播放位置）

关卡要求： 六项信息均已收集。如果答案是 9:16 + 人脸摄像，计划在第 5 关移交给 /short-form-edit。

完整问题列表：Read: references/interview-questions.md

---

第 2 关 · 脚本与配音

1. 脚本来源？（粘贴 · 提供大纲 → 我来起草 · 我来录制 · 根据文本生成 TTS · 不需要旁白）
2. 如果使用 TTS：配音偏好。根据 npx hyperframes tts --help 提供选项，同时了解语速偏好。
3. 如果使用人脸摄像：录制方式 · 全屏还是放在角落 · 是否需要转录？（npx hyperframes transcribe <file> --model small.en --json）
4. 字幕？（关闭 · 炫酷风格 · 企业风格 · 逐词卡拉 OK · 极简）

关卡要求： 已收集脚本（或已起草），并明确音频方案和字幕方案。

---

第 3 关 · 风格信息

在询问用户之前，先盘点现有素材。 检查 <workspace-root>/assets/ 和任何项目的 assets/ 文件夹。已有的内容就不要再询问。

然后逐步询问——不必要求用户回答所有问题：

1. 是否有风格指南或品牌文档？（粘贴/提供路径 · 没有）
2. 配色方案？（十六进制代码 · 没有 — 使用 MOTION_PHILOSOPHY 默认值）
3. 字体？（Google Fonts 字体名称 · 文件路径 · 没有 — 使用 Inter + JetBrains Mono 默认值）
4. Logo 文件？（路径 · 没有 — 改用文字标识）
5. 可供参考氛围的视频？（URL/路径 · 没有）
6. 其他素材？（截图 · 产品照片 · B-roll · 音乐 — 列出路径）
7. 采用 MOTION_PHILOSOPHY 美学（黑色画布 · 镀铬字体 · 透视网格 · 快速甩镜转场），还是其他风格？
8. 节奏？（动感，1–2 秒 · 平衡，2–3 秒 · 舒缓，3–5 秒）
9. 音乐？（无 · 环境音垫，0.15 · 背景音乐，0.4 · 完整音乐，0.8 — 如果有音乐文件，请提供路径）
10. 片尾 / 行动号召文案？

绝不要擅自替用户设定品牌风格。 只有在用户明确拒绝提供风格时，才使用 MOTION_PHILOSOPHY 默认值。

完整风格流程 + MOTION_PHILOSOPHY 默认值：Read: references/style-intake.md

---

Gate 4 · 简报综合（构建前的硬性关卡）

1. 如果工作区根目录中存在 MOTION_PHILOSOPHY.md，请阅读该文件——若文件存在，则必须阅读。如果文件缺失，请采用 references/style-intake.md 中的默认设置，并在简报中注明文件缺失。
2. 如果项目位置不明确，请询问项目存放在哪里：
   • 如果存在 video-projects/ → 使用 video-projects/<slug>/
   • 否则 → 询问用户
3. 编写 <project-folder>/BRIEF.md：
   • slug · 意图 · 受众 · 尺寸 · fps · 时长
   • 脚本（全文或大纲）
   • 配音选择 · 字幕方案 · 出镜方案
   • 风格档案：调色板（hex）、字体、logo 路径、参考视频
   • 节奏
   • 资产清单及路径
   • 结尾 / CTA 文案
4. 展示简报。等待用户明确批准。 用户没有明确回复“是，开始构建”之前，不要进入 Gate 5。

---

Gate 5 · 搭建框架与故事板

首先检查是否需要移交

如果简报描述的是 9:16 竖屏对话视频，且包含出镜画面 + 场景叠加层，请立即调用 /short-form-edit 并移交简报。其基于转录文本的工作流涵盖钩子、剪辑、字幕、素材和声音。

否则继续：

搭建框架

1. mkdir <project-folder>
2. 如果存在格式相似的同级项目，提出复制其 hyperframes.json + meta.json 作为模板。否则，在该文件夹内运行：npx hyperframes init
3. 使用用户提供的 slug、尺寸和 fps 编辑 meta.json。
4. 将提供的资产复制到 <project-folder>/assets/。
5. 根据 Gate 3 创建 <project-folder>/assets/style-profile.md——作为调色板 / 字体 / logo 的唯一事实来源。

故事板

使用 references/storyboard-template.md 中的模板生成 <project-folder>/STORYBOARD.md。每个节拍都要包含：

Beat N — TITLE (start–end, duration) — Concept in one sentence
Visual elements: [each element, size, animation, timing]
Motion language: [kind of motion]
Eases used: [3–4 distinct GSAP eases]
Exit: [transition into next beat]
Audio: [VO line / SFX / music layer]

文件顶部：包含场景 · 开始时间 · 时长 · 组合文件的时间表。

提出三段式结构：

• 第一幕（钩子）≈ 时长的 20%
• 第二幕（主体）≈ 55%
• 第三幕（回报 + 结尾，停留 4–6 秒）≈ 25%

（MOTION_PHILOSOPHY §0 Law 9、§1。）

将用户意图映射到目录区块： Read: references/catalog-intent-map.md

**关卡：**展示故事板 + 时间表。反复修改，直到用户批准。

---

Gate 6 · 构建组合

调用 /hyperframes 获取框架规则。这项技能负责搭建框架和执行规范；/hyperframes 负责确保符合规则。

为每个子组合搭建框架

<div data-composition-id="scene-name" data-start="..." data-duration="...">
  <style>[data-composition-id="scene-name"] { /* scoped */ }</style>
  
  <script>
    (function(){
      const SLOT_DURATION = ...;
      const tl = gsap.timeline({ paused: true });
      // ... tweens ...
      tl.to({}, { duration: SLOT_DURATION }, 0);   // anchor — MOTION_PHILOSOPHY Law 11
      window.__timelines["scene-name"] = tl;
    })();
  </script>
</div>

完整样板 + 字幕模式 + 环境背景模式：Read: references/composition-scaffold.md

构建规则

• 在完整组合时长内，将环境背景放置在 data-track-index="0" 上。
• **动态文字开场：**逐词错开 0.06–0.10s。
• 在 index.html 中，将字幕作为根组合的 body 级同级元素，每个字幕都带有 data-track-index ≥ 20。绝不要将字幕放在场景时间线上（MOTION_PHILOSOPHY §3.13）。
• 通过 npx hyperframes add <name> 安装目录区块。随后立即将该区块的 CSS 限定到 [data-composition-id="..."]——目录区块自带的 html, body { ... } 规则，在作为子组合加载时会污染父文档。
• **竖屏 + 出镜：**为原生 1920×1080 的出镜画面添加变换包装（translate + scale），以适配下半屏或全屏模式。（如果最后选择此方案而没有使用 /short-form-edit，请认真考虑移交。）
• **只应用用户提供的内容。**使用用户的调色板、字体和 logo。不要额外添加任何内容。如果用户选择了 MOTION_PHILOSOPHY 默认设置，请从 references/style-intake.md 中提取调色板 + 字体组合。

确定性

不要使用 Math.random()、Date.now() 或渲染时的 fetch()。请使用带种子的 PRNG 或谐波正弦哈希（MOTION_PHILOSOPHY §3.10）。

---

Gate 7 · Lint → Studio 预览（预览关卡 1 — 必须通过）

1. npx hyperframes lint — 修复所有错误，并对警告进行分类处理。
2. 在后台运行 npx hyperframes preview。
3. 等待 http://localhost:3002 上显示 “Studio running”。
4. 将该 URL 以及各个合成的 URL（http://localhost:3002/?comp=<id>）交给用户。如果项目中有 WebGL 着色器区块，优先提供各个合成的 URL — 软件 WebGL 回退可能会导致主合成卡住。
5. **等待用户明确表示“看起来不错，渲染一个草稿”**后再继续。用户没有回应不代表同意。

热重载已开启 — 修改会实时显示。

---

Gate 8 · 草稿渲染 → 视觉验证 → MP4 预览 → 最终成片

草稿渲染

npx hyperframes render --quality draft --output renders/<slug>-draft.mp4

视觉验证（交付前必须完成）

Lint 通过 ≠ 设计效果理想。提取帧并查看它们。

1. mkdir -p renders/frames
2. 针对每个节拍的关键画面和每个转场：

   ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png
   

3. 对每个 PNG 调用 Read 工具。 Read 工具会将图像加载到上下文中 — 不要只列出文件名。
4. 逐帧确认：没有被裁切的面部；每个场景的面部模式正确；文字清晰易读且符合配色；没有溢出；转场落在预期的文字上；没有空白帧。
5. 如果有任何问题：修复 → 重新渲染 → 重新验证。绝不要交付有问题的草稿。

MP4 预览（预览关卡 2 — 必须通过）

npx serve renders -p 8080 -n

不要使用 Python 的 http.server — 它不支持 HTTP Range 请求，拖动播放进度会出问题。

将 http://localhost:8080/<slug>-draft.mp4 交给用户。等待用户明确确认播放效果和音画同步。

最终渲染

npx hyperframes render --quality standard --output renders/<slug>-final.mp4

报告输出路径。完成。

完整的预检和交付前检查清单：Read: references/build-checklist.md

---

不可妥协的要求（关键约束 — 不得弱化）

• 不得跳过预览关卡 1（Studio）或预览关卡 2（已渲染的 MP4）。 每次构建都必须通过这两个关卡。
• 在提取帧并通过 Read 工具查看之前，不得声称渲染已完成。
• 不得在专用项目文件夹之外构建。 绝不要将 index.html 放在工作区根目录。
• 在检查用户的工作区之前，不得向用户索要素材。
• 不得省略每个子合成时间轴末尾的 tl.to({}, { duration: SLOT_DURATION }, 0) 锚点补间。 请遵守 MOTION_PHILOSOPHY 第 11 条定律。
• 不得在渲染逻辑中使用 Math.random() / Date.now()。 只能使用带种子的哈希。
• 不得给 <video> 标签添加 class="clip"。 这会导致标签无法正常工作。
• 不得擅自为用户设定品牌。 应先询问；仅当用户明确拒绝时，才回退到 MOTION_PHILOSOPHY 默认值。

---

参考资料

• references/interview-questions.md — 按关卡划分的完整问题库
• references/style-intake.md — 风格访谈 + MOTION_PHILOSOPHY 默认值
• references/catalog-intent-map.md — “用户说 X → 安装 Y”
• references/storyboard-template.md — 逐节拍模板 + 完整示例
• references/composition-scaffold.md — 作用域样式 + IIFE GSAP 样板代码
• references/build-checklist.md — 预检 + 交付前关卡

外部（工作区级）：

• MOTION_PHILOSOPHY.md — 此技能假定存在的唯一外部参考文件。审美基准。如果缺少此文件，可使用 references/style-intake.md 中的回退方案。

相关技能

• /hyperframes — 框架规则，在 Gate 6 调用
• /hyperframes-cli — init · lint · preview · render · transcribe · tts
• /hyperframes-registry — 安装目录中的区块
• /gsap — GSAP 动画参考
• /short-form-edit — 在 Gate 5 移交，用于 9:16 口播格式
• /website-to-hyperframes — 如果起始输入是 URL，则在 Gate 1 移交