Communitygithub.com

Chans-gh/ai-coding-video

用代码逐帧製作影片(Coding Video)的風格庫與方法:上百種純程式碼可實現的視覺風格,以及結合真實素材與 AI 生成素材的剪輯做法。

ai-coding-video 是什麼?

這個「AI Coding Video」技能提供了一個完整且系統化的風格庫,讓開發者與 AI 代理能夠透過純程式碼(Canvas 2D、WebGL、SVG、Three.js、p5.js、Manim、Remotion 等)逐幀生成影片。它涵蓋了超過一百種視覺風格,依照內容類型(科普、口播、帶貨、宣傳片、短劇、MV、新聞、紀錄片等)分類,並提供可複製的風格提示詞。技能支援三級工作流程:從 0 級「詞典」(選擇候選風格並提供提示詞)、1 級「樣片」(快速生成範例影片),到 2 級「風格包」(將選定風格打包為可重複使用的程式碼與規範)。此外,它還涵蓋了素材來源與處理(真實素材 T 類、AI 生成素材 G 類)、配樂與旁白指南,以及如何撰寫提示詞與渲染程式碼。使用者可以透過查詢索引來尋找適合的風格,或直接要求 AI 根據特定技術(如 Three.js)或內容類型生成對應的程式碼與影片。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Chans-gh/AI-Coding-Video/tree/HEAD/skills/ai-coding-video

在你喜歡的 AI 中提問

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

說明文件

AI Coding Video:用程式碼做影片的風格庫

內容和維護方法見 README.md。這份文件只講 AI 助手怎麼查、怎麼用。

什麼時候用

  • 使用者要給一支影片定風格,或問「有哪些風格 / 哪種風格適合 X」。
  • 需要一句風格描述,去寫畫面提示詞或直接寫渲染程式碼(Canvas、WebGL、SVG、Three.js、Manim、Remotion 等)。
  • 使用者想先看看某種風格在自己專案裡的效果(出樣片),或想把選中的風格固定下來(做風格包)。
  • 使用者手上有錄影、錄影、照片、數據,或者要用 AI 生圖、生影片、語音合成做素材,想由程式碼剪成片子。
  • 要給影片挑配樂、音效或中文旁白音色。

三級用法:從選風格到風格包

級別做什麼產出什麼時候
0 級:詞典在本庫裡選 2–3 個候選,給出提示詞和理由候選清單 + 每個的風格提示詞、技術路徑使用者還沒定風格
1 級:樣片把候選套上使用者的品牌色、字體和真實內容,在使用者專案自己的技術棧裡跑 3–5 秒橫向 16:9 和豎向 9:16 各一段樣片 + 抽幀拼圖,給使用者看專案要換風格、加風格時,一次對話做完
2 級:風格包使用者通過的風格,覆蓋這個專案常用的呈現方式(片頭、講解、數據、轉場、字幕等)可重複使用的程式碼模組 + 寫進專案規範的風格說明(調色板、字體、運動、聲音、禁止項)1 級通過以後

每一級都要使用者點頭再進下一級。1 級樣片之前先確認這條技術路徑在使用者專案裡跑得通(有沒有瀏覽器、GPU、Python 環境等)。

