general-video

media-use：在获取音频/图片之前，先调用 /media-use 从 HeyGen 目录中解析 BGM/SFX/图片。先运行 --adopt 注册已有资源。参见 /media-use 技能。

general-video — 通用视频工作流

在开始构建前确认路径。 这是自定义合成创作的回退方案。如果输入明显适合某个专门工作流，则优先使用：已上市产品 → /product-launch-video；通用网站 → /website-to-video；主题讲解 → /faceless-explainer；GitHub PR → /pr-to-video；现有素材 → /embedded-captions · /graphic-overlays；短无旁白动态图形 → /motion-graphics；Remotion 移植 → /remotion-to-hyperframes。不在范围内：实时/渲染时数据、已完成视频的 NLE 风格编辑，或生成 HyperFrames 无法捕捉的素材。不确定？先阅读 /hyperframes。

精确构建所要求的内容。 标题卡片就是标题卡片——不是标题卡片加三个辅助场景加背景音乐加字幕。如果额外场景或元素确实能提升作品，_提出_它们；不要默默添加。对于小修改（修复颜色、调整一个时长、添加一个元素），跳过规划步骤直接构建。

方法

发现阶段——仅限开放式请求

对于模糊、探索性请求（“为我们的品牌做点什么”、“一个酷炫的开场”）——在选择颜色前先理解意图：

• 受众——谁观看？开发者/高管/普通消费者？
• 平台——在哪里播放？社交媒体（15秒）/网站英雄区/产品演示/内部？
• 优先级——什么最重要？动效质量/内容准确性/品牌一致性/速度？
• 变体——一个最佳方案，还是 2-3 个有意义的差异选项（不同的节奏、能量或结构——而不仅仅是颜色替换）？

对于具体请求（“添加一个标题卡片”、“修复场景 3 的时序”），跳过发现阶段。

步骤 1 — 设计系统 → hyperframes-creative

首先建立视觉标识。如果项目有设计规范，请阅读它（优先级 frame.md → design.md → DESIGN.md；将其视为品牌真相——精确的颜色、字体、约束）。

如果没有规范，你必须在选择任何颜色或字体之前阅读 hyperframes-creative/references/house-style.md 和 hyperframes-creative/references/video-composition.md。 house-style.md 提供了“解释提示/生成真实内容”的开场、惰性默认列表和图层配方；video-composition.md 提供了视频媒介的密度/缩放/前景细节（数据条、注册标记、等宽元数据、“8-10 个元素，其中两个用户未要求”），这些将“制作”与“生成”区分开来。只读一个是常见的遗漏——video-composition.md 是代理跳过的那个，而正是它防止了扁平、居中、网页风格的输出。不要自行发明调色板并跳过这些；进入 hyperframes-creative 是强制性的，不是可选分支。然后，根据需要从 references/visual-styles.md 中提取命名风格/情绪，或从 references/design-picker.md 中提取交互式选择器。规范/风格定义了品牌，而非合成规则。

找到角度（模糊简报，无规范）： 在选择颜色之前，写一句话——这个名称/词语/主题唤起了什么，以及什么视觉_世界_（隐喻、场景、乐器、主题）表达了它？例如，网络安全工具 → 保险库门/周边扫描线/锁芯；冥想应用 → 潮汐、呼吸、缓慢的光晕。阅读主题的_含义_，而不仅仅是它的字母；选择一个具体的角度而非字面重新样式。这是单场景作品提示扩展（步骤 2）的廉价替代方案，扩展在此处被正确跳过——这是设计概念与通用渐变上标志之间的区别。

<HARD-GATE>
在编写任何合成 HTML 之前，确认你已具备全部四项：

1. 视觉标识，基于规范或 house-style.md——而非临时发明。（使用 #333、#3b82f6 或 Roboto？你跳过了它。）
2. 一句话概念角度（“找到角度”步骤），适用于任何超出琐碎修改的内容——而非提示词的字面重新样式。
3. 来自嵌入列表的字体配对（hyperframes-creative/references/typography.md → “可嵌入的字体”）——有目的地选择，而非默认使用 Inter/Helvetica Neue/system-ui，且绝不使用你希望渲染但未嵌入的显示字体（未捆绑的名称仅在本地自动捕获时嵌入——而云端渲染不会捕获它们）。
4. 来自 video-composition.md 的前景/密度计划——锚定边缘、8-10 个元素、前景元数据、背景纹理规则。（在少于约 6 个元素且无边缘锚定细节的纯色上居中堆叠？你跳过了它——这是通用的标志。）
   </HARD-GATE>

