Communitygithub.com

event4u-app/code-film

由程式碼生成的動態影片,逐幀檢查。

code-film 是什麼?

這個技能讓開發者能夠從純程式碼生成短動態影片,其中每一幀都是時間戳記的純函數。它強制執行嚴格的確定性:頁面暴露 `window.__seek(t)` 介面以實現基於時間的渲染,並執行一系列檢查,包括閃光安全性、格式符合性和最終編碼。工作流程包括從語料庫中選擇配方、詳細的分鏡規劃、撰寫符合 seek 協定的 HTML 頁面,最後透過 `ui:render` 工具和 ffmpeg 進行渲染。主要支援平台包括 Claude Code、Cursor 和 Codex 等能執行渲染管線的 AI 代理,並且特別適用於產品發表片段、動態排版、動畫圖表或循環品牌動畫——但不適用於生成式影片提示或 UI 動畫。它不依賴付費影片服務,而是依靠本機瀏覽器渲染和 ffmpeg 進行編碼,並生成包含影片路徑、SHA-256 摘要與檢查結果的詳細報告。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/event4u-app/agent-config/tree/HEAD/src/skills/code-film

在你喜歡的 AI 中提問

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

說明文件

code-film 是做什麼的?

一種動態影片,其每一幀都是其時間戳記的純函數:一個頁面會暴露 window.__seek(t),ui:render --profile film 會將它定位到每一幀, 擷取畫面,證明序列是確定性的,檢查它是否符合光敏性安全閾值及其宣告的格式, 然後使用 ffmpeg 進行編碼。沒有付費的影片供應商,也沒有即時播放。 影片動畫的值定義於 references/film-motion.md; 頁面協定則在 film-page。

使用時機

  • 使用者要求根據自己的素材製作一段短動態影片——產品發表片段、作品集、動態排版、動畫圖表、流程說明、循環品牌動畫。
  • 影片必須能夠兩次渲染出相同結果、配合節拍或宣告的節奏,或是以指定大小輸出為 MP4。

何時不使用

  • 對於生成式影片供應商(Veo、Kling、Sora)的提示 → 請使用 motion-choreographer。
  • UI 內的動畫——懸停效果、滾動揭示、頁面轉場 → 請參閱 fe-design 的「動畫」一節。
  • 剪輯或為現有素材加字幕 → 請使用 /video 功能群組。
  • 單一靜態或循環 SVG 素材 → 請使用 svg-authoring。

程序

  1. 輸入。 只詢問配方中列為變數的項目:用途、格式與像素尺寸、十六進位調色盤、一種字型、音訊(無、提供的檔案或宣告的節奏)、結尾卡片。如果使用者只說「直接做」,則說明你使用的預設值。

  2. 方向。 從語料庫中選擇一個配方,並說明每一個鏡頭所要服務的單一概念:

    node <skills-root>/corpus-grounding/scripts/ground.mjs search \
      --manifest <skills-root>/code-film/data/manifest.json "<簡要說明>"
    
  3. 禁止事項。 提取該簡要說明的 tells(使用 --domain tell),並將每個禁止事項及其替代方案寫入計畫中。

  4. 格線。 根據提供的音軌獲取節奏與小節數(若安裝了 allin1.sh;否則使用宣告的節奏,並註明為宣告的),然後列出有序的鏡頭清單及其時間。每個文字必須有足夠的閱讀時間(每秒 3 個詞)。

  5. 僅限說明性影片——主張。 列出每個畫面上的數字、名稱與日期及其來源,或標記為使用者提供的。不得虛構任何內容。

  6. 建置。 根據 seek 協定撰寫頁面:window.__seek(t)、window.__videoMeta,不使用牆壁時鐘,使用種子亂數,使用本地字型。從 --domain renderer 選擇渲染器;預設為純 HTML,只有在回答其授權問題後,才建議使用已授權的渲染器。

  7. 連絡表。 渲染一次,讀取 contact.png,修正雜亂、重疊與節拍不準的問題。最多進行三次迭代。

  8. 渲染。

    agent-config ui:render film/index.html --profile film --out film/out.mp4 [--audio track.wav]
    

    退出碼 0 表示乾淨,2 表示有發現(確定性、閃光、靜止時間、格式、網路),1 表示未經評估,3 表示缺少瀏覽器驅動程式。

  9. 報告。 引用清單:seek 形式、每個檢查的狀態(ran 或 skipped: <原因>)、發現結果以及 verification。只有在清單中顯示已驗證且其檔案摘要與你交付的檔案一致時,才能說 verified。

狀態——每個詞可能的含義

  • verified(已驗證)——所有適用的檢查都在此機器上執行過,且編碼檔案的摘要與記錄的相同。這並不代表影片是否好。
  • static-only(僅靜態)——幀已被擷取並計算雜湊值,但需要 ffmpeg 的檢查(閃光安全閾值、編碼、格式)並未執行。請指出缺少的工具名稱。
  • unassessed(未評估)——沒有觀察到任何內容:缺少瀏覽器驅動程式、缺少 seek 形式,或沒有宣告長度。請指出需要安裝的套件或缺少的宣告。

輸出格式

  1. 影片路徑及其來自清單的 SHA-256 摘要。
  2. 檢查表格(ran / skipped: …)以及所有發現結果。
  3. 連絡表路徑。
  4. 對於說明性影片,附上來源的主張清單。

陷阱

  • 使用 Math.random 或 Date.now 的頁面在反向掃描時會產生不同的渲染結果;清單會指出第一個出現差異的幀。請從 t 衍生亂數種子。
  • 閃光安全閾值是一個安全下限:任何頻閃都會失敗,且沒有任何旗標可以降低它。
  • 影片設定檔會在網路關閉的情況下執行頁面的腳本。從 CDN 獲取的字型或圖片不會載入——請將它們與頁面放在一起。
  • 確定性是針對每台機器證明的;不同機器的字型和 GPU 可能不同。
  • 基於時間軸框架建置的頁面會透過 window.__timelines(已暫停、可定位的條目)來觀察;嵌入的素材會以 t − data-start 定位。請將素材編碼為全部內部幀(-g 1),否則 seek 操作可能會落在關鍵幀之間。

禁止事項

  • 請勿將外部圖庫的提示文字貼到計畫或配方中——請根據語料庫重新撰寫。
  • 未經詢問,請勿捆綁或安裝渲染器;請先偵測再選擇路由。
  • 請勿僅憑程式碼就宣稱影片已完成——幀的結果才是決定因素。
  • 請勿宣稱影片很好、符合品牌形象或「比較不像 AI」;請報告實際測量到的資料。

另請參閱

Individual skills in this repo

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

相關技能