Communitygithub.com

walter-io/vibecoding-remotion

將一個故事製作成影片來演繹——使用 Remotion 流水線把故事拆解成鏡頭,逐一為每個鏡頭設計與主題匹配的視覺風格和程式化動畫,輸出 1080p 成片。**視覺風格不設模板:配色、字體、動效語言需根據主題自由發揮。** 觸發詞:故事影片、將故事製作成影片、影片演繹、用 Remotion 做影片、口播影片、卡點影片。

vibecoding-remotion 是什麼?

這個技能旨在將一個故事轉化為一支 1080p 的演繹影片。它首先會通讀故事,提煉出主題的獨特氣質,並為此主題設計專屬的視覺語言(例如配色、字體、動效節奏)。接著,它將故事拆解為「章節」和「鏡頭」,並為每個鏡頭設計與情感情緒一致的場景動畫與文字卡點,最終渲染輸出。 本技能的核心理念是「風格服務於主題,沒有固定模板」,這意味著每個新項目都必須從零開始進行主題氣質分析,而不應搬用先前項目的視覺風格。流水線包含五個固定步驟:風格推導、故事拆解、時間軸生成、斷言審計與同步,以及最終渲染與抽檢。強制性規則(如行尾無標點、畫面與台詞情緒嚴格匹配等)在所有項目中均適用。 此技能基於 Remotion 框架,支持 Claude Code、Coder 等 AI 代理工具,並可在終端中直接運行。它提供了可複用的骨架腳本(如 `gen_assets.py`、`check_views.py`)和範例資產(來自「90 後年代誌」項目),用戶可以根據新主題改造這些資產,但絕不應將其作為預設風格。詳細參數(如字號級別、入場方向、景深時長等)記錄在 `references/spec.md` 中,供調整參考。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add walter-io/vibecoding-remotion

在你喜歡的 AI 中提問

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

說明文件

Remotion 故事演繹影片

把「一個故事」變成一隻 1080p 演繹成片:通讀故事 → 提煉主題氣質 → 為這個主題設計專屬的視覺語言 → 拆成「段(章節)→ 鏡(畫面節拍)」 → 逐鏡設計與情節情緒一致的場景動畫 → 文字卡點演繹 → 渲染 → 抽檢。

第一原則:風格服務於主題,沒有固定模板

流水線和方法論是通用的,視覺風格必須按主題重新設計。

  • 每個新故事先做「主題氣質分析」:這個故事的關鍵詞是什麼(懷舊?熱血?懸疑?童話?科技?)→ 推導配色、字體氣質、動效節奏、場景畫風
  • 例證(僅作思路參考,不是規範):溫情回憶向 → 襯線宋體 + 米白/金 + 慢節奏柔光;熱血競技向 → 無襯線粗體 + 高飽和紅黑 + 快切重拍;科幻向 → 冷色 + 等寬字 + 故障/掃描線動效;童話向 → 圓體 + 馬卡龍色 + 彈跳動效
  • 不要把上一個項目的風格帶進下一個項目;用戶沒有明確指定時,先給出 1–2 個風格方案讓用戶選

核心理念

  • 畫面說故事:每一鏡的畫面必須與該句情節的情緒和動作一致(地震句配搖晃的教室、歡呼句配揮旗人群、排隊句配護欄長隊)—— 錯配(悲傷配喜慶)是最大忌諱
  • 場景用程式化動畫(人物剪影/幾何圖形 + sin 相位錯開的運動,逐幀驅動),不用靜態貼圖;動畫密度按主題定(柔情題材少而緩,熱血題材多而快)
  • 排版是表演的一部分:字體氣質、字號層級、關鍵詞強調色都從主題推導

流水線(五步,順序固定)

  1. 風格推導:主題關鍵詞 → 配色板 / 字體氣質 / 動效節奏 / 場景畫風 →(未指定時給用戶選)
  2. 故事拆解:按情節弧拆段(章節)→ 鏡(1–2 行一鏡);每段結尾提煉短金句做總結卡;行尾清標點(clean_tail() 通用清理)
  3. 時間軸 gen_assets.py → timeline.json(鏡頭起止/版式/卡點;MIN_SHOT 3.5s 慢切保底可按主題調)
  4. 斷言審計 + 同步 check_views.py(映射覆蓋/越界)+ verify_timeline.py(行尾標點=0 / 最短鏡頭≥3.0s / 總結卡時長 / 年齡標籤,閾值可按主題調)—— 任一失敗禁止渲染 → sync-timeline.mjs
  5. 渲染 + 抽檢 npx remotion render → ffmpeg 抽關鍵幀複核(場景情緒/文字層級/動畫時序)

硬性規則(與主題無關,永遠成立)

  • 行尾一律無標點(含破折號):通用清理函數 + 斷言 = 0
  • 畫面與台詞情緒嚴格匹配;SHOT_VIEW 映射表改分鏡必重跑審計
  • 巢狀 Sequence 裡子元件的動畫原點 = 其所在鏡頭起始幀(傳 startFrame),否則入場動畫被靜默跳過
  • 政治符號規範畫法(國旗 = 紅底 + 一大四小金星),禁止任何近似塗鴉
  • 換真人配音:放 wav 重跑 gen_assets 自動重排時間軸

已有資產(參考實現,可複用可改造)

templates/ 來自定稿項目「90 後年代誌」(溫情回憶主題:襯線宋體 + 米白金 + 慢節奏 + 人群剪影群像)—— 它是主題推導的一個實例,不是預設風格:

  • 可直接複用的骨架:gen_assets.py(文案→時間軸結構)/ check_views.py(映射審計)/ verify_timeline.py(綜合斷言)/ sync-timeline.mjs / fit.ts(折行)/ beat.ts(拍點)
  • 按主題重寫的視覺層:theme.ts(配色/字號)/ serif.ts(字體)/ scenes.tsx(場景動畫)/ TitleCard.tsx / Era.tsx / Intro.tsx(版式)
  • 8 個群像動畫技法可遷移:人群揮旗、圍觀電視、地震教室、排隊、口罩行人、追孩子餵飯、煙花、燈籠(換配色換畫風即是新場景)

詳細參數

references/spec.md:上述參考實現的完整參數(字號五檔/入場四向/景深/慢漸顯時長/剪影色階),新主題可對照調整量級,不必照抄數值。

相關技能