david-d2c2/motion-promo-reels

以程式碼生成動態圖形的宣傳短片

15–30 秒的影片完全由程式碼生成：2D Canvas → 逐幀畫面 → ffmpeg，音訊則以 numpy 合成。無需影片模板、After Effects 或第三方音樂。涵蓋三種使用案例：

• 個人或個人品牌（16:9）；
• 少量產品（9:16）；
• 商店完整目錄（9:16，數十至數百支影片）。

指導原則：不虛構任何資訊。 影片中顯示的每個數字、價格、顏色或功能都必須來自可驗證的來源：官方網站、商店 API、產品頁面或專案文件。若某項資訊無法確認，則標記為「待確認」並如實告知。

本套件內含三個完整模板，位於 ${CLAUDE_SKILL_DIR}/templates/（若在 claude.ai 上對話，則為 templates/，與此檔案同目錄）。請複製最接近的模板至使用者的專案中並進行調整，無需重新打造引擎（參見第 4 節）。templates/README.md 列出了每個模板需要修改的項目。

所有畫面文字應使用品牌目標受眾的語言撰寫，並以使用者的語言回覆。固定的介面字串（如「from」、「colors」、「NOT HIM」……）應透過模板的 textos 區塊覆寫，絕不編輯引擎。請在 no_es 中設定與個人相符的性別。

0. 選擇案例

案例	模板	格式	長度	哏的單位
個人或個人品牌	persona-16x9	1920×1080	27 秒	一個，手寫
網站或服務	persona-16x9，調整後	16:9 或 9:16	20–30 秒	一個，手寫
少量產品（≤10 件）	producto-9x16	1080×1920	15.5 秒	每個產品一個，手寫
目錄（數十至數百件）	catalogo-9x16	1080×1920	15.5 秒	每個分類一個，模板短語從每個產品的數據填入

若使用者未指定，則產品使用 9:16 格式並用一行說明。

1. 研究（在撰寫任何腳本之前）

資料來源，依序為：

1. 專案資料夾（若有）。 閱讀 CLAUDE.md、AGENTS.md、決策記錄、報告以及社交媒體計畫。這些檔案包含品牌與文案規則（例如「不得提及第三方品牌名稱」、「非正式語氣」、「禁止空泛的誇飾」），以及設計標記、審查規則和法律聲明（AI 標籤）。這些規則凌駕於任何創意想法之上。
2. 官方網站。 主視覺、服務項目、統計數據、方法論、技術棧、憑證。若網站使用大量 JavaScript，請使用瀏覽器並逐段讀取 document.body.innerText。
3. 線上商店：
   • WooCommerce：/wp-json/wc/store/v1/products?per_page=100&page=N 以及 /products/<id>。價格以分為單位。prices.price_range 中最小值 ≠ 最大值 → 使用「from」；on_sale + regular_price → 刪除線價格；attributes（顏色、尺寸、測量值）；description（通常包含結構化項目列表）；permalink。
   • Shopify：/products.json 以及 /products/<handle>.json。
   • 絕對不要猜測 slug 或 URL： 請從 permalink 讀取。
4. 網路搜尋。 對個人品牌很有用，但常見姓名可能出現同名者。若發生此情況，應將其轉化為腳本素材（參見第 2 節），而非隱藏它。
5. 照片： 優先使用本地專案檔案。雲端沙盒通常無法從商店下載圖片；請勿重複嘗試。請使用本地照片，或透過程式碼繪製產品（條紋、緞面波浪和簡單形狀的效果可能比預期更好）。

記錄讀取資料的日期：價格會過時。

2. 概念：哏

哏是產品或人物的真實屬性，被轉化為影片本身的行為。 它不是附加在表面的笑話。以下為範例機制，所有機制均已實作於模板中（哏 ID 在程式碼中為西班牙文）：

機制	真實屬性	影片行為
invisible	透明、隱形、低調	一個空畫面：「這裡有個保護殼。看不到？當然，因為它是透明的。」接著畫面像拉鍊般解開。
contador（計數器）	大量數量（公尺、小時、單位）	「這支影片長 15 秒。這卷布料長 50 公尺。你不會有時間用完它。」計數器開始計數。
diagonal	斜裁、條紋或對角線設計	文字傾斜 45°，條紋穿過螢幕。
brillo（光澤）	亮面或緞面處理	「這行文字是霧面的。/ 這行會發光。」（帶有光澤效果）
cortar（剪斷）	無鞋帶、無線材、無綁帶	兩條線將文字懸掛起來，線被剪斷後文字保持不動。
elevar（提升）	平台、托高、高度	文字在「墊子」上上升。
secuencia（序列）	多種尺寸、寬度或款式	真實變體逐一翻轉：「這裡，從 E 到 H。」
quitar（移除）	不含 X	畫出兩個圓圈並飛走：「不見了。」
ritmo（節奏）	運動、動作	詞語隨著節拍落下。
reordenar（重新排列）	多用途、可變換	兩行文字交換位置：平行、交叉、V 形。
patron（圖案）	刺繡、印花、蕾絲	裝飾性圖案自行繪製。
calma（平靜）	敏感類別（健康、術後、孕婦……）	無哏、無音效撞擊、無打擊樂：寧靜的基調。
homonimos（同名者，人物）	Google 上的常見姓名	investigar("Name") 顯示劃掉「NOT THEM」的同名者，然後「SOURCE FOUND」。

