Changroro/code-video

Code Video

<skill> 是包含此 SKILL.md 的資料夾。引擎位於 <skill>/template/：

• kit.js：手繪線條、文字與動態排版、鏡頭、轉場、像素精靈、迷你角色、影像像素化、影片片段、手機與游標道具、運動模糊、useFonts
• 風格模組，用於受讚助的視覺與格式：handdrawn.js、motion.js、sand.js、lyric.js、beat.js（每個模組繪製原始作品的簽名元素）
• 視覺模組 arcade.js、terminal.js、thermal.js、transit.js、blueprint.js：共用的場景 API 加上每個視覺的簽名格式場景 (references/looks.md)
• minis-ai.js：為 AI 相關主題（Claude、Codex、Gemini、DeepSeek、Grok、Qwen）準備的現成迷你角色
• render.mjs：使用無頭 Chrome 進行平行渲染；若存在 audio.wav 則混合音訊
• main.js：場景骨架

<skill>/scripts/audio.py 合成音樂與音效，<skill>/scripts/beats.py 找出歌曲的節奏網格，<skill>/scripts/reference_sheet.py 將原始讚助作品的影格置於你的影格之上。

所需工具：node/npm、內建 libx264 的 ffmpeg、Google Chrome 以及 uv。若缺少任一項，請停止並指出缺少的項目。

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. 詢問視覺與格式，然後詢問設定

視覺僅是繪畫風格；格式則是故事的結構。任何視覺皆可搭配任何格式，但歌詞與節奏格式自帶其視覺，除非使用者要求其他視覺。首先在同一則簡短訊息中提出兩項，並附上兩個編號清單（選項比單一問題能容納的更多）。跳過使用者已指定的部分，並根據主題建議一種格式（比較建議對決格式，列表建議路線圖格式，依此類推）。

視覺：

視覺	感受	預設音效	指南	出處
1. 手繪 + 8位元迷你角色（預設）	俏皮、草稿感	無	styles/handdrawn.md	@nahiddotai
2. 品牌動態圖形	乾淨、正式	無	styles/motion.md	@digitalstrategyai
3. 沙畫	溫暖、故事性	音樂與音效	styles/sand.md	@Michaelzsguo
4. 16位元街機	遊戲、充滿活力	晶片音樂風格音樂與打擊音效	looks.md	原創
5. CRT終端機	開發者、復古	按鍵聲、柔和墊音	looks.md	原創
6. 熱感應收據	印刷感、觸覺	印表機滴答聲、印章聲	looks.md	原創
7. 地鐵圖	圖表、井然有序	鐘聲、列車聲	looks.md	原創
8. 藍圖	技術、精確	繪圖聲響	looks.md	原創

格式（詳情見 references/formats.md）：

格式	結構	出處
1. 標準宣傳（預設）	鉤子 → 標題 → 步驟 → 大數字 → 結尾	原創
2. 對決	兩個選項之間的回合，然後計數	原創
3. 操作會話	展示如何使用指令與輸出	原創
4. 收據	逐項清單、總計、印章	原創
5. 路線圖	路線、車站、轉乘點	原創
6. 規格表	零件，每個零件一項規格	原創
7. 歌詞音樂影片（自帶視覺）	一首原創歌曲，每行歌詞一個事實與一個圖表	@goodside
8. 節奏同步剪輯（自帶視覺）	真實片段根據歌曲節奏剪輯：牆面、旋轉木馬、手機	@twoclipping

當你列出視覺與格式時，請為每個有出處的項目標註其原始來源並附上連結。

然後在一次 AskUserQuestion 呼叫中詢問設定。跳過使用者已說過的內容，並將建議的選項放在首位。

• 長度：30 秒 / 15 秒 / 45 秒 / 60 秒
• 畫面比例：16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• 角色：標誌吉祥物 + 主題迷你角色 / 使用者指定的迷你角色 / 僅標誌吉祥物 / 無
• 畫面語言：本次對話的語言 / 英文 / 兩者

角色採用所選視覺的形式：8位元精靈、沙畫剪影、像素英雄或平面圖示。迷你角色是支援主題的配角。若使用者指定角色陣容，則使用之。否則從研究中挑選一組角色，並在計劃中提出（請參閱 references/storyboard.md 中的「迷你角色」）。

對於你未詢問的事項，使用以下預設值，並在計劃中說明：

• 30 fps（節奏格式使用運動模糊時為 60 fps），H.264 MP4，每 30 秒最多 10 MB（有音訊時略多）
• 音效如視覺所列；歌詞與節奏格式始終有音樂。無歌唱人聲。

每個視覺與格式的規則

