Communitygithub.com

stanglivideo

使用 Remotion 以程式碼製作動態設計影片,根據音樂節奏剪輯,並讓音效精準落在畫面上。當有人要求製作產品宣傳片、上市影片、產品介紹、解說影片、社群短片、登陸循環動畫或任何「動態設計影片」時使用。

stanglivideo 是什麼?

這是一個基於 Remotion 的 AI 助手技能,專門用於透過程式碼生成專業級的動態設計影片。它能分析使用者喜好的參考影片(包括影格、頻譜圖和音量),並在確定視覺風格、文案、音樂和分鏡前要求使用者批准。該技能會從產品本身的設計中提取顏色、字型和元件,確保影片風格與產品一致。它還包含一套嚴格的品質檢查機制,包括音畫同步、響度(LUFS)和畫面邊界檢查,在所有檢查通過之前不會宣稱影片完成。此技能支援在程式碼無法繪製所需元素時,使用 Gemini 生成真實照片或影片循環。它需要 Node.js、Python 和 ffmpeg 環境,並與 Remotion 官方技能「remotion-dev/skills」配合使用,作為 Remotion API 的參考來源。

相容平台~Claude Code~Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/ilijachrchev/skills/tree/HEAD/skills/stanglivideo

在你喜歡的 AI 中提問

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

說明文件

stanglivideo 是做什麼的?

一部看起來像是產品自己製作的影片,跟著節拍移動,聲音恰到好處:每個音效都在正確的影格上,每個螢幕上的字都夠長讓人閱讀,沒有任何東西超出畫面。使用 Remotion 從程式碼建置,因此保持可編輯狀態。

除非路徑以影片專案路徑開頭,否則以下路徑都是相對於此技能資料夾。$PY 指的是醫生腳本印出的 Python (此技能的 .venv 中的 Python)。

每次運行從這裡開始

  1. 醫生腳本。 首次執行(此資料夾中沒有 .venv 或 taste.md):node scripts/doctor.mjs --setup。它會建立 .venv,安裝 requirements.txt 並從 taste.example.md 建立 taste.md。後續執行:node scripts/doctor.mjs。它會檢查 Node 18+、具有 numpy 和 scipy 的 Python 3.10+、完整的 ffmpeg 以及配套技能。如果 Node 本身缺失,醫生腳本無法執行:請告知使用者並提供下面的安裝指令。

  2. 清楚告訴使用者缺少什麼。 對於每個 FAIL,用一行簡短說明:缺少什麼,為什麼這個技能需要它,以及在其系統上修復的 exact 指令。然後停止,直到使用者說修好了,再重新執行醫生腳本。

    缺少的項目原因WindowsMac
    Node 18+建置和渲染影片winget install --id OpenJS.NodeJS.LTS -ebrew install node
    Python 3.10 到 3.13為音效評分並執行檢查winget install --id Python.Python.3.12 -ebrew install [email protected]
    ffmpeg (完整建置)分析、編碼、響度檢查winget install --id Gyan.FFmpeg -ebrew install ffmpeg
    配套技能Remotion API 規則npx skills add remotion-dev/skills相同

    安裝 Node、Python 或 ffmpeg 後,使用者必須打開一個新的終端機,以便它們在 PATH 中,然後再次執行 node scripts/doctor.mjs --setup。GEMINI_API_KEY 是可選的:僅在實際需要生成圖片或循環時才提及。

  3. 配套技能(必要)。 remotion-best-practices,Remotion 的官方技能。未捆綁在此。將其用於 Remotion API 相關問題(媒體、字型、字幕、渲染選項)。

  4. 品味設定。 讀取 references/base-rules.md 和 taste.md(如果 taste.md 仍然缺失,則從 taste.example.md 建立)。這些是用戶的既定規則;若有衝突,以 taste.md 為準。

