media-use：在获取音频/图片前，请先调用
/media-use以从 HeyGen 目录中解析 BGM/SFX/图片。先运行--adopt注册现有资源。参见/media-use技能。
general-video —— 通用视频工作流
在构建之前确认路线。 这是自定义合成创作的 回退 选项。如果输入明确符合某个专门工作流，请优先选择：营销产品 →
/product-launch-video；通用网站 →/general-video；主题解说 →/faceless-explainer；GitHub PR →/pr-to-video；现有素材 →/embedded-captions·/talking-head-recut；短无旁白动态图形 →/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）的廉价替代方案（扩展在此被正确跳过）——而这也是设计概念与通用渐变 Logo 之间的区别。
步骤 2 —— 提示扩展 → hyperframes-creative
对每个多场景合成运行此步骤（单场景作品和琐碎编辑跳过）。将请求对照设计规范 + house style 进行基础化，转化为下游工作能一致读取的中间表示。参见 hyperframes-creative/references/prompt-expansion.md。
步骤 3 —— 规划
在编写 HTML 之前，从高层次思考：
- 内容 —— 观众体验：叙事弧线、关键时刻、情感节拍。
- 结构 —— 多少个合成、子合成与内联、哪些轨道承载视频/音频/叠加/字幕。关于单片文件与模块化子合成的选择，参见
hyperframes-core/references/composition-patterns.md§ 两种架构（经验法则：≥3 个硬场景切换，或任何重复使用的场景 → 模块化；短单场景作品保持单一文件）。 - 节奏 —— 在实现之前命名模式（例如
fast-fast-SLOW-SHADER-hold）；参见hyperframes-creative/references/beat-direction.md。 - 时序 —— 哪些剪辑驱动时长、过渡落在何处、节奏。
- 布局 —— 先构建最终状态（见下文）。
- 动画 —— 然后通过
hyperframes-animation添加运动。
先布局后动画
将每个元素放置在它最显眼的时刻——完全进入、正确放置、尚未退出。先写成静态 HTML + CSS。暂不使用 GSAP。
原因： 如果你在动画起始状态（屏幕外、缩放到 0、不透明度 0）放置元素，然后补间到你_认为_它们应该落到的位置，你是在猜测最终布局——重叠在渲染之前一直不可见。先构建最终状态，这样你可以在添加运动之前看到并修复布局问题。
- 为每个场景识别主帧 —— 大多数元素同时可见的时刻。这就是你要构建的布局。
- 为该帧编写静态 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替换它。
- 添加入场动画 —— 使用
gsap.from()从屏幕外/不可见动画到 CSS 位置（在子合成中优先使用gsap.fromTo()，以便起始状态明确；参见hyperframes-core/references/sub-compositions.md）。CSS 位置是地面真相；补间是到达它的旅程。 - 退出由过渡处理 —— 根据
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 |
| 标题卡 / 下三分之一 / 叠加 / PiP / 文字后置 | hyperframes-creative/references/composition-patterns.md +（对于居中/定尺寸帧）hyperframes-core → “根元素必须设置尺寸” |
| Logo / 品牌标识揭示 | 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 生成，以及捆绑的音效库。完整标志列表 + 请求/元数据模式：hyperframes-media/scripts/audio.mjs 的头部注释。
// audio_request.json — 每个旁白片段一行；`id` 是你的（将 audio_meta 关联回来）
{
"lines": [
{ "id": "s1", "text": "您的开场白。", "sfx": ["whoosh"] },
{ "id": "s2", "text": "下一个节拍。" },
],
"bgm": { "query": "平静电影感背景音乐" }, // 省略 "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
- [ ]
…
[为翻译而截断]