動畫影片廣告 是做什麼的？
將產品影片的每個鏡頭製作成一個小型 HTML 頁面，該頁面會對真實的產品素材（截圖、影片畫格、匯出資料、實際數字）進行動畫處理，將每個頁面錄製成乾淨的 MP4 檔案，並提供一份腳本文件，精確說明如何剪輯這些片段以及該說什麼。使用者可以自行在自己的編輯器（Camtasia、Premiere、CapCut 等）中拼接片段並錄製旁白。
為什麼這比直接螢幕錄製實際應用更好：每個鏡頭都為影片量身定制了構圖、節奏和縮放；不會有閃爍、載入或顯示私人資料的問題；文字在手機上足夠大；而且如果要做修改（例如「把那行字縮短」、「放慢縮放」），只需編輯 HTML 並重新錄製，無需重拍。但看起來仍然真實，因為像素和數字都來自產品本身。
工作流程
- 確定故事大綱（一條訊息，然後開始）。
- 收集真實素材，從產品中取得。
- 為每個鏡頭建立一個頁面，使用
assets/中的資源。 - 檢查頁面並使用截圖確認，修正問題，重複此步驟。
- 錄製片段，使用
scripts/record.cjs；透過聯絡表進行驗證。 - 撰寫腳本文件（
references/script-doc.md）。 - 音訊與粗剪： 音樂（ElevenLabs、自行生成或使用者自己的音樂；
references/music.md），可選的 ElevenLabs 語音旁白（references/voiceover.md）；使用scripts/roughcut.py預覽。 - 傳送片段、文件與預覽；根據回饋逐一修改鏡頭。
將所有內容放在使用者擁有的一個資料夾中，例如 video/ 或 video-scripts/：
<name>-anim/ 頁面（每個鏡頭一個 .html 檔案），base.css，logo，frames/ 子資料夾
<name>-clips/ 錄製的 MP4 檔案：01-hook-anim.mp4, 02-setup-anim.mp4 ... 加上 README.md
<name>-music/ 背景 WAV 檔案、粗剪預覽、cuts.json
<Name>.md 腳本文件
1. 故事
選擇影片長度（預設 30 秒；並提供從相同片段剪輯的 45–60 秒版本選擇）和行動呼籲 (CTA)。
根據廣告將要投放的位置選擇畫框形狀，並以該尺寸（而不是事後裁切 16:9，裁切會導致文字遺失，使用者必須重新調整每個鏡頭的構圖）建立頁面：
| 投放位置 | 尺寸 |
|---|---|
| Instagram Reels/Stories、TikTok、YouTube Shorts、Facebook Reels | 1080×1920 (9:16) |
| Instagram/Facebook 動態消息 | 1080×1350 (4:5) |
| LinkedIn 或 X 動態消息 | 1080×1080 (1:1) 或 1080×1350 |
| YouTube、網站、登陸頁面、簡報、未指定 | 1920×1080 (16:9) |
若有多個投放位置：為主要位置建立，並在文件中說明如何為其他位置重新構圖。對於直式影片，請將文字保持在頂部約 250 畫素和底部約 350 畫素之外，因為平台會在這些區域繪製其 UI。然後規劃 6–9 個鏡頭，每個鏡頭一個想法，按照以下結構：
- 鉤子 (Hook，約 3 秒)： 問題，用觀眾的語言表達。一個問題很有效（例如「發票 30 天後仍未付款？現在怎麼辦？」）。
- 設定 (Setup，約 4 秒)： 開始使用有多簡單。
- 核心功能 (Core features，2–3 個鏡頭，每個 4–5 秒)： 產品正在執行其工作，並在螢幕上顯示結果。
- 證明 (Proof，約 3 秒)： 一個真實的數字。大、簡單、真實。
- 適合你的工作流程 (Fits your workflow，約 3 秒)： 匯出、整合、分享。
- 結尾卡 (End card，約 3 秒)： 標誌、一句話承諾、CTA 按鈕、URL。
以正面陳述為主導。 展示產品擅長什麼以及它有多容易使用。不要圍繞產品的失敗案例或解決方法（即使是巧妙的解決方法）來建立鏡頭；一個解釋工具在出錯時如何應對的廣告，會讓人覺得「它經常出錯」。使用者快速而自信的修正（例如「錯誤的分類？點擊它，選擇正確的，完成」）是沒問題的；但一個關於邊緣案例機制的鏡頭則不是。
如果使用者尚未說明，請在一條簡短的訊息中說明你的大綱和假設，然後開始建立；修改一個已錄製的鏡頭比在紙上討論它更省成本。
在同一條訊息中，詢問關於音訊的意見（除非他們已經提出），並在他們決定期間繼續建立；音訊直到步驟 7 才需要。如果有問題工具，請使用它。首先檢查是否已連接 ElevenLabs MCP（工具如 creative_generate_speech、creative_list_voices、music 節點類型）；如果是，則以它為主。
音樂：
- ElevenLabs Music（連線時建議使用）：你可以在他們的 ElevenLabs 帳戶上生成一個與剪輯時間同步的器樂背景音。未連線時：你撰寫提示詞，他們在 elevenlabs.io/music 生成並將檔案寄回。
- 在此處生成： 使用
make_bed.py製作一個安靜、免授權的背景音樂，免費且即時。 - 使用他們自己的： 他們已有的或已授權的曲目。
語音旁白：
- ElevenLabs 語音（連線時）：你選擇一個聲音並生成朗讀，然後將每句台詞放置在其提示點。使用者之後仍然可以自己錄製。
- 自己錄製：根據文件中清晰的朗讀稿（沒有 ElevenLabs 時的預設選項）。
ElevenLabs 會從他們的帳戶中消耗點數：先進行價格估算 (estimate_only)，並在問題中告知成本。如果他們要求音樂但未指定類型，或者你在步驟 7 時仍未收到回覆，請生成免費的背景音樂，讓預覽有聲音，並在最終訊息中重複提問，同時附上已寫好的 ElevenLabs 提示詞。
2. 真實素材
在產品的儲存庫、資料資料夾、匯出檔案、資料庫、測試 fixture 和錄影中尋找。針對每個鏡頭，收集：
- 圖片： 真實 UI 的截圖，或從真實影片中提取的畫格（
ffmpeg -ss T -i in.mp4 -frames:v N frames/f%03d.jpg）。多個畫格可以製作動態效果。若要對 Web UI（本機 HTML 或 URL）進行截圖，請使用scripts/grab.cjs：可以擷取完整視圖以及 3 倍尺寸的指定元素，並會列印每個元素的區域以用於構圖：node <skill>/scripts/grab.cjs app.html <pages>/shots --size 1280x800 goal=.goal logo="header .logo"。 若需登入，請要求使用者提供截圖，而非親自登入。 - 數字： 來自產品輸出的實際數值（時間、計數、行數）。記錄每個數字的來源；這些資訊會放入文件中「數字的來源」一節。
- 位置： 要強調的元素的座標，以原始圖片的畫素為單位（盡可能來自應用程式自己的輸出，例如偵測框，或透過檢視圖片測量）。
資料缺口是正常的；請公開處理：
- 沒有標誌檔案： 從真實 UI 截圖中裁切（標頭、應用圖示），或根據產品自己的 CSS/SVG 精確重建。在文件中說明此事，並要求提供真實檔案。
- 所需畫面不存在（例如設定表單）：以產品自己的風格繪製它，並在文件中將該鏡頭標記為「模擬」，以便使用者之後可以替換為真實畫面。
切勿捏造統計數據。 如果某個時刻必須模擬（例如戲劇化的鉤子），請在文件中標記它。
尊重產品自身的術語和聲明規則（例如，一個產品可能永遠不能將其數字稱為「保證」或「官方」）——在撰寫文案之前，請查閱專案文件/記憶以了解此類規則。
3. 建立頁面
將 assets/base.css、assets/shot.js、assets/shot-template.html 和 assets/end-card.html 複製到頁面資料夾中。shot.js 包含每個頁面都會使用的輔助函式（show/hide、cursorTo、click、typeText、countUp、frameTo、preload）和自動播放功能；請在頁面自己的腳本之前載入它，並且不要將輔助函式複製到頁面中。每個頁面：
- 是一個固定大小的舞台：在
base.css中設定--w/--h（例如1080px/1920px）。 範本以 16:9 佈局，因此請為其他形狀重新排列位置（對於 9:16，垂直堆疊面板；對於直式影片，標題從約 250 畫素以下開始，而不是範本中的 96 畫素）。 字型大小 ≥ 26 畫素；標題 80–100 畫素。影片將在手機上觀看。 - 有一個頂層的
async function start()函式，包含整個時間線（在節拍之間使用await sleep(ms)）。shot.js會暴露它；若 URL 中包含#manual，它會等待；正常開啟時，它會在所有字型與圖片準備好後自動播放一次，這樣使用者可以透過雙擊來預覽。 - 預載入稍後會切換的每張圖片（在頂層使用
preload(frames)），這樣在錄影時就不會突然出現；錄製器與檢查器會等待它們。 - 以一個停留的、完整的狀態結束（顯示結果，所有文字都在畫面上），這樣編輯器可以在接近結尾的任何位置修剪，並保持最後一幀。
- 在一個
<svg viewBox="0 0 W H" preserveAspectRatio="xMidYMid slice">中繪製標記，其尺寸與原始圖片相同，這樣應用程式的座標可以直接使用而無需轉換，並且在舞台形狀裁切圖片時仍能保持對齊。 - 看起來像產品：將
base.css中的標記（--accent、--hi、--ok、--ink、字型）替換為產品自己的顏色和字型。對於淺色主題的產品，也要將文字顏色、.shade、.panel和.bg切換為淺色版本；深色廣告搭配淺色應用程式看起來像別人的產品。 - 在
.world內部以其原始畫素大小顯示 UI 截圖（設定.world { transform-origin:0 0 }並將<img>設定為其自然 CSS 大小），並使用frameTo(x, y, scale)對它們進行構圖，該函式會將截圖中的點 (x, y) 置於舞台中心；grab.cjs提供的框會給出這些點。不要使用object-fit:cover，因為當截圖形狀與舞台不匹配時，它會以不可預測的方式裁切截圖。 - 保持產品文字的可讀性：如果 UI 文字在舞台上最終小於約 22 畫素（例如截圖中未縮放的 14 畫素標籤），則在手機上無法閱讀。請放大該文字，或以產品自己的風格重建該部分（例如卡片、警告），並使用其確切文字以可讀的大小顯示，然後在文件中說明哪些部分被重建了。
有效的鏡頭模式：
| 模式 | 如何實現 |
|---|---|
| 產品運作中 | 每 33–40 毫秒切換 <img> 中的畫格序列，每個畫格繪製框/標籤，一條結果行在事件發生的瞬間彈入側面板。 |
| 縮放至細節 | 在細節上使用 .world 搭配 transform-origin，加入 .zoom（縮放 1.5–1.6，1.2 秒 easing）。 |
| 使用者執行一個步驟 | await cursorTo(button) 然後 await click(button)：游標滑向元素的測量中心，產生漣漪效果，按鈕按下，然後顯示結果。使用 typeText(el, text) 打字（每個字元 55 毫秒；保持任何輸入的字串在約 1 秒以內）。 |
| 逐步瀏覽畫格 | 按節奏按下上一個/下一個按鈕，顯示畫格編號，標記關鍵畫格。 |
| 兩個視圖一致 | 並排顯示兩張圖片，在兩者中標記同一時刻，並顯示一個徽章表明一致性。 |
| 證明 | 表格行滑入（間隔 120 毫秒），然後是 2–3 張統計卡片；使用 countUp(el, n) 將主要數字計數到目標值（約 700 毫秒）。 |
| 資料匯出 | 結果列表和一個檔案/整合面板在同一節拍中填入，並帶有「即時」指示器。 |
| 結尾卡 | 線條掃過、標誌、標語、CTA 按鈕彈出、URL。 |
將游標指向元素，而不是手動輸入的座標：cursorTo(el) 會在游標移動時測量元素的位置，因此縮放、重新佈局或其他舞台形狀不會導致它點擊空曠區域。click(el) 會在游標尖端不在 el 上時記錄錯誤，而 check.cjs 會因此失敗。僅在針對非元素的點時使用 cursorTo({x, y})。在每次點擊的瞬間拍攝檢查截圖：如果點擊位置錯誤，觀看者會立刻注意到。
使用 shot.js 中的 show(el) / hide(el) 來顯示和隱藏元素。.on 使用 !important，因此任何與它一同添加的其他類別（用於隱藏或移動元素）都會被靜默忽略；請務必先移除 .on（這正是 hide 所做的）。若要自定義退出效果，請使用 el.classList.replace('on', 'my-exit')。
保持時間線明快：節拍之間 0.3–0.7 秒，閱讀標題約 1 秒。每個片段通常為 4–8 秒；逐步瀏覽的鏡頭可以執行 15 秒，因為編輯器會修剪並調整速度。
裁剪掉來源中不應顯示的內容（例如相機日期/時間、狀態列、私人姓名），方法是從相對邊緣稍微縮放 .world（例如從底部縮放 scale(1.08)）。不要依賴 backdrop-filter 來隱藏東西：它在螢幕錄影中不會渲染。
4. 錄製前檢查
node <skill>/scripts/check.cjs <pages-dir> <chk-dir> hook:400:1500:3200 live:800:3000:6000
這會在 start() 之後的那些毫秒時間點拍攝截圖（它故意不 await start()；等待只會顯示結束狀態）並列印頁面錯誤。閱讀這些截圖。特別檢查：
- 標記位於正確的物件上（框在正確的人身上，線在領先邊緣，而不是後腳或旁觀者；偵測器軌跡可能在序列中途切換到其他人，因此請拼接或手動修正框）；
- 沒有任何東西被邊緣裁剪掉，文字沒有與主體重疊；
- 螢幕上的每個數字都與來源匹配。
5. 錄製
node <skill>/scripts/record.cjs <pages-dir> <clips-dir> hook=01-hook-anim=4200,setup=02-setup-anim=5000
page=outName=ms：錄製 ms 毫秒（動畫長度 + 約 1 秒的停留結尾）。每個片段以其頁面的尺寸（--w×--h）、30 fps、H.264 CRF 16、無聲輸出。check.cjs 和 roughcut.py 使用相同尺寸，因此直式或方形無需修改腳本。需要 Chrome（或 Playwright 的 Chromium）和 Playwright（如果 pw.cjs 找不到，則執行 npm i -g playwright 一次），以及 ffmpeg。
片段會錄製請求的毫秒數加上約 0.3 秒。第一幀是 start() 第一個節拍之前的頁面，因此入點通常從 0.1–0.3 秒開始；請從聯絡表中讀取它們。
無需觀看即可驗證每個片段：
bash <skill>/scripts/sheet.sh <clips-dir>/03-live-anim.mp4 sheet.jpg 2
閱讀聯絡表：每個節拍的時機、沒有壓縮或裁剪、最後一幀完整。記下每個片段有用部分的入/出秒數；它們將用於剪輯表中。
按故事順序命名片段 NN-name-anim.mp4（例如 04b、04c 表示備選片段），並在片段資料夾中撰寫一個簡短的 README.md 檔案，列出它們。
6. 腳本文件
遵循 references/script-doc.md。剪輯表（時間、片段、入點–出點、速度、看到的內容、旁白開始、台詞）是其核心；其餘部分是用戶在沒有你的情況下完成工作所需的一切。
語音旁白：每秒約 2.5 個詞，對話式，每個鏡頭一句台詞，CTA 要大聲說出來（「免費試用。點擊連結，或訪問 example.com。」）。
大多數社交影片是在靜音狀態下觀看的，包括 Reels 和 TikTok。務必為剪輯表提供一個「螢幕文字」欄位，並讓螢幕上的文字自行講述故事。如果有旁白（Reels、TikTok、Shorts），請在編輯步驟中加上燒錄的字幕，將其放置在直式安全區域，並放在其標題已包含的鏡頭上
...（此處內容因翻譯要求被截斷）