怎麼查(按順序,不要一上來讀全部)

  1. 不知道用哪種 → 先分清三類:畫面全部由程式碼算出(C 類)、用真實素材(T 類)、用 AI 生成素材(G 類)。使用者說了要做哪種影片(口播、帶貨、MV、新聞……)就先查 index.md 的「按內容類型」表,T、G 兩列對照著給;要純程式碼的,在其餘索引表(題材、業務用途、受眾、情緒、平台與格式、素材與條件)裡各找對應的一行,幾張表裡重複出現的是首選。給使用者 2–3 個候選並說明理由。
  2. 已知風格名或編號 → 在 index.md 的「風格目錄」裡找到編號(如 C-013、T-007),打開對應的 styles/*.md(C 類按技術分檔案,T 類在 styles/footage.md,G 類在 styles/generated.md),按錨點 #C-013 定位條目。
  3. 要寫完整提示詞或渲染程式碼 → 讀 prompting.md:8 個控制要點、通用模板、製作路徑、範例、常見翻車與對策。
  4. 要按技術篩選(例如「只用 SVG」「要 Three.js 的」)→ 讀 tags.md 和 data/styles.json,每條有 id / name / theme / content_type / materials / fit / prompt / layer / suggested / verified / render_code / pack / refs(C 類有 theme,T、G 類有 content_type 和 materials)。
  5. 要配聲音 → 讀 sound.md:先按題材定配樂和音效,再按用途挑旁白音色。
  6. 要用素材(T 類、G 類) → 讀 materials.md:素材從哪來、許可怎麼查、怎麼生成、怎麼統一處理再交給程式碼、聲音怎麼配。
  7. 要出樣片(1 級)或做風格包(2 級) → 讀 making.md:動手前的檢查、樣片寫法和自檢、風格包的五條做法和 STYLE.md 寫什麼。
  8. 要寫渲染程式碼 → 先看本 Skill 自帶的程式碼:samples/API.md(樣片骨架和函數速查)、samples/<編號>/(每個已驗證風格的 scene.js、sound.py)、packs/<名字>/(風格包)。條目「樣片程式碼」「風格包」連結文字裡的路徑就是它在本 Skill 目錄裡的位置,不用聯網去 GitHub 取。

取用規則

  • 條目裡 text 程式碼區塊就是那句風格提示詞,原樣使用,再按 prompting.md 的模板補上主題、規格、聲音和流程。
  • 「技術(已驗證)」表示本庫倉庫裡有能跑出樣片的程式碼;「技術(建議)」只是推薦寫法,沒驗證過,向使用者說明時要分清。
  • 只寫風格名會退化為通用扁平風:必須帶 3–5 個標誌元素、禁止項和參考作品。
  • 參考作品只學構圖、節奏、配色邏輯,不照搬角色、Logo、音樂。名字帶作品或作者的「致敬風格」(如 C-187 吉卜力式)也一樣:只學畫法,角色、場景、標誌、台詞全部原創。
  • 提示詞只定方向,同一句話每次出來的畫面不會一模一樣。要復現同一個效果,用「技術(已驗證)」條目的樣片程式碼改,不要只靠提示詞,也不要從零重新設計:先把 samples/<編號>/ 拷到使用者專案裡跑通,再換內容(做法見 making.md「1 級:樣片」)。有「風格包」的直接用包。
  • 樣片程式碼給的是管線和畫法,不是內容:出片管線(lib.js、synth.py、batch.py)照用;鏤空、光影、紋理這類畫法可以借;樣片裡的角色、構圖、配色、文字不能原樣搬進使用者的片子,換成使用者自己的題材和品牌。
  • 案例裡的工具鏈、費用、用時是原作者自述,未經核實,不要當成保證向使用者承諾。
  • C 類畫面全部由程式碼算出,不用任何素材。寫實人臉、真人口播這類效果純程式碼做不到,改走 T 類(使用者自己的素材)或 G 類(AI 生成素材),並告訴使用者要準備什麼。
  • T 類只用使用者確認有權使用的素材,或公共領域、開放許可的素材,出處和許可逐份記下;G 類可以用任何一家生圖、生影片、語音合成服務,按 materials.md「配置生成服務」 配好;哪一類沒配置,先告訴使用者要配什麼,不需要生成的部分照常做;不生成真實人物,不克隆真人聲音。

改內容

新增或修改風格的步驟見 README.md 的「維護」。改完必須執行並通過:

python3 scripts/build_index.py          # 由 styles/*.md 生成 data/styles.json 和 index.md 的風格目錄
python3 scripts/build_index.py --check  # 編號、標籤、圖片、連結、目錄一致性

編號只增不改;data/styles.json 和風格目錄是生成物,不要手改。

相關技能