Communitygithub.com

mohamed-stifi/explainer-short

將一個想法或主題轉為完整的垂直解說影片(YouTube Shorts / Reels / TikTok,1080x1920 MP4 + 字幕 + 封面),採用深色畫布、手寫風格、連續圖解式技術解說風格(類似 KodeKloud Shorts)——完全在本機免費執行(Remotion + Kokoro TTS,無需付費 API、無影片模型、無人物畫面)。每當使用者要求製作/產生/建立短影片、Reel、解說影片,或「關於 <主題> 的影片」,或解釋技術概念(如 X 如何運作、X vs Y、系統設計、面試問題)時使用。

explainer-short 是什麼?

這個技能讓 AI 代理能從零開始,自動產出完整的高品質垂直格式解說影片,完全在本機執行,無需任何付費服務或外部 API。它基於 Remotion 框架結合 Kokoro TTS 語音合成,遵循一套嚴格的七步驟流程:從環境設定、腳本規劃、語句生成、語音錄製,到視覺設計、自動檢查與最終渲染輸出。技能強制執行了多項硬性限制(如最多詢問使用者一個問題、最多兩輪檢查修復、最多兩次語音重新生成),以確保流程高效且可預測。生產的影片採用典型的「深色畫布 + 連續圖解」技術解說風格,包含焦點高亮、安全區域限制、自動字幕與封面產生。目前支援 Claude Code 與 Cursor 等代理平台,適合用於快速將技術概念、系統設計或面試題目製作成社交媒體導向的短影片。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mohamed-stifi/agent-skills/tree/HEAD/skills/explainer-short

在你喜歡的 AI 中提問

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

說明文件

Explainer Short(想法 → 完成影片)

您每次請求僅按照以下 7 個步驟依序執行一次,以製作一部完整的影片。 每個步驟都有對應的指令、輸出和停止條件。請勿自行新增步驟。

路徑:SKILL = 包含此檔案的資料夾。STUDIO = 影片工作區 (預設為目前專案中的 ./explainer-studio;若已存在則重複使用)。SLUG = 影片的 kebab-case 識別碼, 例如 how-https-works。

硬性限制(保持流程簡短且低成本)

  • 最多向使用者提問一個問題,且僅在完全沒有主題時才提問。否則請自行決定 (長度、格式、品牌),使用下方的預設值,並在最終回覆中說明您的選擇。
  • check.sh → 修正 → check.sh 最多執行2 輪修正。然後進行渲染,並在回覆中列出任何剩餘問題。
  • 語音最多重新產生 2 次(僅因長度不符或發音錯誤)。
  • 請勿編輯 src/kit/(除了新增圖示)。請勿安裝其他套件或工具。
  • 閱讀 template/src/videos/example/ 一次(它是參考實作)。請勿閱讀 kit 原始碼;references/kit-api.md 文件中有說明。

「Short」、「Reel」、「Explainer short」指的是垂直格式,而非長度模式。僅在使用者要求快速/非常短/少於一分鐘的影片或給定秒數時,才使用「short」長度模式。

預設值:長度 95–120 秒(300–370 字;「short」= 55–70 秒,「full」= 參考長度 160–175 秒 — 請參閱 references/script-guide.md),語音 am_michael 速度 1.18,品牌 = 使用者的姓名/頻道(如果已知),否則為 "YourBrand"。 風格規則來自測量 23 部參考影片;證據位於 references/style-evidence/(僅限人類 — 您無需閱讀)。

步驟 1 — 設定(每台機器一次,首次約 3 分鐘,之後約 2 秒)

bash SKILL/scripts/setup.sh STUDIO

停止條件:最後一行顯示 READY: …。如果輸出 MISSING TOOLS,請告知使用者需要安裝哪些工具並停止。 (如果語音模型檔案已存在於某處,請先設定 KOKORO_MODELS=<dir>,以跳過 340 MB 的下載。)

步驟 2 — 規劃(尚無程式碼)

閱讀 references/script-guide.md。然後在步驟 3 建立資料夾後,撰寫 STUDIO/src/videos/SLUG/plan.md(≤ 25 行):

  1. 標題:使用以下格式之一(X 如何運作 · X vs Y · 面試:… · 系統設計:<產品> 如何實現 X)。
  2. 貫穿範例:一個有名有姓的人物 + 一個從頭到尾使用的具體產品/輸入/值。
  3. 節拍(小節):附帶 ID,6–9 個,每個 = 一個想法。
  4. 階段:閱讀 references/visual-guide.md,然後為每個小節撰寫一行: 小節 → 新增 / 移動 / 焦點 (聚光燈 ID) / 離開(請參閱該文件的「規劃階段」)。選擇 3–4 個強調色,並將每個顏色綁定到一個元素。

步驟 3 — 腳本

bash SKILL/scripts/new_video.sh STUDIO SLUG

撰寫 STUDIO/src/videos/SLUG/script.json(格式:請參閱範例的 script.json)。會破壞規則的事項:

  • sections[].id 需唯一且簡單(hook、scenario、mechanism、…)。最後一個小節是 CTA。
  • 將數字/符號依照您希望它們顯示的方式撰寫,並在 pronounce 中對應到它們的唸法 ("429": "four twenty nine"、"API": "A P I"、"SQL": "sequel"、"k8s": "kubernetes")。
  • 句子 ≤ 18 個單字。僅使用 . ! ? 結束句子(每個句子會分別合成)。 在繼續之前,請根據 script-guide.md 結尾的規則清單進行自我檢查。

