Community程式設計與開發github.com

編輯型短影音 (Fringe Lines)

以「編輯風格」(紙張背景、發言人在全版/卡片/圓形畫中畫之間變形、解說圖形、逐字襯線字幕、鉤子與結束卡、音效)製作 Fringe Lines 的垂直短影音。當被要求從單集製作、重新設計樣式或修復短影音時使用。

編輯型短影音 (Fringe Lines) 是什麼?

此技能會根據 Greg Isenberg 短影音的風格,從 Fringe Lines 播客的逐字稿中製作垂直短影音。它的核心在於動態節奏:發言人畫面從不超過 6 秒,每 3-5 秒就會出現圖形或佈局變化。字幕以逐字方式出現,重點關鍵字會用橘色斜體標示,而圖形(如統計數據、人物、趨勢線、引言)會精準地在相對應的字詞出現時呈現。技能會先從 JSON 逐字稿中選取一個 30-50 秒的獨立片段,然後進行剪輯,接著透過 JSON 規範檔(定義鉤子、結束卡、場景模式與圖形類型)來自訂風格。最終產出會是一個結合了音效、臉部追蹤畫中畫功能,並符合 -14 LUFS 響度標準的 MP4 影片。此技能專為 Claude Code/Desktop 設計,並依賴於本機的 Python 與 Remotion 設定。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/qdevery/fringe-lines-video/tree/main/.claude/skills/editorial-short

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

編輯型短影音 (Fringe Lines) 是做什麼的?

此風格模仿 Greg Isenberg 的短影音。所有短影音都必須符合以下標準:

  • 發言人畫面不得連續出現超過約 6 秒。
  • 每 3-5 秒需有圖形或佈局變化。
  • 字幕逐字出現,並搭配少數橘色斜體關鍵字。
  • 圖形需與說話內容同步,在提到該詞時出現。

0. 先決條件(每台機器)

  • pipeline/setup.sh 會安裝虛擬環境 ~/.shorts-skill 以及 ~/.cache/fringe-lines-video 中的 Remotion node_modules。
  • 單集逐字稿必須存在:work/<ep>/words-quinn.json 和 words-doom.json(由 pipeline/transcribe_verbatim.py 產生)。
  • Remotion 原始碼:pipeline/remotion/src/ShortV2.tsx(佈局)和 Graphics.tsx(圖形類型)。

1. 挑選片段(30-50 秒)

  • 在逐字稿檔案中搜尋一個獨立完整的片段,需具備:
    • 強而有力的開場白(主張、數字或自白);
    • 單一主題;
    • 接近結尾時有亮點或笑點。
  • 好的信號:
    • 具體數字(百分比、金額、人數);
    • 提及的公司或產品名稱;
    • 反向觀點;
    • 個人實驗(「我讓 Codex…」)。
  • 避免依賴前後文才能理解的片段(例如「就像我說的」、「那個東西」)。
  • 可以拼接多個 --range。請在句尾切分,並檢查拼接處不要重複字詞。

2. 剪輯

在 work/<ep>/shorts.sh 中加入一行並執行:

b --name short-NN --range START:END [--range ...] --replace "27=>27%" --replace "claude=>Claude"
  • build_short.py 會執行以下動作:
    • 移除填充詞、口吃和長時間停頓;
    • 選擇活躍攝影機;
    • 寫入 work/<ep>/short-NN/clip.mp4 和 props.json;
    • 渲染出基本的 v1 短影音。
  • --replace 用於修正字幕文字。右側為空白則隱藏該字。
    • 務必修正:數字(「27」→「27%」)、產品名稱(Claude、Codex、Descript、GTM、SQL)以及 Whisper 的誤聽。
  • 若要取得撰寫規格所需的精確輸出時間點,請執行: python3 -c "import json;p=json.load(open('work/<ep>/short-NN/props.json'));print(' '.join(f\"{w['text']}@{w['startMs']/1000:.1f}\" for w in p['words']))"

3. 撰寫樣式規格:work/<ep>/short-NN/style.json

{
  "hook":  {"text": "微軟希望 *27%* 的員工離職", "end": 2.8},
  "outro": {"text": "在 *不增加人數* 的情況下 *成長*", "hold": 2.0},
  "emphasis": ["微軟", "27%", "離開"],
  "scenes": [
    {"at": 0.0,  "mode": "full"},
    {"at": 3.0,  "mode": "graphic", "graphic": {"type": "stat", "kicker": "微軟買斷方案", "value": 27, "suffix": "%", "label": "被提供離職補償金的員工比例 *離開*"}},
    {"at": 6.2,  "mode": "card"}
  ]
}

時間單位為剪輯後片段的秒數,取自步驟 2 的字詞時間點。

