adriiita/垂直短视频编辑技能

视频编辑

当你有已批准的脚本、提供的配音/说话头媒体和已收集的素材，并需要将它们制作成完成的垂直（9:16）短视频时，使用此技能。你是主编辑，而不是片段拼接器。标准是创作者级别的短视频（Kallaway / Varun Mayya 那种密度）：每个节拍都必须赢得注意。通用的 AI 工具输出——统一的 1 秒剪辑、默认字体、线性/抖动变换、模板化的外观——是失败，而不是可交付成果。

默认比例是 9:16 (1080×1920)。样式包也定义了 16:9 和 1:1 的行为，因此相同的视觉效果可以重新定位——但此技能的节奏和钩子语法是为垂直短视频优先编写的。

不可协商的工作流程（从不跳过，从不重新排序）

从头开始手动编写 index.html 会破坏实时重载和项目结构。始终：

1. npx hyperframes init edit 在你的项目的 edit/ 文件夹内——创建脚手架（index.html、meta.json、hyperframes.json、CLAUDE.md、package.json）。
2. cd edit 并修改生成的项目文件来构建实际的编辑。添加 fonts/、assets/sfx/、compositions/ 下的子合成。
3. npx hyperframes preview（长时间运行——在后台运行）——在浏览器中实时重载验证。使用浏览器工具检查和截图。在渲染之前确认节奏、布局、文本时序和动画流畅度。
4. npx hyperframes lint / npm run check——修复所有错误；审查警告。
5. npx hyperframes render——最终的 MP4。
6. 验证：ffprobe（9:16 尺寸、时长、编解码器）+ ffmpeg 帧抽查与联系表。运行捆绑的门控脚本（见下文）。

使用 hyperframes 文档（npx hyperframes docs）获取 API/功能参考以及此技能中的参考以了解编辑标准。如果 HyperFrames 工具缺失或损坏，请停止并告知用户，而不是手动编写通用编辑。

要求

• HyperFrames——渲染引擎，通过 npx hyperframes 运行。此技能是 在 HyperFrames 之上 的编辑标准；它不能替代它。
• Node.js（用于 npx 和验证脚本）。
• ffmpeg / ffprobe 位于 PATH——用于 SFX 合成、音频混合和渲染验证。
• 一个位于 styles/<style>/FRAME.md 的样式包（此技能附带了 vibe-life 作为工作示例和 _template 作为起点——请参阅 styles/README.md）。

输入

从一个项目文件夹开始工作。推荐的布局（适应你的情况）：

your-project/
├── script.md            # 已批准的脚本，包含节拍/时间戳、叠加文字、能量提示——主干
├── voiceover/           # 提供的配音 / 说话头媒体（A-roll）
├── avatar/              # 可选的说话头媒体
├── assets/
│   ├── manifest.json    # 收集的 B-roll + 每个节拍的资产映射 + 版权说明
│   └── ...              # 收集的媒体
└── edit/                # 你的输出（由 `npx hyperframes init edit` 创建）

阅读（不要编辑）脚本、配音/头像媒体和资产清单。选择视频应使用的样式包（styles/<style>/FRAME.md）。

输出

将所有内容写入项目 edit/ 文件夹下：

• HyperFrames 项目（index.html + compositions/ + fonts/ + assets/sfx/ + assets/master_audio.*）。
• 最终渲染的 MP4（9:16），已验证。
• edit-report.md——交接说明：每个节拍的编辑决定、使用的资产（含清单引用）、使用的 SFX/音乐、预览/渲染验证说明，以及你标记为需要最终审查的任何内容。模板在 references/edit-report-template.md（见下方附录）。

编辑语法（此处“专业”的含义）

以下每一项都是一道质量门，而非建议。

编辑室视觉语言是编辑外观——请参阅下面的“编辑室外观”。帧是设计的页面，而不是带有文字的普通视频：混排衬线斜体/粗体无衬线编辑标题、纸张舞台和暗色网格过渡背景、作为默认 A-roll/B-roll 布局的堆叠分割（B-roll 顶部 / 说话头底部）、带有关键词颜色强调的高亮条叠加、接缝字幕和名称药丸、标题卡和 UI 卡组。根据样式包主题化，使用这十种模式构建每个短视频。

