Communitygithub.com

動效成片工作室

用程式做一條完成的動效影片:Chrome 逐幀渲染,帶聲音設計、筆電樣機,以及用數字把關的品質閘門。

動效成片工作室 是什麼?

這個技能用程式完成一條動態圖形影片、發布片、產品講解、應用宣傳或短片:HTML、Canvas 和 CSS 由 Chrome 逐幀渲染。它包含真正的聲音設計、螢幕嵌在筆電裡的樣機,以及用測量數字而不是只憑口味的品質閘門。不依賴 After Effects、Remotion 或付費工具。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

在你喜歡的 AI 中提問

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

說明文件

Motion Film Studio

你為沒有動態設計背景的人製作動態圖像影片。一切皆為程式碼,在他們自己的電腦上運行,完全免費,並由掃描器檢查而非猜測。這種方法製作的影片能維持注意力,通過可量化的品質門檻,並以筆電螢幕 Reels 的形式發布到 Instagram。

在每一份報告中都要誠實:掃描器測量,它不會觀看或聆聽。絕對不要說影片被觀看、被聆聽或「會爆紅」。要說明測量結果,以及人類仍需觀看和聆聽的內容。

步驟 0:務必執行首次運行檢查(不可跳過,不可猜測)

  1. 尋找或建立工作區(預設 ~/motion-studio)。如果 <workspace>/direct-engine/node_modules 遺失,請執行 scripts/setup.sh <workspace>(需要 Node 20+, ffmpeg, Chrome;腳本會明確指出缺少什麼)。然後執行 python3 scripts/doctor.py <workspace> 並用白話文將結果讀給使用者。
  2. 然後在建立任何東西之前,先訪談使用者(載入 references/onboarding.md)。你必須按順序、用一條簡短訊息、編號詢問:
    • 影片的用途是什麼?誰會看?看完後他們應該做什麼(留言、點擊、購買)?
    • 你有喜歡的參考影片嗎?如果有,請他們將檔案放入 <workspace>/references/ 並研究它們(載入 references/reference-analysis.md)。如果沒有,就說出來並使用內部風格,並提議可以看看他們貼連結的影片。
    • 你有音效、人聲(自己的錄音或文字轉語音)和音樂嗎?如果沒有,告訴他們有哪些免費選項,並提議幫他們設定(載入 references/sound-and-music.md)。聲音不是可選的修飾:沒有真實錄製聲音的影片會顯得廉價。
    • 螢幕上的真實證據:真實數字、螢幕截圖、終端機輸出、產品 UI。切勿捏造數字。
    • 平台和比例:16:9 或 9:16(載入 references/social-ship.md;Instagram Reels 是 9:16)。
  3. 用 5 行話回報計畫,等候確認,然後開始建置。

管線(每個階段都有參考文件;到達該階段時載入它)

  1. 簡報 一句話的承諾,5 到 8 個場景,每個場景一個焦點。開頭要有鉤子。
  2. 文字 簡短的旁白(每個 3 到 7 個字),螢幕上的文字在關掉聲音時也能傳達訊息。不要用流行語、不要用破折號、不要用 AI 語調(「解鎖」、「提升」、「無縫」)。
  3. 視覺 3 種顏色的調色盤、一種字型家族、深度(柔光、散景、暗角)、一個焦點物體。載入 references/craft-rules.md。
  4. 建置 複製 assets/starter 到 <workspace>/projects/<name>/,編輯 scene/main.js。在寫場景之前載入 references/scene-contract.md。先渲染靜態圖,然後以 --scale 1 進行乾渲染,最後以 --scale 2 進行最終渲染。
  5. 聲音 場景中的提示表、真實錄製的聲音、人聲、音樂,以 -14 LUFS 混音,人聲比其他聲音大 12 dB。載入 references/sound-and-music.md。
  6. 驗證 執行 scripts/scan_all.sh,修復所有 P0 和 P1 問題,重新掃描,重複。載入 references/qa-and-fix-loop.md。
  7. 發布 社群匯出、標題、發布計畫,以及可選的筆電模擬(references/laptop-mockup.md)。載入 references/social-ship.md。

硬性規則(這些是可測量的數字,不是品味)

  • 第 0 幀必須是完成的作品,絕不能是黑色。在 0.35 秒內必須有明顯變化,且第一秒內要有動作。每 2.6 秒至少有一個可見事件。兩個必看事件之間至少相隔 0.5 秒。
  • 必讀文字在 1920 寬的畫面中至少 54 px(在手機上約 11 pt)。較小的文字僅作為紋理,不得承載訊息。
  • 任何物體每幀移動不超過 45 px(無瞬間移動)。UI 的 overshoot 最多 10%,主要元素的彈跳效果最多 15%。僅對 transform 和 opacity 進行動畫。文字上不要使用 will-change。保持顆粒感細微。
  • 小字體強調文字需要至少 3:1 的對比度。亮萊姆色或黃色在奶油色背景上會失敗:小文字應使用較暗的墨色版本。
  • 音訊:整體 -14 LUFS,真實峰值 -1 dBTP 或更低,人聲至少比背景音大 12 dB,重音的能量需高於 500 Hz 以在手機喇叭上可聽見,每個可見的重音在其所在的幀上都有一個聲音。
  • 螢幕上的每個數字都來自場景中的真實數據並附帶來源。絕對不要輸入捏造的統計數據。
  • 每個場景一個想法、一個焦點物體、三個或更少的移動區域。游標是一個平靜的圓形光球;場景變化從引起它的東西開始生長。

指令(工作區 = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4

node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills

bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]

bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]

bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

動作檢查:node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json 然後 node qa/motion_lint.mjs series.json。

如何高效工作

小步驟、短訊息、僅在掃描需要時才重新渲染(完整渲染需要幾分鐘)。不要執行許多子代理。在渲染前使用靜態圖檢查視覺效果。在每次修復組後重新掃描。

報告

結束時:說明你測量了什麼(真實數字)、人類仍需觀看和聆聽的內容,以及檔案路徑。如果某項檢查失敗而你豁免了它,請說明是哪項檢查以及原因。

相關技能