維持一致的規則:

  • 結構:
    • 場景 0 永遠是 full,並有一個 4-8 個字的 hook,在 ~2.5-3 秒結束。
    • 直接說明主張;不要總結片段。
  • 節奏:
    • 模式交替為 full → graphic → card → graphic → card …,一個 40 秒的短影音中約有 3-6 個圖形。
    • 在下半段可再次使用 full 來呈現一個有力的反應或笑聲。
  • 時間點:
    • 每個圖形應在其說明的字詞出現前 0.1-0.3 秒 開始顯示,並持續 2.5-5 秒。
    • 兩個圖形可以連續出現,例如一個 20 美元的卡片,接著一個 100 美元的卡片。
  • 強調詞: 選取 10-18 個關鍵字:數字、名稱和亮點詞。比對時不分大小寫,忽略標點符號。
  • 強調標示: 在任何文字欄位中,*字詞* 會以橘色斜體呈現。每個字串最多使用一兩個。
  • 結束卡: 一個 2 秒的結束卡,包含重新陳述重點的簡短句子,或向觀眾提問。
  • 誠實原則:
    • 螢幕上的數字必須與節目中所說的一致。
    • 圖表是示意圖:使用 lines 搭配形狀,不得使用虛構的軸線或數值。
    • 當發言人語氣不確定時,使用「大約」或「~」來修飾。

圖形類型(Graphics.tsx):

類型欄位用途
statkicker, prefix, value (number, counts up), decimals, suffix, label一個重點數字
peoplekicker, value (string), label, filled (0–1)人數 / 人員比例
lineskicker, series: [{label, shape: up|flat|down}], caption趨勢比較
quotetext, by?亮點,顯示在螢幕上
headlinesource, title, highlight新聞、公告、一個「裁決」
listtitle, items[]步驟、產品、哪裡出了問題

如果需要新的圖形類型,請將其加入 Graphics.tsx 及其聯集類型。保持卡片風格:白色或油墨卡片、36px 圓角、彈簧入場效果,以及一個以其局部影格 f 為基礎的動畫。

4. 渲染

~/.shorts-skill/bin/python pipeline/style_short.py --ep <ep> --name short-NN --spec work/<ep>/short-NN/style.json
  • 臉部追蹤(pipeline/face_track.py,YuNet)只計算一次並快取於 short-NN/faces.json。它能使圓形畫中畫和卡片置中對齊臉部;如果重新剪輯片段,請刪除此檔案。
  • 音效為合成產生:每個場景變換時有咻聲,圖形出現時有蹦聲。以 --sfx-db -20 混合。
  • 響度:-14 LUFS。
  • 輸出:out/shorts/<ep>-short-NN-v2.mp4。

5. 品質檢查(務必在回報前執行)

擷取影格並檢查:

for t in 1.5 5 10 15 20 25 30 35 40; do ffmpeg -v error -y -ss $t -i out/shorts/<ep>-short-NN-v2.mp4 -frames:v 1 -vf scale=270:-1 /tmp/q_$t.png; done

檢查以下各項:

  • 鉤子: 可讀且不遮蓋臉部。
  • 圖形: 不與字幕區塊重疊(字幕區塊位於 y≈1340-1600)。文字不得溢出卡片。較長的統計數值如「+$500K」會自動縮小。
  • 畫中畫: 臉部位於圓圈正中央。
  • 字幕: 沒有遺留的 *;關鍵字呈現橘色。
  • 響度: ffmpeg -i out.mp4 -af ebur128 -f null - 2>&1 | grep " I:" 顯示約 -14。

向使用者回報:

  • 短影音的主題及其長度。
  • 任何需要驗證的數字。
  • 是否遺留了不雅用語。

Individual skills in this repo

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

carousel

Make a Fringe Lines image carousel (Instagram/LinkedIn, 1080x1350 PNG slides + PDF) — photo slides with big condensed caps headlines and accent words, large-type text-only slides, chart/screenshot slides, explainer-graphic slides and a follow CTA. Use when asked for a carousel, slide post, or "swipe" post from an episode or a topic.

engaging-monologue

Make a 16:9 FringeLines "engaging monologue" video from a solo talking-head take — jump cuts with punch-ins, the speaker shrinking into a portrait picture-in-picture while serif kinetic text, diagrams (pyramid stack, compare, roadmap, steps, big stat) and b-roll cards build on a paper canvas, plus callout cards, lower thirds, chips, a CTA pill and a green end card, all synced word by word to the speech. Use for YouTube explainers, solo commentary, newsletter-to-video and "one idea, told well" pieces.

infographic

Make a single-image editorial infographic (1080x1350) that explains one idea at a glance — two-tone headline, one-sentence dek, a hero visual with 2–4 numbered callouts and leader lines, an optional side note, a three-column "why it matters" row with icons, byline and sources. Use for "explain X in one graphic" posts about a company move, a framework, an architecture or a trend; the PNG can also be a carousel slide.

podcast-intro

Build the cold open for a long-form Fringe Lines episode — a 35–60 s highlight reel of the episode's best lines with explainer-graphic cutaways, keyword captions, whip transitions + SFX, ending on a title card with the topic list. Use when making or revising the intro of a full episode.

相關技能