步骤 2 — 提示扩展 → hyperframes-creative

对每个多场景合成运行（单场景作品和琐碎修改跳过）。将请求与设计规范 + 房屋风格结合，形成一个一致的中介，下游工作以相同方式读取。参见 hyperframes-creative/references/prompt-expansion.md。

步骤 3 — 规划

在编写 HTML 之前，从高层次思考：

1. 什么——观看者体验：叙事弧、关键时刻、情感节拍。
2. 结构——多少个合成、子合成 vs 内联、哪些轨道承载视频/音频/叠加/字幕。关于单文件整体式 vs 模块化子合成的选择，参见 hyperframes-core/references/composition-patterns.md § 两种架构（经验法则：≥3 个硬场景切换，或任何重用场景 → 模块化；短单场景作品保持一个文件）。
3. 节奏——在实现前命名模式（例如 fast-fast-SLOW-SHADER-hold）；参见 hyperframes-creative/references/beat-direction.md。
4. 时序——哪些剪辑驱动时长、过渡落在哪里、节奏。
5. 布局——先构建最终状态（见下文）。
6. 动画——然后通过 hyperframes-animation 添加运动。

布局优先于动画

将每个元素放置在其最可见时刻的位置——完全进入、正确放置、尚未退出。先将其编写为静态 HTML + CSS。尚无 GSAP。

原因： 如果你将元素定位在动画起始状态（屏幕外、缩放为 0、透明度 0）并补间到你_认为_它们落地的位置，你是在猜测最终布局——重叠在渲染前保持不可见。先构建最终状态，你可以在添加运动之前看到并修复布局问题。

1. 为每个场景识别英雄帧——最多元素同时可见的时刻。那就是你要构建的布局。
2. 为该帧编写静态 CSS。内容容器必须填充场景并带有内边距，而非绝对偏移：

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* 内边距定位内容；填充任何场景大小 */
  gap: 24px;
  box-sizing: border-box;
}

绝不要在内容容器上使用 position: absolute; top: Npx——当内容高于空间时它会溢出。将绝对定位保留给装饰元素。

⚠ 上述 width/height: 100% 仅在每个祖先都有已解析高度时才生效。 根 <div data-composition-id> 及其与 .scene-content 之间的任何包装器必须设置大小（根上 position: relative; width: 1920px; height: 1080px——参见 hyperframes-core → “根必须设置大小”）。跳过此步骤，flex 容器将折叠到约 0，内容堆积到左上角，第一个字形在 x=0 处裁剪——而 lint/inspect 仍报告 0 个问题。并且始终在 .scene-content 上保留 padding（≥80px）：它是标题安全边距。绝不要用裸 gap 替换它。

3. 添加入场——使用 gsap.from() 从屏幕外/不可见动画到 CSS 位置（在子合成中优先使用 gsap.fromTo() 以便起始状态明确；参见 hyperframes-core/references/sub-compositions.md）。CSS 位置是真实状态；补间是到达它的旅程。
4. 退出由过渡处理——根据 hyperframes-animation/transitions/ 中的场景过渡规则，只有最终场景将元素动画退出；场景之间，过渡本身就是退出。

跨时间共享空间： 如果元素 A 在元素 B 进入同一区域之前退出，两者仍需要为其各自的英雄帧设置正确的 CSS 位置——时间线排序防止它们共存，布局步骤捕获意外重叠。分层发光/阴影和 z 堆叠深度是_有意_重叠；该步骤是关于捕获_无意_碰撞（两个标题重叠、内容溢出画面）。

构建——委托给领域技能

这将该技能的完整表面（参见 description）映射到其参考——非详尽；当意图未列出时，通过 hyperframes-creative（外观/概念）、hyperframes-animation（运动）、hyperframes-core（契约）、hyperframes-media（音频/字幕）路由。第一行是附加的——阅读它和你的意图行，而非其中之一。