• 有出處的視覺需重現原始作品。 在計劃前，開啟指南並使用閱讀工具檢視其參考影格 <skill>/docs/styles/<key>.jpg。指南中簽名表格內的每一項都必須出現在畫面上；該表格是要求，而非選項菜單。額外元素應在簽名元素之後加入，絕不能取代之。
• 語言：所有畫面上的文字（包括標籤、HUD、歌詞、收據、終端機輸出及結尾卡）均遵循畫面語言設定。
• 主題來研究：色板來自品牌的真實色彩（CI 頁面、網站 CSS 或標誌像素），字體盡可能來自品牌。在計劃中以十六進制值顯示色板並標註來源。具有固定材質或背景的視覺（沙、暗色運動場、終端機綠色、熱感紙、藍圖藍色）保持其特色，並透過標誌、一個強調色與結尾卡來呈現品牌。
• 數字：每個數字都須有來源。從創立日期計算年數與「N 年」，而非抄襲網站上舊的「N 年」說法。不要虛構 UI 讀數或範例統計數據；使用真實數值，否則省略。
• 出處：有出處的視覺與格式須標註其創意來源的創作者。當你修改指南時，保留這些出處。
• 等待你自己的成果。 在前景執行渲染，並設定較長的 Bash 逾時時間（最多 600000 毫秒）。當你在背景啟動代理或指令時，在結束回合前等待其結果：在非互動式執行中，沒有任何東西會再次喚醒你。

1. 研究

遵循 references/research.md。

• 保持比例適當：對於少於一分鐘的影片，約 10 個有來源的事實與品牌資產即足夠。為唯讀代理指定一個狹窄的簡報（問題、網站、約 15 次擷取的上限），並平行執行獨立搜尋。
• 親自對照原始語句檢查標題數字。
• 若來源對某個數字有歧異，請詢問使用者該使用哪一個。

2. 計劃審核

在建立工作資料夾前，展示以下內容並取得批准：

• 研究摘要與來源連結
• 視覺與格式，以及根據其指南中的模式與時間安排所制定的場景時間線
• 對於有出處的視覺或格式：其簽名表格以及展示每個項目的場景
• 色板（十六進制值及各個來源）與字體
• 當視覺或格式有音效時的音效計劃：節奏、段落與提示
• 使用的數字與捨棄的數字、資產清單（標誌 URL、字體、角色、片段、歌曲授權）、工作資料夾路徑

若使用者更改場景或重點，請重新陳述修改後的流程一次，然後繼續。

3. 建置

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # 已安裝的技能可能是唯讀，cp 會保留其權限
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<official logo URL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html：在 window.VIDEO 中設定尺寸、fps 與長度；使用 @font-face 宣告指南中指定的字體（且僅限這些字體）；為有出處的視覺或格式載入風格模組（handdrawn.js、motion.js、sand.js、lyric.js、beat.js），或為視覺 4–8 載入一個視覺模組（其字體透過 useFonts(LOOK.fonts) 載入）。
• 使用視覺模組時，從場景 API 與格式的簽名場景建置場景（references/looks.md）；在 LOOK.colors 上設定品牌色彩。
• main.js：THEME、場景函式與 boot()。API 位於 references/kit-api.md。
• 使用真實的標誌與字標檔案。
• 將標誌吉祥物繪製為 drawPixels 精靈（或在沙畫視覺中繪製為剪影）。
• 在 MINIS 中註冊迷你角色，並使用 drawMini 繪製。對於 AI 相關主題，載入 minis-ai.js 並僅繪製缺少的角色。
• 在早期向使用者展示角色陣列的靜態畫面並取得確認。
• 將文案與數字作為常數放在 main.js 頂部。對於兩個版本（待定數字、兩種語言），透過一個 URL 參數進行分支，並使用 QUERY=lang=ko node render.mjs video … 分別渲染。
• 音效：撰寫 audio.json，其場景時間與 main.js 一致，然後執行 uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav。對於節奏格式，先對歌曲執行 beats.py，然後根據其網格進行剪輯。

4. 品質驗證

遵循 references/qa-checklist.md。

1. 使用 node render.mjs stills <mid-scene times and times just before and after each transition> 渲染靜態畫面。
2. 使用 uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temp-folder> 建立檢閱表並查看。
3. 修正發現的問題。
4. 使用 CRF=25 node render.mjs video <Name>.mp4 渲染影片一次，提取轉場影格及每 2 秒一個影格，並檢查檔案大小。若有音效，檢查音訊流、響度與提示時間。
5. 對於有出處的視覺或格式，建立 uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Name>.mp4 <temp-folder>/ref.jpg，查看並勾選每個簽名項目。修正任何遺漏並重新渲染。

5. 交付

• QA 渲染即為交付檔案。僅在修正後重新渲染；若超出尺寸目標，將 CRF 提高至 27 或降低 boot({ noise })。
• 刪除中間檔案，例如 stills/ 與日誌。
• 使用 SendUserFile 傳送 MP4（顯示 render）並報告：
  • 規格：視覺、格式、長度、解析度、fps、檔案大小、音效
  • 有出處的視覺或格式的原始來源，附上連結，以及簽名檢查表結果
  • 場景清單
  • 使用的事實，附上來源連結
  • 捨棄的數字及其原因，以及需要確認的項目
  • 重新渲染指令，並註明必須在工作資料夾內執行