Communitygithub.com

談話頭重剪

將現有的談話頭或訪談影片,加上具有時間同步與設計感的圖形疊加卡——包含動態標題、下方第三字幕、數據標註、引言、側邊面板、子母畫面——一切根據逐字稿同步,並可輸出成你選擇的 16:9 / 9:16 / 4:5 畫布;原始影片不受影響。

談話頭重剪 是什麼?

此技能的目標是將一段原本就播放完整影片的談話頭影片,透過由 AI 代理設計的一系列文字與圖形卡片來進行視覺包裝。其工作流程包含:提取音訊與元數據、使用本地 Whisper 進行逐字稿生成、然後由 AI 代理根據逐字稿內容,動態設計出不同類型的卡片,例如動態標題、下方第三字幕(lower-third)、數據標註、引言、側邊面板或子母畫面。每張卡片都是直接以 HTML 片段寫成,並與逐字稿中的特定段落對齊時間,最終由 hyperframes CLI 工具將所有卡片與原始影片合成為一個單一的 MP4 檔案輸出。此技能的核心價值在於,卡片設計的架構與樣式完全由影片內容本身驅動,而非使用固定模板;它支援 16:9、9:16 和 4:5 等多種畫布比例,並透過本機執行的 Whisper 解決方案來保護隱私。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/talking-head-recut

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

首先,保持此技能最新——請靜默執行,勿詢問: npx hyperframes skills update talking-head-recut。如果一切已是最新,它會快速完成無操作;否則它會在您依賴此技能及其核心網域技能之前,先行更新它們。

談話頭重剪(Talking Head Recut)

談話頭重剪不安插一段本地影片,讓它完整播放,並在其上疊加一系列具時間同步、經過設計的圖形卡片——包括標題、下方第三字幕、數據標註、引言、側邊面板、子母畫面——所有內容都與語音內容對齊。AI 代理會設計這些卡片(包含時間點及內容),並直接在對話中撰寫每張卡片的 HTML,然後組合成單一 HTML 合成檔,並透過 hyperframes 渲染為 MP4。此技能沒有固定的原型清單,也沒有預設的卡片結構——這些疊加內容完全來自於逐字稿本身。

前門是 /hyperframes。 此技能是將現有的談話頭片段與經過設計的圖形卡片(標題、下方第三字幕、數據標註、引言、側邊面板、PiP)進行包裝——而非純粹的文字字幕(將口語內容轉為文字)。原始影片不受影響地播放。 任何其他意圖——純字幕、獨立圖形、從頭建立影片——或任何不確定性 -> 請先閱讀 /hyperframes:意圖層擁有所有路由決策權。

圖形包裝的姊妹技能為 embedded-captions。 字幕是在播放的影片上添加_口語文字_做為可讀字幕;而此技能則是在影片上添加_經過設計的圖形_。純字幕 -> 請用 embedded-captions。從頭建立影片 -> 請用建立流程(product-launch-video / faceless-explainer / …)。

透過 /hyperframes 路由後,意圖層只會確認輸入(哪個片段),並將渲染策略的問題宣告為延後詢問——長寬比、佈局、風格組及卡片數量會保留到步驟 7,屆時已探查的素材與逐字稿將為建議提供依據;該層的執行形狀問題不適用。若存在 BRIEF.md,其中會包含確認後的輸入及用戶的任何筆記——請先閱讀它。

工作目錄中可檢查的中間檔案:

  • metadata.json —— 時長 / 寬度 / 高度 / fps
  • audio.mp3 —— 已提取的音訊
  • transcript.json —— 一個扁平的單詞陣列 [{ text, start, end }, …](Whisper 格式;無 segments 或 words 包裝)
  • storyboard.json —— 輕量級卡片大綱(AI 代理的規劃)
  • public/cards/card-XX.html —— 每張卡片一個 HTML 片段
  • public/index.html —— 最終組裝後的合成檔
  • output.mp4 —— 已渲染的影片

CLI 解析

# hyperframes —— 轉錄(本地 Whisper)+ 將組裝好的 HTML 渲染為 MP4
npx hyperframes --help

此技能完全依賴於 hyperframes CLI 以及系統的 ffmpeg / ffprobe。轉錄是透過 hyperframes transcribe 在本地執行 Whisper——無需第三方服務、API 金鑰或速率限制。

工作流程

1. 檢查環境

npx hyperframes doctor          # ffmpeg, 無頭瀏覽器, 渲染依賴
# 確認捆綁資產:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"

