HTML → 影片：多個方案、選出最佳、最終合成
Claude 最擅長 HTML/CSS 設計。因此我們製作影片的方式是：撰寫 HTML 動畫，將其渲染成影片，用眼睛觀看結果（逐幀分析），比較不同方案並進行改良。
需求
node+playwright（含 Chromium）、ffmpeg。檢查方式：bash scripts/check-env.sh。
快速開始
cp references/template-scenes.html work/<名稱>/v1.html # 使用場景引擎的模板
node scripts/render.mjs work/<名稱>/v1.html --preset vertical-preview --duration 20 --out work/<名稱>/v1.mp4
references/engine.js— 場景引擎：背景、字幕（可透過*詞語*高亮）、進度條、轉場、緩動效果（E.pop、E.type、E.set）。references/parts.js— 細節元件：吉祥物P.bot、圖示P.icon、macOS 視窗P.win、聊天氣泡。references/design-notes.md— 讓影片「活起來」的關鍵（劇情、鉤子、節奏、字幕）。在撰寫方案前請先閱讀。- 範例影片：
examples/（claude-ad— 16:9；chatgpt-ad— 9:16，25 秒；duolingo-ad— 9:16，40 秒，60 fps，含劇情與示範；claude-self-ad— 9:16，39 秒，60 fps，Claude 自我宣傳影片，帶有 meta twist）。 - 檔案大小：40 秒 / 60 fps 的影片約 10 MB；若需更小容量，可使用
--fps 30或透過ffmpeg -i in.mp4 -crf 24 out.mp4重新編碼。
主要品質原則
-
展示，而非講述。 影片中的任何主張都應有相對應的畫面場景來證明，而非僅是文字敘述。
主張 應展示的畫面 「撰寫程式碼」 輸入查詢，然後逐行顯示程式碼 「清楚說明」 真實錯誤（ she drink），高亮顯示並解釋「+s」規則，搭配貓頭鷹的說明「邊做邊學」 手指點擊單字，句子逐漸組成，綠色面板顯示「正確！」 「連續 346 天」 計數器從 1 跳到 346 加上火焰效果，日曆如波浪般填滿，通知訊息，彩色紙屑祝賀 「遊戲」 排行榜中，英雄的排名上升至第一名，並獲得 +XP -
描述正在發生的事。 每個場景有兩層文字：上方的小標題標籤（
<div class="kick">：「課程」、「排行榜」）和下方帶有高亮關鍵字詞的字幕（cap: '清楚*解析*錯誤'）。完整的句子勝過單詞口號。 -
流暢性。 最終渲染使用 60 fps。所有元素持續流動：彈性出現（
E.spring、E.pop）、緩慢鏡頭推進（cam: [1, 1.05]）、吉祥物搖晃、眨眼（P.blink）、手指觸碰產生漣漪（P.touch）、計數器（E.count）、圓形/擦拭/向左（circle/wipe/left）等轉場效果。避免靜止畫面超過約 0.5 秒。 -
劇情結構： 鉤子（痛點/幽默）→ 示範 → 「最佳特色」→ 高潮（獎勵/成果）→ 行動呼籲。廣告長度建議 30–45 秒。
-
三個方案代表三種不同想法，而非三種配色方案（例如：「連續紀錄計數器」、「實時課程」、「與吉祥物對話」）。最終合成時，從所有方案中選出最佳場景。
流程
1. 簡報
確認（或選擇合理的預設值）：主題/文案、目標受眾、長度（廣告 20–30 秒，故事至多 60 秒）、格式（預設為縱向 1080×1920，適用於 Reels/Shorts/TikTok；1920×1080 和 1080×1080 依需求提供）、fps（30）、風格、顏色/字型。建立簡短分鏡：鉤子 → 問題 → 解決方案 → 示範 → 行動呼籲。品牌廣告請勿使用官方標誌——自行繪製吉祥物。
2. 三個（或更多）不同的方案
建立工作目錄 work/<名稱>/，並在其中建立 v1.html、v2.html、v3.html（可更多）。方案之間應在概念上有所不同，而非細微差異。例如：(a) 吉祥物故事、(b) 卡片式產品展示、(c) 快速剪接搭配大字型。不同的構圖、色調、節奏。每個檔案應為自包含的 HTML（無外部載入，字型為系統內建或內嵌）。動畫規則請參考 references/animation-contract.md；起始模板為 references/template.html。
3. 每個方案的渲染
方案使用預覽解析度（快速），最終使用完整解析度：
node scripts/render.mjs work/<名稱>/v1.html --out work/<名稱>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<名稱>/final.html --out work/<名稱>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]
渲染是確定性的且可平行處理（依核心數）：時間軸手動設定至每個影格，無跳格或遺漏。
--from 5 --to 9 僅渲染片段。單一影格（無影片）：node scripts/frame.mjs v1.html 3.5,7 work/<名稱>/frames --width 540 --height 960。
4. 分析——務必觀看
bash scripts/contact-sheet.sh work/<名稱>/v1.mp4 work/<名稱>/v1-sheet.png 12
開啟 *-sheet.png 並透過 Read 工具（圖片可視覺閱讀）檢視個別影格。依據 references/rubric.md 評分（8 項標準，每項 1–5 分）：可讀性、層次、節奏、流暢度、平衡、完整性、符合簡報。記錄每個方案的各項分數、最佳表現及最弱環節。僅依據影格所見評分，而非程式碼本身。若有不清楚之處，可製作更密集的影格或在特定時間點製作：bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>。
5. 選擇領先方案與綜合
- 根據總分選擇最佳方案。
- 列出「可借鑒」的部分：來自其他方案的具體優點（例如：「v2 的字體排版」、「v3 的出現動畫」、「v1 的配色」。
- 以領先方案為基礎建立
final.html，並套用上述改進。修正領先方案的弱點。
6. 迭代與最終檢查
渲染 final.mp4，再次製作 contact sheet，與領先方案比較。若最終結果未優於領先方案——修正並重複（最多 3 次迭代）。然後向使用者展示結果：final.mp4 的路徑、各方案評分簡表以及各項借鑒的來源。
7. 音效（可選）
ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4
規則
- 請勿複製品牌吉祥物與商標：自行繪製角色，品牌名稱僅以文字呈現。
- 不得跳過步驟 4：決策應基於所見影格，而非推測。
- 所有產出檔案放置於
work/目錄（已加入.gitignore），僅提交技能檔案與範例至儲存庫。 - 若 Chromium/ffmpeg 不可用，請直接說明，切勿模擬結果。