Community影像github.com

輪播圖

製作 Fringe Lines 風格的圖片輪播圖(Instagram/LinkedIn,1080x1350 PNG 幻燈片 + PDF)— 包含大字體濃縮標題與強調詞的文字幻燈片、純文字幻燈片、圖表/截圖幻燈片、解說圖形幻燈片以及結尾行動呼籲。當被要求為某一集或主題製作輪播圖、幻燈片貼文或「滑動」貼文時使用。

輪播圖 是什麼?

此技能可用於建立可在社群媒體上發布的視覺化輪播圖,專為 Instagram 和 LinkedIn 的 4:5 比例(1080x1350)及 YouTube 的方形(1080x1080)格式而設計。它基於 Fringe Lines 的設計系統,產出包含全出血圖片、大型濃縮字體標題、強調色、純文字章節、圖形以及圖表幻燈片的幻燈片。整個流程以 Remotion 模板和 Python 建置腳本為基礎,可在約 30–60 秒內渲染出高解析度的 PNG 和 PDF。此技能支援七種幻燈片類型(封面、照片、文字、圖形、行動呼籲、圖片以及用於資訊圖表的專用「圖片」幻燈片),並提供強大的排版控制(例如強調標記和文字大小調整)。使用此技能時,代理人必須建構一個 7–10 張幻燈片的故事、編寫 `carousel.json` 檔案(其中包含品牌、強調色和幻燈片陣列),並確保遵守嚴格的視覺準則:不得使用主持人或來賓的影片或照片,僅使用文字、自建圖形及非人物圖片(如圖表和產品截圖)。此外,還包含內建品質檢查功能,可建立縮圖索引,檢查標題是否衝突、文字斷行是否合理,以及強調標記是否正確顯示。

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

Installed? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

在你喜歡的 AI 中提問

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

說明文件

圖片輪播圖

風格源自參考輪播圖:

  • 無主持人: 輪播圖絕不使用主持人或來賓的影片或照片。僅使用文字、我們建立的圖形及非人物圖片,例如圖表和螢幕截圖。
  • 照片幻燈片: 全出血圖片,底部變暗,並加上粗體濃縮全大寫標題。關鍵字使用強調色。
  • 封面: 一條細線加上品牌題頭。
  • 純文字幻燈片: 深色漸層背景、強調色標題、粗體白色副標題、一般內文。字體刻意比參考值更大(在 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 張幻燈片)

  1. 封面: 一個承諾或好奇心缺口,例如本週大多數團隊遺漏的「5 個 AI 訊號」或「世界上沒人在談的好消息」。以 8–14 個字寫成。
  2. 每張幻燈片一個想法: 一個事實、一個重點或一個步驟。標題必須在沒有說明的情況下也能讓人理解。
  3. 混合幻燈片類型。 不要連續三張照片或三張文字幻燈片。典型模式:封面 → 照片 → 照片/圖表 → 圖形 → 文字 → 照片 → 文字 → 行動呼籲。
  4. 最後一張是行動呼籲:「追蹤 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": "每週新集數"}
  ]
}
類型欄位說明
coverheadline, kicker?, graphic?, image?, focus?題頭位於兩條規則之間;右下角顯示「滑動 →」。無 image 時:產生深色強調色光暈封面,僅顯示文字(較大標題)或在標題上方顯示 graphic 卡片。image 僅用於非人物照片
photoimage, focus?, fit?, headline, credit?不得有人物。focus = [x, y] 0–1,指定要保留的圖片部分。圖表和螢幕截圖使用 fit: "contain"(完整圖片疊加在其模糊副本上)
texttitle, subtitle?, body?, number?大字型。內文應為 20–45 字;較長文字會略微縮小,因此請將其分散到多張幻燈片中
graphicgraphic, headline?, credit?任何 Graphics.tsx 類型,以完整動畫方式呈現;襯線標題。實際數字使用 bars:{"type":"bars","kicker","signed":true,"suffix":"%","rows":[{"label","value","from?","note?","hi?"}]}(負值向左延伸顯示為藍色;hi 行顯示為強調色)。優先使用 bars 重新繪製第三方圖表,而非截圖
ctaheadline, sub?墨水背景,品牌標誌
imageimage一張完成的 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",並在必要時更緊密地裁切螢幕截圖。
  • 強調詞顯示為顏色,而不是字面上的 *。
  • 文字幻燈片最後一行沒有孤單字詞。如果有,請重新措辭或拆分。

向使用者報告:

  • 幻燈片列表;
  • 每張圖片的來源(螢幕分享、使用者提供或由我們建立);
  • 任何需要查證的數字。

Individual skills in this repo

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

editorial-short

Make a Fringe Lines vertical short in the "editorial" style (paper background, speaker that morphs between full-bleed / card / round PiP, explainer graphics, word-by-word serif captions, hook + end card, SFX). Use when asked to make, restyle or fix a short from an episode.

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.

相關技能