不可協商的原則

  • 他們的設計說了算。 顏色、字型、元件、標誌、語調和主張都來自產品。絕對不能帶入任何其他產品的品味,包括任何與其設計相矛盾的此技能內容。
  • 每個影格都是時間的純函數。 沒有 CSS 過渡或關鍵影格,沒有計時器,沒有 Date.now(),沒有 Math.random(使用 seeded rand),沒有影格之間傳遞的狀態。
  • 單一時間來源。 每個影片的 src/films/<film>/cues.json 包含所有提示點時間。影片的 TSX 檔案匯入它,評分腳本讀取它(sound/cues.py)。兩者都不包含字面上的時間值。
  • 測量,絕不猜測。 節拍來自音訊,位置來自偵錯疊加層,顏色來自解碼的像素。
  • 誠實的主張。 只展示產品確實能做到的事情。禁止列表在撰寫文案前須經使用者批准。
  • 先詢問 在提交、推送或發布任何內容之前,以及在每次付費 API 呼叫之前。
  • 在任何文案、檔案或訊息中都不要使用 em 或 en 破折號。

工作流程與審核關卡

每個 STOP 都是一個硬性關卡:詢問(AskUserQuestion),等待,並將答案記錄在專案的 BRAND.md 中。

  1. 需求輸入(必要)。 要求使用者提供 2 到 5 個他們喜歡的影片,每個影片用一行說明他們喜歡什麼,包括聲音。執行 node scripts/intake/intake.mjs <project>/intake <videos...> 並閱讀每個工作表。請參閱 references/intake.md。
  2. 探索。 了解產品:規則檔案、代幣(亮色與暗色)、元件、標誌、登陸頁面、真實螢幕截圖和文案、主張。請參閱 references/discovery.md。
  3. 訪談。 簡報和素材。請參閱 references/interview.md。然後:
    • STOP:亮色或暗色。 若有多個影片,則每個影片分別決定;如果產品有兩種主題,一個系列可以混合使用兩者。
    • STOP:禁止的主張。 展示影片將主張的內容以及它們絕對不能說的列表(來自程式碼、網站和使用者)。等待兩個列表都獲得批准。
  4. 品牌套件。 將 templates/BRAND.md 填入專案。每條規則都需注明來源。
  5. 音樂。 調查和測量候選曲目。STOP:音樂選擇。 請參閱 references/music.md。
  6. 故事。 填寫 templates/film-prompt.md;將節拍計劃寫入 cues.json。請參閱 references/story.md 和 references/ingredients.md。
  7. 專案。 node scripts/new-project.mjs <dir>,npm install。一個套件在 src/kit/;每個影片一個資料夾。請參閱 references/engine.md。
  8. 分鏡圖。 建立場景,為每個影片渲染 5 到 8 張靜止影格(在專案中:node scripts/stills.mjs),拼貼起來。STOP:在任何完整渲染之前,先批准分鏡圖。 請參閱 references/review.md。
  9. 渲染。 在專案中:node scripts/render.mjs <Composition> out/<film>.mp4(內建安全機制)。聯絡表單、檢視、修正。
  10. 評分。 在專案中:依據 cues.json 建立 sound/scores/<film>.py;執行 $PY sound/render.py <film>。請參閱 references/sound-rules.md。
  11. 關卡檢查(強制)。 在專案中:$PY scripts/gate.py <film>。在通過之前,沒有任何東西算是完成。請參閱 references/render.md。
  12. 交付。 路徑、長度、響度、峰值、關卡檢查結果、更改內容。保留每個版本。

同步關卡

  • 呼呼聲根據其峰值放置在移動最快的影格上(align="peak";kit/speed.ts 找出相機移動的最快影格;一個 E.out 入場在其開始時最快,一個 E.exit 離場在其結束時最快)。
  • 砰聲落在元素落地的影格上。叮聲落在最終數字顯示的影格上。
  • 漸強音在重擊點結束(align="end")。
  • 每個音效都帶有一個標籤,標明其對應的螢幕事件。
  • 每次混音後:sound/check.py(音效不得早於其畫面變化)、scripts/final-check.py(-14 LUFS 在 1 LU 範圍內,真實峰值 -2 dBFS 或更低,響度範圍 4 LU 或更大,無靜音,畫面與靜音渲染相同,長度相等)和 scripts/verify.py,全部由 scripts/gate.py 執行。一個標記通過移動音效(或提示點)來修正,絕不能在不查看其工作表的情況下豁免它。

品味記憶

  • references/base-rules.md 隨技能一起發布:來自真實影片的修正,作為通用規則。
  • taste.md(被 git 忽略,從 taste.example.md 複製)是這台機器的品味記憶。使用者在修正影片之前給出的每一個新修正都作為通用規則寫入其中,措辭應能防止在任何影片中出現該問題。在每次運行開始時讀取它。
  • 跨影片適用的規則可以通過對此技能的拉取請求提升到 base-rules.md,絕不能進行靜默編輯。

