Communitygithub.com

leodavincs/kalem

使用不同「引擎」繪製影片每個場景、加入翻頁等轉場效果,並在關鍵幀加上音效。適用於「用程式做影片」、「製作動畫」、「分割場景」、「選擇引擎」、「Reels/YouTube 動畫」等情境。

kalem 是什麼?

Kalem 是一個創新的 AI 代理技能,專為產生結構化的動畫影片而設計。它將影片分解為多個場景,並根據每個場景的視覺內容自動選擇最佳的渲染引擎(例如 Paper.js 用於線稿、PixiJS 用於粒子效果、Three.js 用於 3D 場景)。此技能支援獨立的場景生成、基於 gl-transitions 的翻頁等轉場效果,以及使用 Tone.js 在關鍵幀上精準添加音效。它特別適用於 Claude Code 等代理平台,透過統一的 `BRIEF.md` 和 `zaman.json` 配置檔案確保視覺一致性,並支援以 Reels/Shorts 為目標的垂直影片格式及完整的土耳其語字元處理。強化學習後的工作流程包括場景分割、並行渲染、品質控制與最終合成,能產出專業且風格統一的動畫影片。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/leodavincs/kalem/tree/main/.claude/skills/kalem

在你喜歡的 AI 中提問

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

說明文件

Kalem:每個場景都有自己的畫筆

此技能從儲存庫根目錄執行(claude 在儲存庫資料夾中開啟)。所有路徑均相對於儲存庫根目錄。新影片建立在 projeler/<名稱>/ 下。

只用單一引擎製作的影片看起來都很相似。此技能將影片分割成場景,檢視每個場景「裡面有什麼」,然後選擇最適合繪製它的引擎。引擎就像一支畫筆:同一幅圖,鉛筆和水彩畫出來的感覺完全不同。

場景內容 → 使用哪個引擎

場景中有...引擎原因
手繪、自繪線條、草圖、筆觸Paper.js能畫出最流暢自然的線條。專門處理筆觸工作。
角色、走路、舉手、形狀變形普通 Canvas(自訂繪圖程式碼)對動作和形狀有完全的控制。
爆炸、光線、閃光、灰塵、數千個小碎片PixiJS能流暢播放數千個碎片而不卡頓。
螢幕文字、數字、計數器、資訊卡、新聞剪輯HyperFrames(HTML + GSAP)文字與資訊動畫中最乾淨的選擇。
真實 3D:鏡頭旋轉、光照、陰影、機械Three.js瀏覽器中的真實 3D 效果。
公式、圖表、示意圖、數學Manim(Python)3Blue1Brown 使用的工具。若無 LaTeX 則使用 Text。

輔助工具不繪製場景,而是在引擎內部協助其工作:

任務輔助工具
輕量物件掉落、翻倒、彈跳Matter.js
重型物件滑動、堆疊Rapier
場景間轉場(125 種現成轉場,翻頁 = BookFlip)gl-transitions(ortak/gecis.html)
物件像彈弓一樣彈入畫面Anime.js
五彩紙屑、星星、表情符號雨tsParticles
縮小 3D 模型glTF-Transform
關鍵幀音效(點擊、沙沙聲、敲擊聲)Tone.js(ses/ses.html)

此表格是根據一個人的偏好建立的:將 20 個工具在相同場景上進行比較、觀看並評分。請自行嘗試,並根據您的觀察修改表格。

流程

  1. 分割場景。 將使用者描述的影片分成 4-8 個場景。為每個場景用日常語言寫一句話,並選擇引擎,以表格形式呈現給使用者: 「場景 1 中有一個自繪的草圖 → 需要使用 Paper.js 繪製。」 不要使用技術性壓縮用語(例如不是「數字在跑」,而是「場景中有一個遞增的數字」)。 一個場景 = 一個引擎。 如果場景中有多個任務,主任務(佔據畫面大部分)決定引擎,次要任務以輔助工具形式加入。
  2. 撰寫共用檔案。 <專案>/zaman.json(fps、尺寸、轉場幀數、場景列表及其幀數) 和 <專案>/BRIEF.md(共用視覺語言、事實、每個場景的描述、交付合約)。範例:ornek/ucan-makine/(如果有的話)。
  3. 產生場景。 紙張紋理、顏色和字體在 BRIEF 中定義一次,每個場景都使用相同的設定;這對於使影片看起來出自同一人之手至關重要。 每個場景都在自己的資料夾中:<專案>/sahneler/<NN-引擎>/ → calistir.sh、video.mp4、kontrol.png、olaylar.json。場景彼此獨立,可以平行產生(每個場景可由不同的代理處理)。
  4. 檢查。 查看每個場景的 kontrol.png 和幾個完整幀:文字是否溢出?是否有空白幀?顏色是否符合共用語言?第一幀是否填滿?
  5. 合併。 python3 birlestir.py <專案> [--gecis BookFlip] → 轉場 + 音效 → <專案>/cikti.mp4。 若想向觀眾顯示每個場景是由哪個引擎繪製的,請加上 --etiket:在 zaman.json 中為每個場景加上 "etiket": ["Paper.js", "自繪鉛筆線條"](可選的第三行用於輔助工具),以及第一個轉場的 "gecis_etiketi"。每個場景的左下角會以筆記本紙張的顏色顯示一個小標籤。
  6. 審查。 只將檢查幀和 BRIEF 提供給一個全新的代理,並詢問:「觀看者會不會覺得這裡『不應該這樣』?」修正發現的問題,然後再向使用者提出。

技術規範

  • 時間由幀數決定。 不使用 Math.random,使用種子隨機數。兩次執行應產生相同的幀。
  • 基於瀏覽器的引擎:頁面呼叫 /ortak/surucu.js 中的 surucu(kur, kare, KARE),kare(f) 返回一個已繪製的 canvas。捕捉方式:python3 ortak/yakala.py <頁面路徑> <幀資料夾> [寬度 高度],然後用 ffmpeg 轉為 mp4。
  • olaylar.json:[{"kare": 12, "tur": "cizgi|tik|vurus|dusme|hisirti|parilti|kanat|sayac", "guc": 0-1}]。與影像中的動作在同一幀。音效由此產生,因此音效和影像永遠不會不同步。
  • 在捕捉瀏覽器頁面之前,先用 node --check 測試 JavaScript;若有語法錯誤,頁面將完全無法載入,捕捉器會在 60 秒後停止。
  • Manim:如果儲存庫根目錄下有 .venv-manim/bin/python,則使用它(MANIM_PY)。如果沒有 LaTeX,則使用 Text 而非 MathTex。
  • ffmpeg 中不使用 drawtext 繪製文字;文字在引擎內部繪製。
  • 土耳其語字母(Ç Ğ Ş İ Ö Ü)必須完整;大寫使用 toLocaleUpperCase('tr')。
  • 第一幀必須填滿:不是從黑色淡入。最後大約 15 幀保持平穩(轉場會疊加在該處)。
  • 無突然閃光 / 閃爍:幀與幀之間的亮度跳躍應保持較小。
  • 對於垂直影片(Reels/Shorts):上邊約 250 px、下邊約 420 px、右邊約 150 px 內不放置重要元素。

安裝

./kurulum.sh 安裝引擎所需的套件(需要 Node 20+、Python 3、ffmpeg、Google Chrome;Manim 為選項:pip install manim)。

相關技能