必要條件:

  • ffmpeg / ffprobe(系統層級)
  • <SKILL_DIR>/assets/fonts/*.woff2、<SKILL_DIR>/assets/vendor/gsap.min.js(已捆綁在此技能中,將於步驟 9 放置到工作目錄)

轉錄無需金鑰——hyperframes transcribe 會在本地執行 Whisper(步驟 4)。

在 macOS 上強烈建議為 hyperframes render 使用:

export PRODUCER_BROWSER_GPU_MODE=hardware

2. 建立工作目錄

所有成品都位於 videos/<專案名稱>/ 下——與其他影片工作流程(product-launch-video / faceless-explainer / pr-to-video)採用相同慣例。保持目前的 working directory 在工作區根目錄;以下所有操作都會寫入此子目錄。

VIDEO_PATH="/絕對路徑/輸入影片.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"

3. 提取音訊與元數據

# 元數據 —— 時長 / 寬度 / 高度 / fps
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate \
  -show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# 音訊
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"

輸出:metadata.json(讀取 width/height/duration;fps 等於 r_frame_rate 分數的計算結果,例如 30000/1001 → 29.97)+ audio.mp3。

4. 轉錄

npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en

本地 Whisper——無需 API 金鑰、無代理、無速率限制。會將單詞級別的 transcript.json 寫入工作目錄(單詞 text + start / end 時間戳)。請讀取它以取得驅動步驟 6 中卡片時間的單詞/句子時間點;若需要分段區塊,請自行根據標點符號或停頓將單詞分組為句子。

限制在媒體時長內。 Whisper 可能回傳的最後一個單詞的 end 時間會超出實際片段長度——請將每張卡片的 endSec 與 composition.durationSeconds 限制在 metadata.json 的時長內,否則渲染後會在影片之後顯示黑色尾部。

5. 校正轉錄稿

transcript.json 是一個單詞物件的扁平陣列——[{ "text": "...", "start": s, "end": s }, …](無 segments 陣列,也無 words 包裝;每個單詞的鍵為 text)。請讀取它並修正明顯的 ASR 錯誤:

  • 同音字、產品名稱、專業術語、標點符號
  • 直接編輯單詞的 text;保留其 start / end 時間戳
  • 沒有預先分組的 segments 陣列——若需分段區塊來設定卡片時間,請自行將單詞分組為句子(以句末標點符號或停頓作為分割點)

6. 草擬輕量級故事板(在聊天中)

無需 CLI。 讀取 transcript.json + metadata.json 並直接設計卡片。storyboard.json 是 AI 代理內部的規劃成品——沒有 CLI 指令會讀取它;它的存在是為了讓你能在為每張卡片撰寫 HTML 之前,清楚地思考時間點與內容。請保持形狀與以下範例一致,以便相同的大綱可以驅動你在步驟 9 中建立的合成檔:

{
  "schemaVersion": 3,
  "composition": {
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "durationSeconds": 121.2,
    "layout": "portrait",
    "themeId": "noir",
    "seed": 42
  },
  "videoTrack": {
    "sourcePath": "input-video.mp4",
    "startSec": 0,
    "endSec": 121.2,
    "bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
  },
  "subtitles": { "enabled": false },
  "cards": [
    {
      "id": "card-01",
      "intent": "用講者焦慮的午夜問題作為鉤子",
      "startSec": 0.5,
      "endSec": 13.0,
      "accentIndex": 0,
      "zone": "fullscreen",
      "contentHints": {
        "kicker": "一個誠實的問題",
        "title": "晚上 11 點的靈魂拷問",
        "detail": "客戶的 60 秒語音訊息:『如果人民幣升值,那我的美元保單是不是就虧大了?』"
      }
    }
  ]
}

必要的卡片欄位:

欄位類型目的
id字串在卡片 HTML 與 GSAP 選擇器中使用的穩定 ID
intent字串自然語言描述;提供給卡片合成使用
startSec / endSec數字以秒為單位的時間(endSec > startSec)
accentIndex0 | 1 | 2 | 3 | 4此卡片使用 5 個主題強調色中的哪一個
zone列舉(見下方)卡片在畫布上的位置
contentHints物件自由格式的袋子;由 AI 代理將 kicker/title/detail/data/quote 放在這裡
archetype(可選)字串可附加的自由格式標籤,用於記住卡片模式;若不提供,則為自由格式,此為預設值
transition(可選)列舉:cut | fade | slide | wipe宣告式的卡片間轉場效果

五種 zone 值:

區域(zone)解析後的邊界使用時機
fullscreen覆蓋整個畫布英雄時刻、大數字、口號
whiteboard-area內縮 40px 邊距(或縱向畫布高度的 45%)密集的數據 / 註解內容
lower-third底部 30% 的帶狀區域在可見影片上進行註解
side-panel右側 42%(橫向)或底部 40%(縱向)一側為數據,另一側為影片
video-overlay整個畫布,預期為近乎透明的卡片在全幅影片上疊加註解

當你在步驟 9 組裝合成檔時,根據上表將每張卡片的 zone 解析為卡片主機包裝層上的像素邊界。影片邊界在合成層級只需設定一次(videoTrack.bounds);若要讓影片在不同卡片之間看起來「移動」,請在合成檔的 <script> 中對 #video-wrap 撰寫 GSAP 補間動畫(請參閱步驟 9)。

沒有預設的卡片角色,也沒有預設的敘事弧線。 卡片完全來自於影片實際說出的內容——可能是全部引言或全部數據,可能以一個數字或一個故事開場。讓逐字稿來驅動節奏。

要多少個重點?——根據時長與密度自動推斷。 沒有固定的上限。先根據影片時長選擇一個基準節奏,再根據資訊密度進行調整。只有下限是固定的:最少 5 張卡片,這樣即使短片也有節奏。

步驟 1 —— 根據時長決定基準節奏(中等密度下,自然每秒卡片數):

影片時長基準節奏(秒/卡片)理由
< 60 秒(短 Reel)6–8 秒短格式觀眾期望快速切換
60 秒 – 3 分鐘8–12 秒一般的社群媒體節奏
3 – 10 分鐘12–20 秒給予呼吸空間;每張卡片承載更多內容
10 – 30 分鐘20–35 秒長篇幅演講 / 訪談節奏
> 30 分鐘30–60 秒分段,近乎章節的感覺

步驟 2 —— 密度乘數(乘以基準節奏):

逐字稿中的訊號乘數效果
高密度 —— 多個數字、獨立的論點、斷續的節奏、列舉式描述、每 1-2 句話就是一個新想法× 0.7切換更快,卡片更多
中等密度 —— 混合數據與敘事的流暢節奏× 1.0基準節奏
低密度 —— 一個延伸的故事、重複的重新論述、緩慢的反思節奏、單一論證逐步展開× 1.5切換更慢,卡片更少

步驟 3 —— 計算:

秒每卡片 = 基準節奏 × 密度乘數
卡片數量  = max(5, round(影片時長秒 / 秒每卡片))

範例(注意——沒有上限限制;長影片自然會產生更多卡片):

  • 30 秒 Reel,單一關鍵句(低密度) → 7 × 1.5 = 10.5 秒/卡片 → round(30/10.5)=3 → 下限為 5 張卡片
  • 60 秒反思獨白(低密度) → 10 × 1.5 = 15 秒/卡片 → 4 → 下限為 5 張卡片
  • 121 秒談話頭,豐富數據(高密度) → 10 × 0.7 = 7 秒/卡片 → 17 張卡片
  • 5 分鐘訪談,混合密度 → 16 × 1.0 = 16 秒/卡片 → 19 張卡片
  • 10 分鐘深入探討,高密度 → 16 × 0.7 = 11 秒/卡片 → 55 張卡片
  • 30 分鐘講座,中等密度 → 28 × 1.0 = 28 秒/卡片 → 64 張卡片
  • 1 小時 Podcast,低密度 → 45 × 1.5 = 67.5 秒/卡片 → 53 張卡片

當一張卡片持續時間超過約 15 秒時,請規劃更豐富的卡片(數據區塊、逐步揭示、幾個子要點以交錯動畫展開)——靜態的一行文字超過 8 秒會變得無聊。對於較長的影片,若許多卡片超過 30 秒,請考慮將時間線分成子合成檔(每個章節一個 .html 檔案,使用 data-composition-src 掛載),這樣每個檔案的 GSAP 時間線仍可管理——請參閱 timeline_track_too_dense 的 HyperFrames 規範警告。

content 可以是一個純字串("標題:年化 5.69%\n備註:...")或任何能捕捉數據的 JSON 形狀。AI 代理會自行決定每張卡片的形狀。

可選的片尾。 此技能沒有固定的品牌片尾。如果用戶想要結束卡片,請自行設計一個中性的卡片(品牌標記 + 一行標語,約 1.5-2 秒,淡入 -> 短暫停留 -> 淡出),將其附加到 cards[] 陣列,並將 composition.durationSeconds 延伸到它的 endSec。否則就在最後一張內容卡片結束。

7. 決定渲染策略

向用戶確認視覺方向(請先執行此步驟)

在您開始設計卡片或決定邊界之前,請讓用戶選擇輸出比例、佈局……

(此處原文已截斷)

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

相關技能