安全機制(內建於腳本中)

templates/project/scripts/safety.mjs,用於每個綑綁和渲染:首先檢查可用磁碟空間(最低 10 GB),最多同時運行兩個渲染,每次工作後刪除暫存綑綁包,並在之前刪除過期的。在記憶體不足的機器上以並發數 1 渲染。只停止你啟動的進程。

可選模式

  • 生成的媒體。 僅用於程式碼無法繪製的內容:真實照片、攝影紋理、剪影,以及當使用者想要真實拍攝效果時的拍攝背景(絲綢、液體、光線)。scripts/gemini/image.mjs 接收參考圖片,以便輸出符合所選外觀,以及長寬比、尺寸、調整大小和色度鍵;scripts/gemini/video.mjs 從調色匹配的第一影格(或原生循環)製作 Veo 剪輯。僅從環境中的 GEMINI_API_KEY 獲取金鑰;每次呼叫都會列印其成本,並且僅在使用者同意後才運行。請參閱 references/gemini.md。
  • 媒體工具(免費,任何剪輯)。 scripts/media/loop.py 將剪輯轉換為無縫背景循環(接縫搜尋、精確溶解、插值到影片的 fps、循環加海報加靜止序列加邊界表);套件中的 LoopBackground 根據影片的 cues.json 將其放置在運動層下方。scripts/media/clip.py 探測、重新編碼為專案格式、裁剪邊緣並提取靜止影格或工作表。scripts/media/imgpost.py 進行色度鍵和調整圖片大小。
  • 更新。 當使用者要求時:重新研究 prompt-motion.com、skillry.dev 和 awesome-opus5-5-videos 儲存庫以尋找新條目,並通過 PR 提議參考更新。請參閱 references/refresh.md。

品質底線(始終如一)

  • 只使用產品自己的表面、顏色、邊框和陰影。不得有虛構的面板或色調。
  • 在交付尺寸下可讀。更少的字比更小的字好。人們必須閱讀的行大約以每個字 0.2 秒的速度顯示,並保持 2 秒或更長時間。
  • 每個卡片以及結尾標記,在每個移動的每個影格中都完全在畫面內。
  • 每個鏡頭保持 5 到 6 秒,帶一個慢推;當感覺忙碌時,剪輯一個畫面而不是加快速度。
  • 文字從不被游標或晶片覆蓋,從不與其他文字交叉,從不在構建時重新居中。
  • 每個節拍都有事情發生;場景邊界落在小節線上;循環的最後一個影格等於其第一個影格。
  • 在一個系列中,沒有兩個影片共享相同的結構;任何並排放置的內容都必須精確居中。
  • 不使用產品語言不使用的效果:發光、粒子、點擊環、彈性緩動、著色器。

知識庫

會浪費大量時間的陷阱

  • Remotion 靜止影格不會轉發控制台日誌:將測量結果列印到影格中(kit/debug.tsx)。
  • npx remotion still 每次呼叫都會重新綑綁:使用 scripts/stills.mjs(一次綑綁,多個影格)。
  • Remotion 綑綁的 ffmpeg 沒有 tmix、select 或 tile:使用醫生腳本檢查過的系統 ffmpeg。
  • 色彩範圍:解碼每個交付物的第 0 影格並檢查(verify.py --bg);將 Limited-range 的主檔案讀取為 Full-range 會將深色背景提升為灰色。
  • interpolateColors 無法解析 color-mix():任何有動畫的內容都使用十六進位色碼。
  • 非同步圖片元件可能在影格中渲染為空白:使用 Remotion 的 <Img>。
  • 從時間計算出的索引在其區段之前為 -1:進行限制(使用 safeIndex)。
  • 相機縮放時任何元素上的 will-change 都會使其文字模糊。
  • 文字逐字揭示遮罩會在沒有內邊距的情況下裁剪最後幾個字母:使用 kit/components.tsx 中的 WordReveal。
  • 渲染內部進行影片解碼不可靠:將循環轉換為圖片序列。

Individual skills in this repo

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

相關技能