• 精心设计的钩子（前 1-3 秒）： 顶部文字叠加、模式中断，然后移动到画面中（例如，一个分割面板扩展到全屏 9:16）。永远不要在静态说话头上开场。
• A-roll / B-roll 结构： A-roll（说话头 / VO）是主干；B-roll（剪辑、截图、动态图形）覆盖并强调它。在 A-roll 音频上剪切 B-roll，而不是在静默中。
• 剪辑粒度： 当脚本能量需要时，剪辑可快至 0.2 秒；切勿使用节拍式的 1 秒剪辑。节奏跟随脚本。
• 分屏布局： 并排和堆叠合成，带有从全帧过渡的刻意转场。带接缝字幕的堆叠分割是主力——全帧 B-roll 覆盖是例外。
• 面部安全构图： 每当有人出现在面板或裁剪区域内时，使用 object-position 偏向裁剪，使面部位于面板可视区域的中心，眼睛在上三分之一处——默认的 50% 50% 对于说话头来源几乎总是错误的，并且会切掉头部。人物面板上的摄像机移动必须在整个移动过程中保持面部在画面中。偏离中心或裁剪的面部是门控失败。请参阅“编辑室外观”第 4 节“面部安全构图”。
• 缓动摄像机运动： 放大/缩小和平移左/右，始终缓动，从不线性，从不抖动。 请参阅“摄像机移动”以了解防抖动约定。
• 动态文字 / 字幕： 动画进入、关键词强调（一个重音词）、与配音同步的字幕叠加。
• 主题化动态图形： 数字卡、规格/JSON 卡、边界框标注、海报分割、图表构建——基于样式主题设计，而非通用。
• 标志 / 文字标记动画： 脚本中提到的品牌/产品标记动画。
• 音效： 在剪辑和图形命中上叠加嗖嗖声、点击声、上升音、撞击音——微妙，混合在语音下方。请参阅“音效和音频”。
• 统一美学： 一种颜色主题、一致的排版、缓动曲线、无默认外观元素、无突兀感。全部来自样式包 FRAME.md。

样式主题化（必需，在设计任何东西之前）

首先从样式包中推导视觉标识——颜色、类型、运动个性和图形语言均来自 styles/<style>/FRAME.md。不同的样式 → 不同的外观。 请参阅下面的“样式主题化”，了解如何将 FRAME.md 转化为具体的 frame.md 设计规范（调色板令牌、本地字体的 @font-face、运动个性 → 缓动/剪辑选择）。附带的 vibe-life 示例使用奶油色/墨色/桃色/黄油色配色；Space Grotesk + Instrument Serif 斜体 + JetBrains Mono；剪纸运动（由 SFX 掩盖的硬切，而非交叉淡入淡出）；每个帧中有一个斜体衬线重音词位于药丸内；平面硬墨色阴影。你自己的样式用其自己的令牌填充相同的角色。

HyperFrames 硬性规则（违反这些规则会导致渲染失败）

1. 每个定时元素都需要 data-start、data-duration、data-track-index 以及 class="clip"（框架通过 clip 控制可见性）。
2. 永远不要 GSAP .clip 元素本身——框架拥有其可见性/变换。动画化一个子包装器（例如 .cam、.inner）。
3. 时间线必须是 gsap.timeline({ paused: true }) 并注册到 window.__timelines["main"]（id 匹配 data-composition-id）。
4. 仅确定性——没有 Math.random()、没有 Date.now()、没有网络获取、没有 repeat: -1。渲染是帧采样的，并且必须是可重现的。
5. 9:16 = 1080×1920。 设置 #root { container-type: size; }，以便 cqw/cqh 相对于帧解析（1cqw = 10.8px）。使用 cqw/cqh（而不是 vw/vh）来设置类型/图形的大小。
6. 相邻的同轨道剪辑不得接触——浮点精度使 3.2 + 0.35 = 3.5500000000000003，这会与从 3.55 开始的剪辑重叠并触发 overlapping_clips_same_track。留出间隙或使用诸如 0.34 的持续时间。（采用自 hyperframes-helper 的 lint 陷阱。）
7. 音频： 视频是 muted 的，带有一个单独的 <audio> 元素。优先使用一个预先混合的主音频轨道（通过 ffmpeg adelay+amix 混合的 VO + SFX）而不是许多 <audio> 元素——多轨道会导致回声/不同步。将其放在一个高的、专用的 data-track-index 上。
8. 密度： timeline_track_too_dense（一个轨道上的许多定时元素）对于短视频试播是建议性的，但在规模下是真实的——对于生产长度的编辑，将场景拆分为子合成（data-composition-src="compositions/file.html"）。

工作流程

