adriiita/vertical-video-editing-skill

影片編輯

當你已有已核可的腳本、提供的語音/人頭媒體及收集的素材，並需要將它們製成完成的直式（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 並修改生成的專案檔案來建構實際的編輯。在 compositions/ 下新增 fonts/、assets/sfx/、子合成。
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 的編輯標準；它不取代 HyperFrames。
• Node.js（用於 npx 和驗證腳本）。
• ffmpeg / ffprobe 在 PATH 中——用於 SFX 合成、音訊混合和渲染驗證。
• 一個風格套件，位於 styles/<style>/FRAME.md（此技能附帶 vibe-life 作為實際範例，以及 _template 作為起點——請參閱 styles/README.md）。

輸入

從一個專案資料夾開始工作。建議的佈局（可根據你的情況調整）：

your-project/
├── script.md            # 已核可的腳本，包含拍點/時間戳、疊加文字、能量提示——主軸
├── voiceover/           # 提供的語音 / 人頭媒體（A 軸）
├── avatar/              # 可選的人頭媒體
├── assets/
│   ├── manifest.json    # 收集的 B 軸 + 每拍資產對應 + 權利備註
│   └── ...              # 收集的媒體
└── 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 中（如下附加）。

編輯文法（「專業」在此的意義）

以下每一項都是品質關卡，而非建議。

專屬視覺語言即是編輯外觀——請參閱下方的「編輯外觀」。影格是設計好的頁面，而非帶有文字疊加的影片：混合了襯線斜體/粗體無襯線編輯標題、紙質背景與深色網格間隔背景、堆疊分割（B 軸在上 / 人頭在下）作為預設的 A 軸/B 軸佈局、帶有關鍵字顏色強調的高亮條疊加文字、接縫字幕與姓名標籤、標題卡片和 UI 卡片堆疊。從這十種模式建構每部短片，並根據風格套件進行主題化。

• 設計好的鉤子（前 1–3 秒）： 文字疊加在上方，一個模式中斷，然後移入影格（例如，一個分割面板擴展成全螢幕 9:16）。切勿以靜態人頭開場。
• A 軸 / B 軸結構： A 軸（人頭 / 旁白）是主軸；B 軸（剪輯片段、螢幕截圖、動態圖形）覆蓋並強調它。將 B 軸剪在 A 軸音訊之上，而非寂靜中。
• 剪輯粒度： 當腳本能量需要時，剪輯可以快到 0.2 秒；絕不使用節拍器式的 1 秒剪輯。節奏跟隨腳本。
• 分割畫面佈局： 並排和堆疊合成，並有意識地進出全螢幕的轉場。帶有接縫字幕的堆疊分割是主力——全螢幕 B 軸覆蓋是例外。
• 人臉安全構圖： 每當有人物在面板或裁切內時，使用 object-position 偏向裁切，使人臉位於面板可見區域的中心，眼睛在上三分之一處——預設的 50% 50% 對人頭來源幾乎總是錯誤的，並且會切掉頭部。對人物面板的鏡頭移動必須在整個移動過程中保持人臉在影格內。偏離中心或裁切的人臉是關卡失敗。請參閱「編輯外觀」第 4 節「人臉安全構圖」。
• 緩動的鏡頭運動： 放大/縮小和左右平移，務必緩動，絕不線性，絕不抖動。 請參閱「鏡頭運動」了解反顫動契約。
• 動態文字 / 字幕： 動畫入場、關鍵字強調（一個重音詞）、與語音同步的字幕疊加。
• 主題式動態圖形： 數字卡片、規格/JSON 卡片、邊界框標註、海報分割、圖表建構——以風格主題設計，而非通用。
• 標誌 / 字標動畫： 腳本中提到品牌/產品標誌時的動畫呈現。
• SFX： 嗖嗖聲、點擊聲、上升音、撞擊聲，疊加在剪輯和圖形命中點上——微妙，混合在語音之下。請參閱「sfx-and-audio」。
• 連貫的美學： 一個顏色主題、一致的字體排印學、緩動曲線、沒有預設外觀的元素、沒有突兀感。全部來自風格套件 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. 永遠不要對 .clip 元素本身使用 GSAP——框架擁有其可見性/變換。動畫化一個子包裝器（例如 .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 軸（VO/人像片段）+ B 軸/動態圖形需求 + 螢幕疊加文字 + 預期的剪輯/鏡頭/轉場 + 能量。腳本的能量決定節奏；不要強加統一的節奏。
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 軸/B 軸覆蓋、非節拍器式剪輯、分割畫面、緩動的鏡頭運動、動態文字、主題化動態圖形、標誌動畫。動畫化子包裝器，永遠不要 .clip。
6. 編寫 SFX + 主音訊。 使用 ffmpeg（anoisesrc/aevalsrc/sine）合成免版權 SFX 或使用已清除的資產；將 VO + SFX 混合成一個主音軌。（請參閱「sfx-and-audio」。）
7. 預覽和檢查。 在背景執行 npx hyperframes preview；在瀏覽器中開啟；截取關鍵拍點的螢幕截圖；確認節奏、佈局、文字時間點和動畫流暢度。在渲染前修正。
8. 檢查。 npm run check / npx hyperframes lint --verbose。修正所有錯誤；檢閱警告（注意已知的誤報——例如，在高對比卡片隱藏的時間戳取樣的 WCAG 對比度警告）。
9. 渲染。 npx hyperframes render → MP4。
10. 使用閘門腳本進行驗證。 執行 node scripts/verify-render.mjs <path-to-mp4>——斷言 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 檔案。

…

[為翻譯截斷]