從腳本製作動態圖形影片
從腳本製作動態圖形影片（動畫文字、圖表、螢幕截圖、即時網頁錄製、圖示、地圖）
從 HTML 渲染。品牌、語調、色彩、鈴聲和音樂等專案設定儲存在專案設定檔 VIDEO.md 中，而非此處。
腳本和範本：儲存庫 C:\Mydrive\Claude Projects\motion-video\ (scripts/, templates/)。
語言： 與 Petr 用捷克語交談。我們建立的所有檔案（程式碼、註解、文件、設定檔、README）必須使用英文（簡單英文、短句）。
影片中出現的文字（字幕、標題）使用設定檔中的影片語言，通常是捷克語。分鏡表和播放器 UI 可以透過 storyboard.json 中的 labels 進行本地化。
0. 專案設定檔
- 首先找到並讀取專案設定檔：專案資料夾中的
VIDEO.md或brand/video-profil.md， 或 claude.ai 專案中的文字副本 (claude/video-profil.md)。 - 設定檔會覆蓋此技能的預設值（色彩、字型、標誌、鈴聲、音樂、語調、受眾、 措辭、主題標籤、安全區域、範例位置）。
- 沒有設定檔：詢問品牌和受眾，並從
templates/VIDEO.md建立一個。
1. 設定（單一事實來源）
腳本頂部的一個固定區塊。場景時間由此衍生。
| 項目 | 範例 |
|---|---|
| 主題 | MultiModel in Meteoblue |
| 預設 | reel / video / feed 4:5 / square |
| 格式與設計解析度 | 9:16 1080×1920 / 16:9 1920×1080 / 4:5 1080×1350 / 1:1 1080×1080 |
| 最終渲染 | 1080p，或 4K (--scale 2 for 16:9) |
| 長度 | 60–75 秒 / 8 分鐘 / … |
| 影片語言 | cs |
| 旁白 | 無 / 自行錄製（逐字同步） |
| 字幕 | 內嵌 / 逐字 / SRT |
| 鈴聲、音樂 | 來自設定檔（檔案 + 授權） |
| 音效 | 是 / 否 |
| 即時網頁錄製 | 否 / 是（哪些網站和步驟） |
格式預設
| 預設 | 格式 | 長度 | 內容適應 |
|---|---|---|---|
| reel / short | 9:16, 1080×1920 | 最多 3 分鐘（Reels, Shorts）；檢查 FB Reels（通常規定 90 秒） | 一個想法，大字幕內嵌在畫面上，內容在安全區域內（頂部和底部為應用程式 UI），節奏快 |
| video | 16:9, 設計 1920×1080, 渲染最高 4K | 不限 | 章節（腳本和分鏡表按章節劃分，YouTube 描述中的時間戳記：第一個 0:00，至少 3 個章節），可能包含旁白，更多細節空間，節奏較平緩 |
| feed 4:5 | 4:5, 1080×1350 | ~1–2 分鐘 | Instagram（和 LinkedIn）動態貼文，比正方形高 |
| square | 1:1, 1080×1080 | ~1 分鐘 | 動態貼文 (FB, IG)，字幕置中 |
「Reel」只是一個預設：當 Petr 說「reel」時，適用 reel 的長度、格式和節奏。
2. 工作流程：腳本 → 分鏡表 → 核准 → 渲染
輸出始終是 腳本 + 分鏡表 的組合，每次更改後保持同步。
僅在明確要求時才進行最終渲染（vygeneruj video）。在那之前，只會有腳本、分鏡表和低解析度預覽。
- 在聊天中建立大綱：一個簡短的編號列表，列出各個章節（影片的章節）。保持簡短。
- 逐節開發： 時間、標題、字幕（完全按照螢幕上顯示的）、圖片、學到什麼、 動作與轉場、音效。對於措辭問題，提供 3–4 個簡短選項並推薦一個。 僅修改使用者的措辭以符合文法，並說明更改了什麼。
- 腳本 存放在
<project>/<output>/scenar.md，並在 claude.ai 專案中保留相同副本。 標頭 = 設定 + 上次渲染 + 分鏡表連結 + 狀態。 - 分鏡表 = HTML 成品（一個連結，總是重新發佈到同一個成品）：
project/video.html包含場景和seek(t)（請參閱技術章節），甚至在渲染之前就需要。project/storyboard.json：包含name、time、learn、motion、sound、items、changed等章節（僅對自上一版本以來的更改顯示 CHANGED 徽章），在最繁忙的時刻有 1–6 個幀[time, caption]， 可選的labels和lang用於 UI 語言。scripts/storyboard.py project/video.html project/storyboard.json sb/。scripts/player.py project/video.html sb/ --chapters project/storyboard.json [--audio mix.mp3]：一個可播放的預覽 位於分鏡表頂部，帶有章節時間軸（類似 YouTube）和評論：點擊評論按鈕 → 點擊一個元素 → 複製帶有時間、章節和元素的備註到聊天。音訊必須是 MP3（成品不提供 .m4a 格式）。scripts/check.py project/video.html（請參閱檢查）；修正或報告發現。- 使用
publish_files（模式replace）發佈，包括螢幕截圖、片段和 MP3；將連結放入腳本中。 - 以「Storyboard je aktualizovaný. Napiš ‚vygeneruj video‛, nebo co změnit.」（捷克語：分鏡表已更新。請說「生成影片」或告知要更改什麼。）結尾。
- 每次評論後： 更新
video.html→storyboard.json→ 分鏡表 + 播放器 → 重新發佈 → 在兩個副本中更新腳本。簡短回覆更改了什麼。 - 僅在要求時以設定的解析度進行渲染。更改一個場景 = 僅重新渲染該場景。
輸出名稱不含變音符號，帶有版本號（例如
reel1_multimodel_v5.mp4）；在腳本中記錄它。 - 影片獲得核准後，詢問是否要生成發布文字和縮圖（請參閱發布章節）。
3. 內容與節奏
- 一個輸出 = 一個主要想法；長影片中每個章節一個想法。
- 密度：每分鐘約 4–6 個學習點和 12–18 個視覺變化；無音段落不超過約 3 秒， 但要有足夠時間閱讀字幕（約每秒 2–3 個字）。
- 展示，而非列出：圖表、比較、因果關係、網站上的實際步驟。
- 在即時網站上驗證關於網站、應用程式和功能的說法，而非憑記憶。不要編造統計數據。
- 用於說明的數據：在腳本中註明；是否在螢幕上標註由設定檔決定 （短格式：視覺噪音越少越好）。
- 轉場：預設為交叉淡入淡出；在可能的情況下，連接場景（圖表轉變為下一個場景，卡片展開成一個場景）。
- 真實品牌和標誌僅能真實且不變形地使用；切勿將第三方標誌放在說明性數據上。
4. 檢查
scripts/check.py project/video.html [--step 0.5] [--safe t,r,b,l]：檢查文字是否超出安全區域或幀邊界、 文字溢出、低對比度 (WCAG)、無音段落超過 3 秒。每個格式有預設區域（9:16、4:5、1:1、16:9）； 設定檔可以覆蓋它們。scripts/keys.py project/video.html out t1 t2 …：在指定時間生成幀 + 聯繫表；查看它們。- 渲染後：從 MP4 (
ffmpeg -ss t -frames:v 1) 擷取幾個幀，檢查時長、響度。
5. 音訊
- 鈴聲和音樂來自設定檔；將授權資訊（作者、標題、ID、來源）寫入腳本。
scripts/mix_audio.py out/video_only.mp4 music.mp3 jingle.mp3 output.mp4 [--music-start s] [--jingle-len s] [--voice f] [--voice-start s] [--sfx f] [--target -14]（若無鈴聲或音樂：使用-代替檔案）： 音樂在鈴聲下壓低，然後逐漸增強，在旁白下自動壓低，最後淡出； 兩遍 loudnorm 標準化至 −14 LUFS，真實峰值 −1.5 dBTP；影片不重新編碼。- 跳過音軌的安靜開頭（按每秒 RMS 計算），使鈴聲後不會出現音量下降。
- 音效 需要配合內容，僅在重要的變化處使用，且音量遠低於音樂：
scripts/sfx.py cues.json sfx.wav --dur <length>透過程式碼生成：whoosh（場景轉場）、click（幀）、 pop（卡片出現）、tick（標籤）、swell（高亮）、riser（鋪墊）、thud（定論）。從時間軸T和分鏡表中的 "sound" 欄位取得時間 (cues.json)。不儲存音訊檔案；效果由程式碼生成。 在 Claude Code 中可選：earshot (MCP；252 種聲音以程式碼形式存在，提供聆聽和同步檢查)，前提是 Petr 安裝它（約 1.1 GB 模型）。 - 具有逐字同步功能的旁白：
scripts/align_voice.py voiceover.wav project/ [--text script.txt](Whisper, 捷克語) 建立vo.json、vo.js和vo.srt。在video.html中載入<script src="vo.js">並將圖形與單字時間對齊：voAt('word')返回某個單字的時間；使用wordCaption(el, t)實現逐字字幕（適合 9:16、4:5、1:1 格式）。 錄音是主時鐘：從中取得長度和場景時間，絕不拉伸任何內容。 Whisper 的時間精度約為十分之一秒；請透過聆聽檢查。--text參數會比較實際文字與聽到的內容。 - 庫存音樂可能觸發 Content ID；請使用授權資訊提出爭議，不要選擇「升級為申訴」。
6. 技術
- 頁面
project/video.html（從templates/start.html開始）：window.FORMAT={w,h}（設計解析度）， 場景以<div class="scene">表示，時間軸T={s1:[0,3.5],…}，確定性的seek(t)（沒有 CSS 動畫、 計時器或Math.random()；使用種子隨機數），在結尾處window.seek=seek; window.T=T;。 透過npm i @fontsource/<font>使用本地字型（播放器會切換到 Google Fonts）。將標誌內聯為 SVG。 - 即時網頁錄製（當需要展示網站操作過程時，取代靜態螢幕截圖）：
scripts/record_web.py steps.json out/ [--width 1280 --height 800 --scale 2]：Playwright 根據步驟操作網站 (click、type、hover、spot= 帶有變暗背景的幀、zoom/unzoom、scroll、wait、mark)， 附帶滑動游標和點擊漣漪效果；輸出web.mp4+marks.json（包含步驟時間）。 在 Petr 的 PC 上執行 (Claude Code)；雲端沙盒無法訪問一般網站。拒絕 cookie 橫幅。 在video.html中加入<video src="web.mp4" muted preload="auto">，並使用vseek(video, time)（範本）移動它； 渲染、檢查和分鏡表需等待搜尋完成。 - 網站螢幕截圖 使用 Claude 在 Chrome 中操作：
document.documentElement.style.transform='scale(2)'（原點0 0），移開游標，使用save_to_disk；然後在影片中縮放和取景。 - 渲染
scripts/render.py project/video.html out/ [--scale S] [--only s3 s6] [--workers 4]： 每個場景並行輸出一個 MP4，CRF 18，使用-c copy拼接。預覽使用--scale 0.5，從 1920×1080 渲染 4K 使用--scale 2。 - 音訊
scripts/mix_audio.py（見上文）。
需要：安裝了 playwright、pillow、numpy 的 Python、Chrome/Chromium、ffmpeg、Node（字型）；旁白需要 faster-whisper。
7. 發布（獲得核准與同意後）
- 來自設定檔的社交媒體文案（Instagram、Facebook、YouTube）：IG 3–5 行短句 + 結尾提問； FB 單獨上傳（不要從 IG 分享），文字更短；YouTube 標題最多約 60 個字元，關鍵字在前， 描述（內容、位置、主要規則、相關影片、音樂），長影片需包含章節時間戳記。 主題標籤僅使用設定檔中定義的。儲存到腳本中（「Texty k publikaci」章節）。
- YouTube 字幕：上傳
vo.srt（當有旁白時）。 - 縮圖：Reel 為 1080×1920 + 1280×720，影片為 1280×720 (YouTube)；大字、主要圖案、設定檔風格。 YouTube 可能不允許 Shorts 使用自訂縮圖。