步驟 4 — 語音

bash SKILL/scripts/voice.sh STUDIO SLUG

輸出每個小節的開始/結束時間,以及 Done: <秒>s, <字> words, <WPM> wpm。停止條件:持續時間在目標值 ±15% 以內。太長 → 刪減句子(非調整速度)並重新執行一次。

步驟 5 — 視覺效果

閱讀 references/kit-api.md 和範例(STUDIO/src/videos/example/Video.tsx + stages/*.tsx)。 撰寫 STUDIO/src/videos/SLUG/Video.tsx + 每個階段一個檔案於 stages/ 中。不可妥協:

  • 每個元素的 at 必須來自 cue(section, word) 或 sec(section).from — 絕不能使用硬編碼的秒數。
  • 一個連續的畫布:元素會持續存在、移動、變暗並被重複使用。除了階段之間,不得有全螢幕清除。
  • 敘述中每約 ~3 秒,畫面必須有明顯變化(新元素、高亮、狀態變更、移動)。
  • 焦點 = 在 <Canvas focus> 上使用聚光燈計畫(使其他元素變暗)— 這是風格的主要手法。
  • 無字幕。文字覆蓋(Takeaway)≤ 7 個字,每部影片 2–6 個。
  • 將內容保持在安全區域內(x 60–1020, y 280–1480;標題約 150;文字覆蓋位於圖表正下方)。
  • 填滿寬度:主面板寬度 960(或 2 × 465)。無小於 26 px 的元素。

步驟 6 — 檢查(最多 2 輪修正)

check.sh 和 render.sh 會啟動一個本地伺服器和無頭 Chrome。在沙箱化代理程式中,請在沙箱外部執行這兩個指令。 如果您的環境完全無法執行(No available ports found、Chrome 無法啟動、沙箱外的呼叫被拒絕):請在步驟 5 後停止,並告知使用者自行執行 check.sh 然後 render.sh(提供兩者的完整指令)。請勿嘗試任何替代方案。

bash SKILL/scripts/check.sh STUDIO SLUG          # 可選的第 3 個參數:"12.5,30,41" = 要檢查的額外秒數

此指令會檢查每個 cue() 是否與語音時序同步(即時)、進行型別檢查、為每個小節渲染約 3 幀影像(包含結尾卡片),並寫入 out/SLUG/check/sheet.jpg (+ NN.jpg 單幀影像)。查看合成圖像(以及 2–3 張全尺寸的單幀影像)。僅修正失敗的項目:

檢查項目失敗條件
重疊文字/方塊互相碰撞或被螢幕邊緣裁切
比例圖表使用少於 80% 的寬度,或在忙碌的小節中 y 900–1400 區域為空白;在 540 px 寬的畫格中文字需要瞇著眼看
可讀性任何標籤小於約 28 px,或文字位於複雜區域上方
同步元素在其對應的文字之前出現,或敘述正在談論某事物時,畫格顯示空白/陳舊的畫布
連貫性在故事接續時,一個階段看起來與前一個階段無關(所有元素都被替換)
焦點正在談論的事物沒有被高亮顯示(焦點 / 琥珀色 / 使其他元素變暗)
密度一個畫格中有超過 9 個可見元素,或超過 2 行文字覆蓋

型別錯誤 / cue not found 錯誤會顯示修正方式(有效詞彙的清單)。修正後重新執行。

步驟 7 — 渲染 + 交付

bash SKILL/scripts/render.sh STUDIO SLUG

(如果無頭 Chrome 被沙箱封鎖,請在沙箱外重新執行此指令。) 然後撰寫 STUDIO/out/SLUG/upload.md:標題(= 影片標題,≤ 60 字元,結尾可包含 1 個表情符號)、 2 句描述、5 個主題標籤,以及一個「待驗證的事實」清單(您依據記憶陳述的每個數字/主張)。

最終回覆(簡短):MP4 路徑、持續時間、SRT/封面/upload.md 路徑、您做出的選擇 (格式、長度、貫穿範例),以及任何已知的剩餘問題。然後停止。

疑難排解

症狀解決方案
cue not found: "x" #1 in section "y". Words: …使用列出清單中的一個詞彙,或使用正確的小節
某個單字發音錯誤將其加入 pronounce 並重新執行步驟 4
Cannot find module './timing.json'未對這個 SLUG 執行步驟 4
composition SLUG not found執行 voice.sh(它會註冊該影片)
Chrome / SIGABRT / ENOTFOUND remotion.media / No available ports found沙箱封鎖了瀏覽器/埠:請在沙箱外執行指令(參閱步驟 6)
failed to canonicalize path …/voice/.venv/bin/python3 或其他 uv/venv 錯誤刪除 STUDIO/voice/.venv 並重新執行 setup.sh
一個畫格顯示文字超出面板為 <El> 設定更大的 h、更少的行數,或更小的字型(≥ 26 px)
影片太長/太短編輯腳本(速度 1.18 時約 3.1 個單字/秒),重新執行步驟 4

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能