Gitframes 是一個結合 Photoshop、After Effects 和 Blender 級別視頻工具的 npm 套件，由 AI 代理以程式碼驅動。
⚠️ Beta 版本：gitframes 正在積極開發中，API 可能在版本間變動，部分功能尚未完成或不穩定。
Gitframes 專為編碼代理打造，將人們通常分散在三個桌面應用程式（Photoshop 級合成與視覺特效、After Effects 風格的動態、字體排版與關鍵影格、以及 Blender 風格的 3D 場景、攝影機與模型）整合成一個輕量級 npm 套件。你的代理只需撰寫 TypeScript 合成，檢查影格並渲染 MP4，無需安裝或授權數十 GB 的創意套件。
這是純軟體工程的程式碼優先視頻製作——無需無頭瀏覽器、無 DOM 重排、無截圖流程。直接透過 Dawn / WebGPU / Metal / Vulkan 在 Node.js 與現代 WebGPU 瀏覽器上使用 GPU 硬體渲染。
這些影片的每一個影格皆由 gitframes 從 examples/ 中的 TypeScript 程式碼渲染。點擊靜態圖像即可觀看 YouTube 影片。
使用 AI 編碼代理？只需一行指令安裝 gitframes 技能。
支援多種代理（Codex、Cursor、Hermes、Gemini CLI、Copilot 等）。詳情請參考代理技能與插件說明。
現代自動化視頻生成通常受限於通用網頁瀏覽器架構：處理程序負擔、非決定性 DOM 佈局重排與緩慢截圖捕捉。Gitframes 將視頻合成視為軟體工程：
開發者在程式化生成視頻時，常會考慮 Remotion（React/Chromium）或 Hyperframes（Canvas2D/SVG 網頁動畫）。下表比較了基本工程維度。
傳統文字依賴 CPU 光柵化或低解析度 SDF 字形圖集，在 3D 攝影機掃描時會模糊。Gitframes 整合了 Slug 演算法（SlugPipeline）：
提供完整專業影像/視頻著色器節點套件，位於 nodes/ 與 packages/webgpu-renderers：
Layer.chart 可建立折線圖、面積圖、長條圖（分組或堆疊）、散點圖、蠟燭圖、圓餅圖與甜甜圈圖。d3 計算比例尺、刻度與幾何形狀；每個長條、線條、切片與標籤都是普通的盒子、路徑或文字節點。
@gitframes/vision 透過 onnxruntime-node（CPU）或 onnxruntime-web（WebGPU）執行 ONNX 模型，並將結果接入 Gitframes 其餘部分使用的反應式信號系統。
設計上採用延遲加載。VisionRunner.create()、comp.withVision(...) 與 VisionNode.attach(...) 不執行任何 I/O——無下載、無會話、無檔案探測。模型會在任務首次執行時下載。若需提前熱身，可呼叫 await runner.preload(["detect", "pose"]) 或 await vision.ready()（附加節點）。
所有模型均為 Apache-2.0 授權，固定在不可變的 Hugging Face 版本，下載後以 SHA-256 驗證。
每個追蹤實體皆以反應式 ProgrammaticSignal 形式暴露，可用於動畫圖層與著色器統一變數。
可將標準化的關鍵點投影至螢幕空間，並以可配置的攝影機視野（FOV）綁定任意節點至軌跡或關鍵點（SpatialLandmarkTransformer、spatial-pin）。
使用 pnpm 工作區與 turbo 管理：
需求：Node.js 版本需 ≥ 22。Gitframes 利用 Dawn / WebGPU 或 Vulkan 實現原生 GPU 加速。
Gitframes 提供代理技能，教導 Claude、Codex 等編碼代理如何撰寫、渲染與檢查合成。該插件（gitframes）列於 Anthropic 官方插件目錄，僅包含技能，無 MCP 伺服器、掛鉤或指令。其他代理可透過技能 CLI 獲得相同技能。
安裝後，當任務匹配（例如「為此場景新增膠片顆粒效果」或「渲染 intro.ts 的影格網格」）時，技能會自動載入。
該插件僅提供指令，無執行檔、伺服器、掛鉤或啟動器，也不會傳送任何資料。技能會指示代理將 gitframes npm 套件加入專案並使用它。當程式碼使用裝置端視覺時，SDK 會在首次使用時從 Hugging Face 下載固定模型權重（詳見裝置端視覺）。資料不會離開你的機器。
插件從 Anthropic 官方市集安裝，Claude Code 會自動添加，無需額外市集步驟，且插件會自動更新。安裝後，重啟 Claude Code 或執行 /reload-plugins。/plugin 指令需互動式 Claude 終端；桌面應用的 Code 分頁可使用 shell 形式或 + > 插件 > 新增插件並選擇 Gitframes。
在 shell 形式加上 --scope project 可將插件記錄於 .claude/settings.json，供整個團隊使用。
可為整個代碼庫啟用，並提交至 .claude/settings.json；當隊友信任資料夾時，Claude Code 會提示他們安裝。
直接從此倉庫（追蹤 main 分支而非目錄釋出）：
技能 CLI 可將技能安裝至 70 多種代理，包括 Codex、Cursor、Hermes、Gemini CLI、GitHub Copilot、Windsurf、OpenCode 與 Goose。
會偵測機器上的代理並詢問安裝位置。若要自行選擇，對每個代理使用 -a，加入 -g 則為使用者安裝而非專案，-y 可跳過提示。
使用 npx skills update 保持最新，npx skills remove 可移除。
或手動複製資料夾：將 plugins/gitframes/skills/<name>/ 放入 .claude/skills/、.agents/skills/ 或 ~/.agents/skills/。VS Code / Copilot / Cursor / Kiro 可透過其插件介面載入可攜式 plugin.json。
插件位於 plugins/gitframes/，安裝僅包含技能；使用者從 npm 獲得引擎。此處有兩個清單：plugin.json（可攜式 Agent Plugins 1.0，含 OpenAI 列表元資料）與 .claude-plugin/plugin.json。市集目錄為 .claude-plugin/marketplace.json。可攜式欄位集為封閉，客戶端專用欄位放在該客戶端清單中，不在 plugin.json。兩者版本與 gitframes 套件同步：pnpm run version:packages 在變更集版本後同步（或單獨執行 pnpm run sync:plugin-version），客戶端用以判斷更新時機。
在此倉庫中，Claude Code 與其他代理透過 .agents/skills/ 與 .claude/skills/ 的符號連結獲取技能。技能僅存於 plugins/gitframes/skills/，切勿複製至其他位置。pnpm run check:plugins 驗證清單、技能前言、市集目錄、符號連結與生成的效果目錄。pnpm run sync:effects-catalog 在任何 Effect 類別變更後重新生成 gitframes-effects 目錄。
examples/ 目錄包含生產級參考合成範例。
Gitframes 使用 pnpm (10+) 與 turbo 進行協調。
優化的 Dockerfile.renderer 可將渲染服務部署至雲端 GPU 叢集。
Gitframes 為開源軟體，採 Apache-2.0 授權。其按需下載的視覺模型——RTMDet-Ins 與 RTMO（OpenMMLab）及 Selfie Segmenter（Google）亦為 Apache-2.0 授權；詳見 registry.ts 以獲取準確來源與校驗碼。
程式碼優先視頻，原生 WebGPU 渲染。
