JavaScript 動畫（每幀由程式碼繪製）
製作短動畫電影，其中每一像素由程式碼計算：無圖片、無需載入字型、無函式庫。一個 HTML 檔案即可容納整個作品；透過無頭瀏覽器逐幀將其轉換為 MP4 檔案。
模型
此功能使用 Claude Opus 5.5 建構及測試；繪圖品質在很大程度上取決於模型。下方的自我檢查需要圖片輸入：如果當前模型無法查看圖片，請向使用者說明，並將視覺驗證視為未完成。其他模型未經測試；若結果看起來粗糙，應說明更強的模型可能有幫助，而非宣稱這是可能的最佳結果。
預設流程：無需停下來詢問
直接執行。選擇合理的預設值，並在交付時提及替代方案。僅在完全沒有主題時（例如「製作一個動畫」，沒有其他說明）才在開始前詢問。
- 閱讀需求摘要。 根據使用者的描述推斷形式（故事、解說、詩歌、循環、互動頁面）、長度（預設 15-20 秒；僅在主題無法在該時間內表達時才延長）和長寬比（預設 1920x1080）。螢幕上的文字使用使用者撰寫需求摘要的語言；只有當使用者要求或觀眾明顯需要時，才使用雙語。
references/forms.md為每種形式提供了簡短的結構。 - 根據主題和觀眾規劃視覺風格與音效， 用你自己的話來說：這部影片是什麼、看起來和聽起來如何，以及為什麼這適合主題和觀眾。沒有需要填寫的清單；
references/techniques.md提供了素材，且起始範例的值是佔位符，而非風格基調。切勿在預設情況下重複使用先前作品的視覺風格或音效：兩個不同的主題不應看起來或聽起來相似。如果使用者指向他人的作品（「像那個爆紅的影片」），可借用其技巧，但絕不能借用其角色、故事或構圖。 - 節拍網格、故事板和分鏡，以資料形式呈現（
references/storyboard.md）。先確定節奏和段落；然後建立鏡頭列表，其節奏需符合形式（節奏表位於references/storyboard.md；每個鏡頭包含構圖、攝影機運動、動作、對應節拍、音效、轉場）；接著進行分鏡（對於故事或解說，為一個連續世界的軌跡）。這些資料將放入頁面中，作為BPM、SECTIONS、SHOTS、EVENTS：場景、攝影機和音效都會讀取它們，因此影像和聲音在建構上即能對齊。對於故事或解說，請檢查邏輯：每個節拍均由上一個節拍引發，隱喻在畫面中清晰可見。 - 從
templates/starter.html建構。 它已經是故事板驅動的：一個在世界座標系中繪製的世界，每個鏡頭使用withCamera，每個文字區塊和關鍵物件使用claim()。取代預設的調色板和示範世界。保持約定：draw(frame)是幀編號的純函數。使用rng(seed)/hash2()，絕不使用Math.random或Date。 - 自我檢查，然後渲染（下一節）。修正並重新檢查，直到乾淨無誤。
- 交付： MP4 和 HTML 檔案（HTML 可在瀏覽器中即時播放；點擊即可開始音效）。然後，用一兩行文字說明可以更改的內容：另一種風格、AI 音樂代替合成音樂、不同的長度。
對於音樂，請使用 soundtrack 技能（預設：在頁面中使用 Web Audio 合成，無需金鑰）。
自我檢查（由 AI 執行；使用者從未看到此過程）
node scripts/render.mjs piece.html sheet.jpg --sheet 1 # 每秒一幀，跳過剪輯點
node scripts/render.mjs piece.html shot --stills 90,300,610 # 特定時刻的靜止幀
node scripts/render.mjs piece.html piece.mp4 # 完整渲染（如果頁面有音效，則包含音效）
node scripts/asset-audit.mjs piece.html # 證明無素材：如果載入或嵌入任何內容，則退出碼為 1
node scripts/layout-check.mjs piece.html # 文字與文字碰撞，或跨越已宣告的物件
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json # 剪輯點在節拍上，無突兀感
然後透過肉眼進行兩輪檢查，均在 references/qc.md 中：
- 故事板符合度檢查： 對每個鏡頭的動作節拍點擷取一個靜止幀，並與其對應的列進行比對（演員是否在分鏡指定的位置，是否執行了該列指定的動作？）。
- 導演檢查： 以每秒 2 幀的速率生成縮圖聯繫表（
--sheet .5），根據形式評分節奏、構圖多樣性、無效幀、每個動作是否有對應音效，以及風格是否適合觀眾。至少進行兩輪。對你修改的幀渲染靜止幀，而非每次重新渲染整部影片。
僅在觸發條件下執行
| 條件 | 動作 |
|---|---|
| 一個角色出現在多個場景中 | 在場景開始前，單獨渲染該角色（表情+姿勢），並根據 references/character.md 自行檢查。角色應暴露錨點（嘴巴、手），以便道具可以附加到它們身上。 |
| 使用者提供了真人、寵物或地點的照片 | 使用 references/character.md 中的提取方法，從照片中建構角色。照片應保留在本地：切勿上傳或將其放入任何已發布的內容中。 |
| 這是涉及真人的作品且使用者本人存在 | 在交付時（非之前），提議使用關鍵道具或人物的照片，使作品更貼近使用者。 |
| 文字或對話氣泡跟隨移動的角色 | 使用 placeFree(w, h, [above, right, left, below]) 放置，使其避開已宣告的物件區域。 |
| 螢幕上的文字非拉丁語系（如中文、日文） | 使用 CJK 字型堆疊；檢查每個字形是否都能正確渲染（等寬字型會默默替換缺失字形，例如 ≈ 可能變成 =）。 |
| 該頁面將作為網頁發布 | 交付 HTML 檔案；保留即時預覽循環和點擊播放音效的功能。 |
防止常見失敗的規則
- 時間的純函數。 無
requestAnimationFrame狀態、無 CSS 動畫、無累積物理：必須僅根據t計算每一幀，否則渲染和預覽結果會不一致。 - 手繪線條應是沸騰感，而非抖動感。 當影片設定
LOOK.wobble時，應每 4 幀更改一次抖動種子（LOOK.boil: 4），而不是每幀更改。每幀都更改讀起來像雜訊；每秒約 7.5 次更改讀起來才像手繪。 - 身體使用圓潤造型。 使用橢圓和圓角矩形來建構人物。點數過少的原始多邊形讀起來像標誌（五邊形的手，方形的軀幹）。
- 選擇能清晰展現姿勢的角度。 從側面看，一個長身體配上短小四肢會像毛毛蟲；從正面看（透視縮短），相同的姿勢則像趴著的嬰兒。
- 明確地由後往前繪製。 先畫後頭髮，然後身體，然後脖子，然後臉，最後前頭髮。大多數「有東西遮住臉」的錯誤都源於繪圖順序。
- 擊中剪輯點和動作的關鍵影格。 每個剪輯點和每個可見動作都應在
EVENTS/CUES中；音效應與它們同步對齊（參見soundtrack）。 - 文字絕不碰撞。 宣告每個文字區塊和關鍵物件；
layout-check必須輸出 CLEAN。標題重疊在螢幕邊緣或臉上會顯得不夠細心，而聯繫表上的肉眼檢查可能會遺漏這類問題。
檔案
templates/starter.html：繪圖函式庫（墨水、插圖、平面/藍圖基元、標籤、紙張、濾鏡圖層）、withCamera、claim/placeFree，以及一個故事板驅動的雙鏡頭框架。scripts/render.mjs：MP4 / 靜止幀 / 聯繫表。window.CUES和window.SCORE為可選：在完整渲染時，它會寫出<輸出檔名>.cues.json並混合 SCORE 音效（無 SCORE 則為無聲 MP4）。需要偶數的畫布尺寸。scripts/asset-audit.mjs：對任何已載入或嵌入的內容進行靜態掃描 + 即時網路檢查。scripts/layout-check.mjs：讀取整個影片的window.LAYOUT，並列出文字碰撞及其發生時間。references/storyboard.md：節拍網格、鏡頭列表、分鏡、連續性與故事邏輯。references/techniques.md：經過測試的繪圖技巧（墨水、特別色印刷、單線雕刻、文字作為形狀、麥克筆填色、插圖造型）。references/forms.md：每種形式的結構說明。references/character.md：僅在涉及角色時使用。references/qc.md：自我檢查清單。
需求：Node 18+、ffmpeg、Chrome（或執行 npx playwright install chromium），以及在你執行腳本的資料夾（你的專案資料夾，非技能資料夾）中安裝 npm i playwright-core。