規則：

1. 一個 真實、可驗證 的屬性。
2. 三行結構：鋪陳、轉折、笑點（笑點以斜體或強調色顯示）。
3. 笑點不能是假的。 若產品頁面未提及，請勿宣稱。條件式短語（設定檔中的 si/sino）可讓笑點僅在描述支持時出現。
4. 一個貫穿整支影片的固定自我指涉元素，與產業相關：HUD 顯示時間碼與幀數（科技業）、縫線與針數計數器（手工藝、紡織）、測量「影片長度」的捲尺（時尚、尺寸）。在尾聲中收束這個元素（「這支影片長 15.5 秒。一種尺寸適用所有人。」）。
5. 絕對不要開身體的玩笑。 敏感類別使用 calma。同時檢查是否有任何抽象圖形可能被解讀為身體輪廓。
6. 禁止空泛的誇飾，禁止與競爭對手比較。

3. 結構

9:16 產品（15.5 秒，30 fps = 465 幀）

場景	時間	內容
鉤子	0–3.0	哏
產品	3.0–5.6/5.8	名稱 + 附有彈跳效果的照片（或程式繪圖、或佔位卡片）
範圍	~2.8 秒	真實顏色數量、或範圍（尺寸）、款式與顏色及其名稱
事實	~2.6 秒	產品頁面的三項事實，附帶動畫勾選標記
價格	~1.8 秒	真實價格、「from」或特價、若適用則顯示稅務說明
尾聲	13.2–15.5	標誌或品牌、以藥丸形狀顯示的網站、運送資訊或行動呼籲，以及結尾的眨眼提示

16:9 個人或品牌（27 秒）： 終端機 → 同名者以故障效果劃掉 → 掉落（找到來源 + 標題） → 含計數器的統計數據 → 分階段的方法論 → 技術棧跑馬燈（停在自我指涉項目上：「↑ 那就是我」） → 「這支影片：0 個模板 · N 行程式碼」（真實數量） → 該人物的引言 → 尾聲含字母組合、姓名與行動呼籲。

4. 引擎

<project>/<reels-folder>/
├── METODO.md        方法、規則與檢查清單（供人類閱讀）
├── CLAUDE.md        狀態與待辦事項（供下次對話使用）
├── config.json      （目錄）商店、屬性、標籤、調色板與類別 → 哏 + 短語
├── productos.json   品牌 + 每個產品一個區塊
├── motor.html       1080×1920 或 1920×1080 Canvas；`window.renderFrame(f)` 是**確定性**的
├── render.js        puppeteer-core → 每幀一個 JPEG → ffmpeg image2pipe；然後音訊與混流
├── audio.py         numpy/scipy 合成，使用與 motor.html 相同的提示表
├── catalogo.js      （目錄）API → 產品資料表：哏、短語、事實、品牌移除
├── extraer.js       （目錄）使用瀏覽器 UA 與暫停下載目錄與照片；REVISAR.md
├── fonts/           本地 woff2 及其授權（fontsource：`npm pack @fontsource/<family>@<version>`）
├── img/             本地照片
└── out/             最終影片

技術要點：

• 確定性： 每幀由 t = f/FPS 計算。不使用 requestAnimationFrame，不使用未播種的亂數（請使用 hash(n)）。
• 輔助函式：clamp、P(t,a,b)（進度）、緩動函式（eOC、eIOC、eOX、eIX、eOB 含彈跳）、T_() 用於文字（含字距與透明度）、fit() 用於縮小文字至合適大小、rr() 用於圓角矩形。
• 場景是接收本地時間 u = t - T.scene 的函式。轉場為每次切換時 ±0.16 秒的背景色抹除。
• render.js：page.evaluateOnNewDocument(spec => window.SPEC = spec)，等待 window.READY（字型與圖片載入完成），然後 canvas.toDataURL('image/jpeg', .93) → 傳送至 ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p 的標準輸入。
  • 啟動 Chrome 時加上 --allow-file-access-from-files；否則本地圖片會污染 Canvas。
  • 在標準路徑或 CHROME_PATH 中尋找 Chrome 或 Edge。
  • 保留 --stills t1,t2,… 模式以供審查。
