Communitygithub.com

4ever-coder/ar-film-creator

可重複使用的 Codex 技能與 Canvas 2D 模板,用於建立手部追蹤的 AR 影片特效。

ar-film-creator 是什麼?

AR Film Creator 是一個專門的 AI 代理技能,專為開發者設計,用於透過 Codex、Cursor 或 Claude Code 等平台快速建立基於瀏覽器的手部追蹤擴增實境(AR)影片專案。該技能提供了一個標準化的專案模板(assets/browser-ar-template),並包含一個結構化的工作流程,用於建立新專案、透過濾波器預設集自訂視覺風格、修改幾何與動態行為,以及管理底層引擎邏輯。其核心基於 MediaPipe Tasks Vision 進行手部追蹤,並在 2D Canvas 上維持穩定的圖層合成順序(背景、膠片、手部/前臂、控制項)。代理會遵守嚴格的設計不變量,例如保留特定的控制列、避免自相交凍結,以及維持 localhost 啟動流程。它包含 PowerShell 腳本用於初始化和測試,並提供驗證檢查清單,以確保模型載入、HTTP 200 狀態碼、控制項功能正常,且無控制台錯誤。此技能支援樣式與行為的疊代開發,同時保持核心 AR 引擎的完整性,成為在基於瀏覽器的 AR 環境中,使用 AI 輔助開發的強大工具。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add 4ever-coder/ar-film-creator

在你喜歡的 AI 中提問

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

說明文件

AR Film Creator

將捆綁的專案作為新專案的真實依據。除非使用者明確要求更改互動方式,否則保持相機、追蹤、幾何、遮擋和伺服器管線穩定。

路由請求

  1. 分類請求:
    • 新專案:實例化 assets/browser-ar-template。
    • 僅樣式變更:編輯 src/filter-presets.js。
    • 行為變更:先編輯預設幾何或動態值。
    • 引擎變更:僅在預設欄位無法表達請求時,編輯 src/app.js。
  2. 對於每次樣式或行為變更,請先閱讀 references/preset-contract.md。
  3. 將視覺簡介翻譯成參數時,請閱讀 references/filter-recipes.md。
  4. 在變更追蹤、幾何、渲染順序、遮罩、啟動或檔案結構之前,請先閱讀 references/architecture.md。

建立專案

執行:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/New-ArFilmProject.ps1 -Destination "<絕對輸出路徑>"

要求目標路徑不存在或為空。請勿隱式覆寫現有專案。

自訂樣式

  1. 保留一個現有的預設集作為已知良好的備用方案。
  2. 在 src/filter-presets.js 中新增一個唯一、以 kebab-case 命名的預設集 ID。
  3. 僅變更 references/preset-contract.md 所定義的欄位。
  4. 除非使用者明確請求引擎層級的圖層數量變更,否則請保持恰好三個圖層定義。
  5. 透過 ?preset=<預設集-id> 測試預設集。
  6. 確認未知的預設集 ID 會回退到 transparent-film。

保護引擎不變量

  • 保留 MediaPipe Tasks Vision 固定的 URL 和模型回退行為。
  • 保留雙手的螢幕位置排序。
  • 保留控制列 4、8、12 和 20。
  • 保留相鄰表面之間的共享邊界。
  • 允許摺疊和扭轉過渡;不要重新引入自相交凍結。
  • 保留合成順序:背景、膠片、手部/前臂、控制項。
  • 保留 localhost 啟動和相機權限錯誤處理。
  • 除非使用者明確要求另一個技術棧,否則保持衍生的專案免建置。

驗證

執行:

powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/Test-ArFilmProject.ps1 -ProjectPath "<絕對專案路徑>"

然後啟動本機伺服器並驗證:

  1. 根目錄、CSS、app.js 和 filter-presets.js 回傳 HTTP 200。
  2. 模型完成載入。
  3. 示範模式渲染出四條彎曲的控制線和三個連接的表面。
  4. 請求的預設集在視覺上可區分。
  5. 扭轉動畫在兩個彎曲方向上都能通過,不會凍結。
  6. 重置和平滑控制功能正常。
  7. 瀏覽器控制台沒有任何專案錯誤。

在可用時使用真實的瀏覽器自動化工具。除非伴隨實際錯誤,否則將 MediaPipe 內部的「OpenGL 錯誤檢查已停用」警告視為資訊性訊息。

報告

報告:

  • 新增的預設集或引擎行為;
  • 變更的檔案;
  • 如何選擇和使用該樣式;
  • 完成的驗證;
  • 仍需使用者處理的相機或硬體檢查。

相關技能