圖片輪播圖
風格源自參考輪播圖:
- 無主持人: 輪播圖絕不使用主持人或來賓的影片或照片。僅使用文字、我們建立的圖形及非人物圖片,例如圖表和螢幕截圖。
- 照片幻燈片: 全出血圖片,底部變暗,並加上粗體濃縮全大寫標題。關鍵字使用強調色。
- 封面: 一條細線加上品牌題頭。
- 純文字幻燈片: 深色漸層背景、強調色標題、粗體白色副標題、一般內文。字體刻意比參考值更大(在 1080 寬度下,標題 92、副標題 60、內文 52 像素)。
組成:
- 模板:
pipeline/remotion/src/Carousel.tsx,即 Remotion 的Carousel合成,渲染為靜態圖片。 - 建置:
pipeline/build_carousel.py。 - 每個輪播圖位於其專屬資料夾
carousels/<slug>/中,包含carousel.json和images/子資料夾。 - 輸出:
out/carousels/<slug>/01.png …以及<slug>.pdf,後者可直接上傳為 LinkedIn 文件貼文。
1. 規劃故事(7–10 張幻燈片)
- 封面: 一個承諾或好奇心缺口,例如本週大多數團隊遺漏的「5 個 AI 訊號」或「世界上沒人在談的好消息」。以 8–14 個字寫成。
- 每張幻燈片一個想法: 一個事實、一個重點或一個步驟。標題必須在沒有說明的情況下也能讓人理解。
- 混合幻燈片類型。 不要連續三張照片或三張文字幻燈片。典型模式:封面 → 照片 → 照片/圖表 → 圖形 → 文字 → 照片 → 文字 → 行動呼籲。
- 最後一張是行動呼籲:「追蹤 Fringe Lines」、「儲存此貼文以供下次規劃會議使用」。
強調:在每個標題中用 *…* 包圍 1–4 個字詞,通常是主詞或數字。每張幻燈片最多使用兩組強調詞。
2. 視覺:絕不顯示主持人
輪播圖絕不顯示主持人或來賓。這表示沒有攝影機畫面、沒有大頭照,也沒有「正在說話的人的相片」,即使模糊處理也不行。 每張幻燈片都由文字、我們建立的圖形以及非人物圖片構成。
圖片放置在 carousels/<slug>/images/ 中。來源依偏好順序:
- 我們建立的圖形:
graphic幻燈片(來自Graphics.tsx的統計/人物/線條/引言/標題/清單);- 不需要圖片的字體排印
cover; - 附有
graphic卡片的cover; - 以
image幻燈片形式放入的完成資訊圖 PNG(參見資訊圖技能)。
- 節目畫面分享: 圖表、幻燈片和產品畫面,絕不含攝影機畫面。
- 使用
ffmpeg -ss <秒數> -i "<原始>/Quinn's screen-3.mp4" -frames:v 1 -vf "crop=iw:ih*0.895:0:ih*0.105" images/chart.png擷取;裁切會移除瀏覽器外框。 - 裁切到相關部分,使用
fit: "contain"顯示,並標註圖表的原始發布者。 - 對於商業貼文,考慮使用底層數字將第三方圖表重新繪製成我們自己的
lines或stat圖形。
- 使用
- 使用者自己提供的非人物圖片: 產品截圖、標誌、使用者提供的地點或物品照片。
- AI 生成或圖庫圖片: 僅在使用者要求時使用。
- 不得有真人(包括主持人)或真實事件的偽造「照片」。
- 需標註圖庫圖片來源,且僅使用已授權的圖片。
引言可以作為文字(quote 圖形,註明姓名)處理。只是不要將其與發言者的圖片配對。
3. 編寫 carousels/<slug>/carousel.json
{
"brand": "Fringe Lines",
"accent": "#FF5A1F",
"slides": [
{"type": "cover", "kicker": "Fringe Lines · Oct 30",
"headline": "本週大多數團隊遺漏的 *5 個 AI 訊號*"},
{"type": "cover", "kicker": "Fringe Lines", "headline": "營收成長。*員工人數持平。*",
"graphic": {"type": "lines", "series": [{"label": "營收", "shape": "up"}, {"label": "員工人數", "shape": "flat"}]}},
{"type": "photo", "image": "images/horses.jpg", "focus": [0.4, 0.4], "credit": "照片:…",
"headline": "*普氏野馬*在經過數十年的 *保育* 後重返野外"},
{"type": "photo", "image": "images/chart.png", "fit": "contain", "credit": "圖表:…",
"headline": "Microsoft 的 *營收持續攀升*,而員工人數保持持平"},
{"type": "graphic", "headline": "Anthropic 的 S-1,*濃縮為一個數字*",
"graphic": {"type": "stat", "kicker": "淨營收留存率", "value": 900, "suffix": "%", "label": "…"}},
{"type": "text", "number": "04", "title": "進行事後檢討",
"subtitle": "美國陸軍每次演習結束時都會問四個問題:",
"body": "應該發生什麼事、實際發生了什麼事、為什麼,以及下次要改變什麼。"},
{"type": "cta", "headline": "追蹤 *Fringe Lines*", "sub": "每週新集數"}
]
}
| 類型 | 欄位 | 說明 |
|---|---|---|
cover | headline, kicker?, graphic?, image?, focus? | 題頭位於兩條規則之間;右下角顯示「滑動 →」。無 image 時:產生深色強調色光暈封面,僅顯示文字(較大標題)或在標題上方顯示 graphic 卡片。image 僅用於非人物照片 |
photo | image, focus?, fit?, headline, credit? | 不得有人物。focus = [x, y] 0–1,指定要保留的圖片部分。圖表和螢幕截圖使用 fit: "contain"(完整圖片疊加在其模糊副本上) |
text | title, subtitle?, body?, number? | 大字型。內文應為 20–45 字;較長文字會略微縮小,因此請將其分散到多張幻燈片中 |
graphic | graphic, headline?, credit? | 任何 Graphics.tsx 類型,以完整動畫方式呈現;襯線標題。實際數字使用 bars:{"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]}(負值向左延伸顯示為藍色;hi 行顯示為強調色)。優先使用 bars 重新繪製第三方圖表,而非截圖 |
cta | headline, sub? | 墨水背景,品牌標誌 |
image | image | 一張完成的 4:5 圖片(例如資訊圖 PNG),按原樣顯示 |
- 強調色:
accent預設為 Fringe Lines 的橘色。"#E2A85A"可呈現參考資料中的金色外觀。 - 幻燈片編號: 照片和文字幻燈片會自動在右上角顯示
n/total。
誠實原則:
- 事實和數字必須來自該集節目或您能說出名稱的來源。在
credit中輸入來源。 - 當主持人未提及來源時,請寫「如節目中所引用」。
- 不要捏造統計數據。如果某個數字需要查證,請告知使用者。
4. 渲染
~/.shorts-skill/bin/python pipeline/build_carousel.py carousels/<slug>
此過程約需 30–60 秒(8–10 張幻燈片),並將 PNG 和 PDF 寫入 out/carousels/<slug>/。
YouTube 貼文: 加上 --youtube 以渲染 1080×1080 的方形圖片到 out/carousels/<slug>-youtube/。YouTube 以方形顯示貼文圖片,因此 4:5 幻燈片會被裁切。相同的 carousel.json 可運作;v1 模板會調整佈局以適應方形。"template": "v2" 尚不支援此功能。
5. 品質檢查
製作聯絡表並進行檢視:
ffmpeg -v error -y -pattern_type glob -i "out/carousels/<slug>/*.png" -vf "scale=360:-1,tile=4x3" -frames:v 1 /tmp/sheet.png
檢查:
- 沒有幻燈片顯示主持人、來賓或任何真人。
- 沒有標題超過 5 行或與圖片來源文字重疊。
- 人物臉部和主體未被裁切。如有需要,調整
focus。 - 圖表清晰可讀。使用
fit: "contain",並在必要時更緊密地裁切螢幕截圖。 - 強調詞顯示為顏色,而不是字面上的
*。 - 文字幻燈片最後一行沒有孤單字詞。如果有,請重新措辭或拆分。
向使用者報告:
- 幻燈片列表;
- 每張圖片的來源(螢幕分享、使用者提供或由我們建立);
- 任何需要查證的數字。