• 混流：-af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest。
• 音訊：一個 4 和弦進行，符合品牌調性（科技：128 BPM，含大鼓、貝斯與撥奏；手工藝：112 BPM，撥弦與木琴；優雅：96 BPM，鋼琴與弦樂）。
  • 各哏效果：拉鍊 = 加速的點擊爆發；機器 = 點擊聲串 + 嗡鳴；剪刀 = 兩聲響亮；光澤 = 高音琶音。
  • 共用效果：切換時的呼嘯聲、計數器的滴答聲、價格時的鐘聲。
  • 在大鼓下方進行輕微側鏈壓縮，使用 tanh 限制，然後正規化。
• 在 Windows 上，腳本呼叫 python；在 Linux 與 macOS 上，呼叫 python3。

5. 目錄數據：不虛構任何資訊（catalogo.js + config.json）

• 顯示名稱： 產品名稱，不含 marcas_a_quitar（需移除的品牌，若文案規則要求）以及 palabras_tipo（通用類型詞彙，如「Sneaker」或「Boot」）。若僅剩下代碼，則使用不含品牌的名稱。
• 事實： 描述中 titulo_datos 下方的項目符號，不含成分。若無項目符號，則從以「.」和「:」分隔的簡短描述中擷取短語。第三項事實為材質屬性的成分，保留如 EVA 的縮寫。
• 修剪： 將短語修剪至約 54 個字元。優先於逗號處修剪；否則在最後一個從屬子句之前修剪（如「with」、「for」、「that」、「and」）。永遠不要以介詞或冠詞結尾。
• 顏色： 名稱 → motor.html 中的十六進位色表。雙色顏色（如「Black/White」）使用分割色票。未知顏色以中性灰色顯示，並保留真實名稱。
• 手動編輯： 產品上的 "manual": true 可保護其在下次提取時不被覆寫。
• REVISAR.md（審查清單）：敏感語氣、無項目符號的頁面、無照片或屬性的產品。
• 在信任提取器之前， 將函式貼入商店瀏覽器控制台，測試其對真實目錄的轉換效果。若下載步驟無法測試，請如實告知。

6. 品質控制（交貨前強制執行）

1. 為每個場景渲染靜止幀，使用 PIL 建立接圖表（不要使用含多個輸入的 xstack：ffmpeg 可能會崩潰），然後仔細檢查。檢查以下項目：
   • 文字重疊或短語被截斷；
   • 大字標題上的重音符號與上方行衝突；
   • 元素侵入其他行；
   • 因過亮的光澤導致字母消失；
   • 屬性缺失時出現空的「—」區塊；
   • 垂直格式中下方半部為空。
2. 9:16 安全區域：約 250 像素以上（Reels UI）或最後約 320 像素（字幕）處不可放置重要內容。僅裝飾性元素可放置於該區域。
3. 數據：今日價格、有範圍時使用「from」、可能到期的特價、未確認的單位（標記之）、已驗證的 URL。
4. 法律與審查：
   • 包含 AI 生成或 AI 修改人物的照片 → 在影片中顯示明顯標籤（歐盟 AI 法案第 50 條；設定檔中的 ia.mostrar_si_foto）。發布時也應揭露。
   • 在身體上展示的產品：全身照片、目錄風格、無過度裁切、短暫的螢幕時間。
   • 絕對不要承諾不適用的退貨或保固。
5. 音訊：ffmpeg -af ebur128 → 約 −14 LUFS。使用 ffprobe 檢查長度與解析度。

7. 交貨

• 當在使用者機器上工作時，將所有內容寫入使用者專案的子資料夾中，並保留所編輯檔案的換行符號。不要觸碰既有的 CLAUDE.md 檔案或文件： 在子資料夾內建立自己的檔案。
• METODO.md：有哪些內容、如何執行、每個數據的來源、套用的品牌規則、如何新增產品或哏、發布前檢查清單以及已知限制。
• 子資料夾的 CLAUDE.md：以幾行文字說明狀態、待辦事項與不可協商的規則。
• 展示影片並總結：哏（每行一個）、所有檔案的位置、重新產生的指令，以及任何尚待確認的數據。

常見錯誤（請避免）

• 猜測產品 slug。請從 permalink 讀取。
• 旋轉文字的哏覆蓋到後續行：當文字旋轉時，重新定位這些行。
• 緞面光澤太白會吃掉字母。使用淺色品牌色調，而非純白色。
• 色票漸層的色彩停止點崩潰導致出現對角線條紋。改用獨立、裁剪過的光澤圖層。
• 在價格範圍的產品上使用刪除線價格：使用「from」加上特價標籤，不加刪除線。
• 產品頁面缺少單位（例如測量值沒有「cm」）：省略或標記為待確認。
• 抽象形狀組合起來暗示身體輪廓：以明確的圖形取代。