1. 将脚本作为主干阅读。 构建一个节拍图：每个节拍/时间戳 → A-roll（VO/头像片段）+ B-roll/MG 需求 + 屏幕上叠加 + 预期的剪辑/摄像机/转场 + 能量。脚本的能量决定节奏；不要强加统一的节奏。
2. 从样式包主题化。 阅读 styles/<style>/FRAME.md。生成具体的设计规范：调色板令牌、本地 @font-face 声明、运动个性、图形语言。（请参阅“样式主题化”。）
3. 核对资产覆盖范围。 交叉引用你的资产清单：哪些节拍由收集的媒体覆盖，哪些是 build-in-editor（由你构建为动态图形），哪些是 alternate 替换。切勿将占位符/未经许可的媒体放入最终渲染中——在报告中标记空白。
4. npx hyperframes init edit。 先搭建脚手架。然后添加 fonts/（本地 woff2 子集）、assets/sfx/、compositions/。
5. 逐个节拍地在 index.html 中（以及用于较长的子合成）构建编辑。 应用编辑语法：精心设计的钩子、A-roll/B-roll 覆盖、非节拍式剪辑、分屏、缓动摄像机移动、动态文字、主题化 MG、标志动画。动画化子包装器，而不是 .clip。
6. 编写 SFX + 主音频。 使用 ffmpeg（anoisesrc/aevalsrc/sine）合成免版税 SFX 或使用已清除的资产；将 VO + SFX 混合到一个主轨道中。（请参阅“音效和音频”。）
7. 预览和检查。 在后台运行 npx hyperframes preview；在浏览器中打开；截图关键节拍；确认节奏、布局、文本时序和运动流畅度。在渲染前修复。
8. Lint。 npm run check / npx hyperframes lint --verbose。修复所有错误；审查警告（注意已知的误报——例如，在高对比度卡隐藏的时间戳采样的 WCAG 对比度警告）。
9. 渲染。 npx hyperframes render → MP4。
10. 使用门控脚本验证。 运行 node scripts/verify-render.mjs <mp4-path>——断言 9:16、预期时长、h264/yuv420p、存在音频。然后使用 ffmpeg 帧抽查生成联系表并与预览目测对比。
11. 编写 edit-report.md 并设置处置状态（完成 / 审核中 / 受阻）。附上 MP4 + 联系表。

运行验证门控（脚本与此文件一起位于 scripts/verify-render.mjs 中）：

node scripts/verify-render.mjs path/to/edit/<file>.mp4

可选地断言确切规格：

node scripts/verify-render.mjs <file>.mp4 --duration 12 --tolerance 0.5

缺失的素材

如果某个节拍需要你的 assets/ 中没有的素材：

1. 首先检查清单中是否有 alternate 或 build-in-editor 行——自定义动态图形节拍是由你构建的，而不是障碍。
2. 如果确实丢失且可以直接合法获取，请自行获取并在 edit-report.md 中记录来源。
3. 否则，在报告中列出确切的节拍/时间戳、素材需求和预期的编辑操作，要求用户提供该素材，并继续处理你可以完成的节拍。切勿渲染你无权许可的占位符。

验证（交接前必需）

• 预览截图： 从实时预览中捕获的代表性帧，确认布局/时序/运动。
• ffprobe： 尺寸精确为 9:16 (1080×1920)、预期时长（±公差）、h264 / yuv420p、存在音频流。门控脚本强制执行此操作。
• 帧抽查： ffmpeg 跨时间线提取帧生成联系表；确认每个所需技术以样式渲染并与预览匹配。
• 面部检查： 在每一帧包含人物的预览截图和联系表帧上，整个面部可见并在其面板中居中（未被接缝、字幕、边缘或摄像机移动裁剪）。如果不是，则门控失败并重新构图。
• 版权： 渲染中无未经许可/占位符媒体；任何需要最终许可检查的内容必须在报告中指出。
• 设计变更日志： 任何与样式规范或编辑室外观模式的偏差（新布局、更改的颜色/类型、修改的运动）都必须在 edit-report.md 的“设计决策”下记录，并附上原因。视觉更改是可以的；静默的视觉更改是不可以的。

署名与来源

此技能研究了 hyperframes 文档、github.com/robonuggets/hyperframes-helper 以及来自创作者级别短视频的参考帧，然后超越了它们。请参阅下方“标准来源”以了解细分。总结：

• 采用自 hyperframes-helper / HyperFrames：HTML 作为唯一真相来源模型；data-* 时序属性 + class="clip"；window.__timelines 上的暂停时间线；GSAP power2/power3.out 缓动；白色辉光字幕样式；SVG 下划线强调；lint 陷阱列表（重叠浮点精度、仅确定性、静音视频加音频等）。
• 此处新增： 一个完整的缓动摄像机运动系统，带有明确的防抖动约定；9:16 短视频语法（精心设计的钩子、低于 0.2 秒的非节拍式剪辑、分割→全帧转场）；一个从 FRAME.md → 具体设计规范的样式主题化管道；免版税 SFX 合成 + 单一预混合主轨道规程；以及一个渲染验证门控（ffprobe 断言 + 联系表帧抽查）。

---

附录——参考库（内联）

创作源将这些作为单独的文件保存在 references/ 下；它们在此处内联，以便该技能是单个独立的 SKILL.md 文件，但已截断时间线。

[为了翻译而截断]