构建…	首先阅读（按顺序）
始终——每个非琐碎作品，在你下面的意图行之上	hyperframes-creative/references/house-style.md + references/video-composition.md（也在步骤 1 / HARD-GATE 中门控；“制作而非生成”的前景细节）
动态排版/文本为主	hyperframes-animation/techniques.md（动态类型） + adapters/gsap-easing-and-stagger.md + rules/kinetic-beat-slam.md
标题卡片/下三分之一/叠加/画中画/文字后置	hyperframes-creative/references/composition-patterns.md +（对于居中/定尺寸帧）hyperframes-core → “根必须设置大小”
标志/品牌标记揭示	hyperframes-animation/rules/svg-path-draw.md（绘制） + rules/3d-text-depth-layers.md + rules/scale-swap-transition.md
数据/统计/数字	hyperframes-animation/rules/counting-dynamic-scale.md + rules/stat-bars-and-fills.md + hyperframes-creative/references/data-in-motion.md
产品/应用/UI 演示	hyperframes-animation/rules/3d-page-scroll.md + rules/cursor-click-ripple.md + rules/press-release-spring.md
音频响应/音乐驱动	hyperframes-creative/references/audio-reactive.md（预提取频段；映射到运动）
旁白/配音/音乐/音效/字幕	hyperframes-media → 共享音频引擎 scripts/audio.mjs（一次调用 = TTS + BGM + SFX → audio_meta.json）；字幕创作 + 资源放置通过 hyperframes-core。参见下面的音频。
多场景/过渡	hyperframes-animation/transitions/overview.md 然后 transitions/catalog.md（阅读概述后并未完成——GSAP 配方在目录中）
模块化/子合成	hyperframes-core/references/composition-patterns.md + references/sub-compositions.md

音频：单一引擎（TTS · BGM · SFX）

仅当作品需要时（根据“精确构建所要求的内容”——标题卡片上无背景音乐）。不要手动制作 TTS 或复制供应商：编写一个中性的 audio_request.json 并调用 hyperframes-media 中的共享引擎。它在一个开关上自动降级——存在 HeyGen 凭证 → HeyGen TTS + 音乐/SFX 检索；不存在 → ElevenLabs/Kokoro TTS、Lyria/MusicGen BGM 生成以及捆绑的 SFX 库。完整标志列表 + 请求/元模式：hyperframes-media/scripts/audio.mjs 的头部注释。

// audio_request.json — 每个旁白段一行；`id` 是你的（将 audio_meta 连接回来）
{
  "lines": [
    { "id": "s1", "text": "你的开场白。", "sfx": ["whoosh"] },
    { "id": "s2", "text": "下一个节拍。" },
  ],
  "bgm": { "query": "calm cinematic underscore" }, // 省略 "mode" → 自动（如果 HeyGen 则检索，否则生成）；"none" 禁用
}

# <MEDIA_DIR> = 已安装的 hyperframes-media 技能目录（此技能的兄弟目录）
node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json

然后读取 audio_meta.json：将每个 voices[].path +（bgm.path、sfx[]）挂载为 <audio> 轨道，并使用 voices[].words 作为字幕，全部按照 hyperframes-core（音频轨道 + 字幕创作）。如果 BGM 走了生成路径（bgm_pending: true），在最终渲染前运行 hyperframes-media/scripts/wait-bgm.mjs。

输出检查清单 → hyperframes-cli

• [ ] npx hyperframes lint 和 npx hyperframes validate 通过（阻塞结果）
• [ ] 如果存在规范（frame.md / design.md），验证设计一致性——检查清单在 hyperframes-creative/references/design-adherence.md
• [ ] npx hyperframes inspect 通过，或每个溢出都有意标记
• [ ] 处理对比度警告；对于多场景作品，查看动画映射（hyperframes-animation/scripts/animation-map.mjs）
• [ ] 交付预览；仅当明确请求时渲染为 MP4
• [ ] 仅在交接时展示预览（它是稳定的最终预览）；不要在构建过程中弹出——构建阶段快照是无头的