文件 / 10

腳本：試片、素材、調色與算片

Cinematic UI 附帶的 Node 腳本：screening.mjs、grade-from-stills、find-footage、copy-check、render-film、generate-image 與 app-screening 及其範例指令。

這些腳本需要 Node，以及專案裡的 playwright-core（npm i -D playwright-core）。算影片還需要 ffmpeg。請在專案資料夾裡執行；下面的 <skill> 代表 skill 被 clone 到的資料夾。

screening.mjs：試片

在桌機、較矮的筆電和手機三種視窗拍下每一場，並排成聯絡表。以 kit 做的頁面會在精確、可重現的播放頭位置逐場拍攝；其他頁面則依均勻間隔的捲動位置拍攝。它可以用在任何網址，所以也能拿來拍參考網站。

node <skill>/scripts/screening.mjs ./site                   # 桌機 + 較矮筆電 + 手機
node <skill>/scripts/screening.mjs ./site --cuts            # 另外拍每個剪接的中點
node <skill>/scripts/screening.mjs ./site --reduced         # 無障礙版
node <skill>/scripts/screening.mjs ./site --act shots.mjs   # 你自己的鏡頭：控制項狀態、觀眾的戲份
node <skill>/scripts/screening.mjs ./site --tabs 120        # Tab 走訪超過預設的前 60 個停駐點

它會輸出聯絡表、單格畫面和 report.json，並標記錯誤、空白畫格、死停格、溢出、外框蓋住文字和看不見的焦點。加上 --grade grade.json 時，也會標記色彩偏移。在手機視窗上，它會模擬 90 px 的瀏覽器工具列（--bar 0 可關閉）。

grade-from-stills.mjs

把參考影格量成調色：帶占比的色票、黑位與白位、色度範圍、陰影與高光的冷暖，以及建議的 look，輸出為 grade.json，並附上色票聯絡表 grade.jpg。

node <skill>/scripts/grade-from-stills.mjs refs/ --out grade.json

find-footage.mjs

素材研究員。用鏡頭而不是主題去搜尋，再從聯絡表裡選角。

node find-footage.mjs --query "dawn mist over a valley, wide, backlit" --type video --count 24 --out casting
node find-footage.mjs --pick 3,11 --from casting/candidates.json --to assets --trim 4,8 --width 1920

不需金鑰的來源有 Openverse、Wikimedia Commons、Internet Archive 精選的公有領域老影片，以及 NASA。Pixabay 與 Unsplash 需要免費金鑰。只回傳授權允許商業使用的結果，每次挑選都會追加到 CREDITS.md。

copy-check.mjs

檢查客戶提供的每一句文案，在有 JavaScript 和沒有 JavaScript 的情況下，是否都在頁面上，讓讀者、爬蟲和腳本失敗時都拿得到完整文字。

node <skill>/scripts/copy-check.mjs copy.md ./site

render-film.mjs

逐格跳到頁面的確定時間點並用 ffmpeg 編碼。對用 kit 做的網站，可以錄成一段導覽：

node scripts/render-film.mjs ./site --tour 30 --out tour.mp4      # 把網站本身錄成影片

其他選項包含 --preview（半尺寸、快速編碼）、--motion-blur、--grain、--poster、--audio，以及用來混音的 --sound。宣傳影片本身改由姊妹 skill cinematic-cut 製作，它帶著同一套算片器。

generate-image.mjs

選用的圖像生成路線，透過 Runware API 產生底圖、插畫與去背素材。只有當你在素材通告裡選了 AI 生成才會用到。金鑰來自 RUNWARE_API_KEY 環境變數或 --env-file，絕不會被印出來。

node generate-image.mjs --prompt "..." --out assets/ridge.webp --size 1536x1024 --remove-bg

app-screening.mjs

App 的試片：每個路由 × 狀態 × 視窗 × 主題。

node app-screening.mjs ./app --routes "#/,#/items,#/items/42" --states default,loading,empty,filtered,done,error,denied,huge --viewports 1440x900,390x844 --theme light,dark

標記的項目包含非等寬數字、靠左的數字、被截斷的文字、載入前後的版面位移、低對比、過小的點擊目標、看不見的焦點和空白狀態。它永遠以 0 結束：只回報，不下判斷。