應用程式展示影片
核心概念
魅力來自於應用程式本身。建立一個暗色、電影風格的 UI，讓它能夠滴答作響、脈動並宣布真實結果；然後錄製該 UI；接著在剪輯中加入一個保留的字幕欄、重點放大效果以及排版字體的標題和結尾卡片。
如果內容還不是一個應用程式——例如管道、有分數的資料集、成本模型、CLI——請先將其建立為一個小型、可拍攝的前端（請參閱 FRONTEND_STYLE.md 和 theme.css）。不要直接跳到排版投影片或影片模型。
請勿使用影片生成模型、圖像生成模型或文字轉語音來產生展示影片。標題和結尾卡片應為排版字體。預設畫面為無聲；除非需求要求音效，否則不要添加庫存音樂或語音。
一個經過處理、匿名的範例（包含三個剪輯版本：疊加字幕 vs. 投影片組 vs. 即時會話中的保留欄）位於 REFERENCE_CASE.md 中。
資源
所有路徑均相對於此技能資料夾。
FRONTEND_STYLE.md— 設計標記、元件模式、文案語調、動作規格、預錄檢查清單theme.css— 可直接套用的 CSS 變數、極光/玻璃/發光效果、關鍵影格tailwind-theme.css— Tailwind v4 的@theme程式碼片段./record_demo_template.py— 參數化的 Playwright 錄製器./edit_demo.py/./edit_demo.sh— 標題、字幕、重點放大、結尾卡片、編碼example_timeline.json— 編輯器讀取的時間軸節拍列表REFERENCE_CASE.md— 匿名的實作範例以及從三個剪輯版本中學到的經驗
視覺風格（快速參考）
應用程式內主題（也位於 FRONTEND_STYLE.md 和 theme.css 中）：
| 角色 | 十六進位色碼 |
|---|---|
| 頁面墨色 | #05060A / #0A0C14 / #11131F / #1A1D2E |
| 內文文字 | #E5E7F0 |
| 青色（範圍內/即時） | #22D3EE / #67E8F9 |
| 紫色（重量級或付費引擎） | #A855F7 / #A78BFA |
| 紫紅色（漸層末端） | #F0ABFC |
| 翠綠色（匹配/完成/總計） | #10B981 |
| 玫瑰色（威脅/硬性停止） | #F43F5E |
| 琥珀色（差距、假設、未核准） | #F59E0B |
| 金色（成就爆發） | #FBBF24 |
極光暈染、漸隱的 48px 網格、玻璃卡片、顏色編碼的發光效果。UI 使用 Inter，時鐘和資訊流使用 JetBrains Mono，表格數字。載入字型；僅在主題中命名是不夠的（theme.css 包含匯入）。主標題為 font-black tracking-tight，大小約 48–60px，其中一個字使用 #67E8F9 → #A78BFA → #F0ABFC 的文字漸層。提示行（Kicker）為 11–13px 大寫，字距 0.14–0.25em。
字幕欄 / 標題卡主題（編輯圖層，非應用程式本身）：
| 角色 | 十六進位色碼 |
|---|---|
| 背景 | #08070C |
| 金色分隔線 / 提示行（Kicker） | #E1A01D |
| 標題 | #F3ECE3 |
| 副文字 | #9A958C |
編輯器中的標題字體為粗體斜體怪誕體（grotesk）。./edit_demo.py 將使用 ./fonts，或 APP_DEMO_FONT / APP_DEMO_FONT_ITALIC，或系統的 DejaVu / Liberation 字型。如果您有 Geist Italic 900，它是一個很好的替代字型。
動態效果
共用緩動函數：cubic-bezier(0.16, 1, 0.3, 1)。計數器從前一個值開始跳動（預設 1.1 秒，KPI 圖塊為 1.6 秒，預測值為 1.8 秒）。活動步驟會脈動（1.4 秒），並伴隨一個擴張的環（1.3 秒）。完成時會有一個彈簧效果的勾選加上粒子爆發。成就通知大約停留 1.7 秒。行動呼籲按鈕和活動步驟會閃爍（1.6 秒循環）。
安排傳入事件的節奏，使每次通過都可讀（步驟結束後約 1.5 秒）。伺服器時間和計數保持真實；僅在它們出現時延遲。運行結束後，等待約 900 毫秒，然後平滑捲動到一個縮放進入的結果主畫面。
文案語調
寫得像電影預告片，然後用數字證明。
- 主標題：一個簡短的隱喻，一個漸層色單字。副標題說明觀看者將看到解鎖什麼，然後說明他們將看到成本和信心讀數。
- 即時行動呼籲：一個啟動的動詞。重播行動呼籲：一個播放的動詞。
- 每個步驟都有一個具體的標題和一個 2–3 個字的 Title Case 成就，在完成時彈出通知，並在該行上標註星號。
- 差距是工作，不是失敗。威脅有一個命名的防護罩。未經批准的輸出在 UI 中標記。Header 中保留一個安全/唯讀行。
- 成本是精確的（足夠的小數位數，使低於一分的數字不會變成 $0.00），並標記為按量計費與估計值。假設在圖塊上命名。
- 整個工作流程的成本或價值比較，及其注意事項，都放在產品中，以便鏡頭可以捲動到它們。
展示使用者體驗（Demo UX）
?replay=<id>（可選?speed=）以其實際時間自動開始一個先前已計量的運行，且 UI 會顯示這是一個重播。?run=<id>（可選?backend=）重新開啟一個已完成的運行，以便在不重新計費的情況下進行儀表板重拍。- 即時路徑：上傳或連接真實資料 → 如有需要確認付費引擎 → 啟動 → 有節奏的時間軸 + 請求資訊流 → 儀表板、預測、成本面板、注意事項。
工作流程
- 為拍攝而設計前端樣式。 如果尚無 UI，則建立一個。套用
theme.css（如果應用程式使用 Tailwind v4，則同時套用tailwind-theme.css）。按照FRONTEND_STYLE.md中的檢查清單進行。 - 鎖定真實資料。 使用即時運行或一個忠實的重播測試裝置。之後的每個字幕都必須能夠引用螢幕上或運行自身指標中出現的數字。
- 使用 Playwright 錄製 在 1920×900 解析度下。不要使用頁面內的字幕膠囊——它們會遮蓋 UI。撰寫一個連續的拍攝腳本（登陸頁 → 工作流程 → 結果），包含 2–4 秒的停頓和一次慢速滾動。使用
./record_demo_template.py。保持 Playwright 的原生影格率（通常為 25 fps）。 - 編輯 使用
./edit_demo.sh。畫布為 1920×1080：一個 1920×900 的應用程式窗格位於一個保留的 180px 欄（#08070C/#E1A01D/#F3ECE3/#9A958C）之上。約 2 秒 的標題卡，硬切（不是 1 秒的交叉淡出），約 0.4 秒 1.3 倍的放大效果 僅限於應用程式窗格（字幕欄保持固定）。以應用程式內的成本或價值比較結束，然後是一個約 3 秒 的注意事項卡。目標時長為 60–70 秒。預設為無聲（為了播放器相容性，可以加入一個安靜的 AAC 音軌）。 - 驗證影格。 確認字幕欄從未遮蓋 UI，放大效果沒有裁剪到字幕欄，並且每個有字幕的數字都出現在螢幕上或被標記為假設。
- 處理流程說明應放在單獨的投影片組中。 架構、運作原理和重點提示卡片不應取代此影片中的會話。
字幕語調
- 提示行（Kicker）：幾個追蹤輸出的全大寫單字（
即時會話、任務完成、關鍵發現）。 - 標題：一個或兩個簡短的句子。使用句號，而不是省略號。
- 將令人驚訝的實際測量結果放在首位：計數、時間、成本、捕獲的內容。
- 指向當前螢幕上的內容，然後添加要點。不要像教學一樣敘述。
- 當你切換到應用程式內的成本面板時，要說明這是應用程式自己的面板，而不是投影片。
失敗模式
| 錯誤 | 修正方法 |
|---|---|
| 頁面內 HTML/CSS 字幕疊加 | 始終將保留的字幕欄放在應用程式下方 |
| 螢幕截圖拼貼或排版字體的「流程」投影片作為主體 | 錄製會話；將流程卡片移到投影片組 |
| 每個節拍之間使用交叉淡出 | 使用硬切；將動畫效果保留給放大效果和應用程式本身 |
| 虛構或未經標記即四捨五入的數字 | 複製運行中的數字；標記假設 |
| 放大效果縮放了整個 1080p 影格並裁剪了字幕欄 | 僅縮放 1920×900 的窗格 |
| 以架構或運作原理圖形結束 | 以產品的成本/價值比較結束，然後是注意事項 |
| 使用影片模型生成「展示影片」 | 僅使用 Playwright + ffmpeg |
| 添加畫外音或音樂「使其更具電影感」 | 預設為無聲；畫面和字幕就能撐起場面 |
| 平面 UI，數字彈出，無應用程式內成本面板 | 先使用 FRONTEND_STYLE.md 設計應用程式樣式；不要試圖僅在剪輯中修復 |
| 主標題或行動呼籲寫得像設定頁面 | 隱喻 + 漸層單字；即時使用啟動動詞，重播使用播放動詞 |
| 在 CSS 中命名了字型但從未載入 | 從 theme.css 添加 Inter + JetBrains Mono 匯入 |
| 資料集或 CLI 因為「沒有應用程式」而被錄製成投影片 | 先建立一個小型前端來展現風格，然後錄製它 |
快速開始
需要 ffmpeg 和 Python 3。
python3 -m venv .venv && .venv/bin/pip install playwright pillow && .venv/bin/python -m playwright install chromium
# 1. 設計應用程式樣式（theme.css / FRONTEND_STYLE.md），使其在鏡頭前表現出色。
# 2. 在應用程式正在運行且錄製器中的 actions() 已填寫完成後：
.venv/bin/python ./record_demo_template.py --out demo_raw.webm
./edit_demo.sh --input demo_raw.webm --timeline example_timeline.json --output demo.mp4
可選：將 Geist（或其他粗體斜體怪誕體）放在 ./fonts 下，或設定 APP_DEMO_FONT 和 APP_DEMO_FONT_ITALIC。
目的
從真實會話中製作一個運作中應用程式的戲劇性展示、宣傳或發佈影片。設計一個可拍攝的前端樣式，使用 Playwright 錄製它，並使用 ffmpeg 合成一個保留的字幕欄、重點放大效果以及排版字體的標題和結尾卡片。管道、資料集、成本模型或 CLI 會首先被建立為該前端。
輸入
- 一個在錄製器基礎 URL（
record_demo_template.py中的--base，預設為http://127.0.0.1:8765）上運行的應用程式，或一個為錄製而建置的小型前端。 - 真實資料，或先前計量運行的忠實重播。有字幕的數字來自螢幕或運行的指標，或被標記為假設。
record_demo_template.py中填寫的actions()。- 一個形如
example_timeline.json的時間軸 JSON。 - ffmpeg、Python 3、
playwright和pillow。可選的./fonts中的斜體怪誕體，或APP_DEMO_FONT和APP_DEMO_FONT_ITALIC。 theme.css，當應用程式使用 Tailwind v4 時的tailwind-theme.css，以及FRONTEND_STYLE.md中的檢查清單。
輸出
- 來自
record_demo_template.py的原始拍攝檔案（.webm，或使用--transcode的.mp4）。 - 來自
edit_demo.sh的已編輯檔案：1920×1080 H.264，通常為 60–70 秒，無聲 AAC。一個 1920×900 的應用程式窗格位於一個 180px 的字幕欄上方，包含一個約 2 秒的標題卡、硬切、應用程式窗格上約 0.4 秒 1.3 倍的放大效果，以及一個約 3 秒的注意事項結尾卡。
非目標
- 影片生成模型、圖像生成模型和文字轉語音。
- 庫存音樂或語音，除非需求要求音效。
- 頁面內字幕疊加、螢幕截圖拼貼以及作為主體的交叉淡出流程投影片。
- 虛構的數字，或未經標記的四捨五入數字。
- 使用架構或運作原理投影片組代替會話。
檢查事項
- 通過
FRONTEND_STYLE.md中的預錄檢查清單，包括已載入的 Inter 和 JetBrains Mono，以及一個可讀的 1920×900 影格。 - 保留的字幕欄從未遮蓋 UI。放大效果僅移動 1920×900 的窗格，因此字幕欄保持全寬且未被裁剪。
- 每個有字幕的數字都出現在螢幕上或運行指標中，或者字幕和結尾卡都將其稱為假設或預測。
- 剪輯為硬切，長度約為 60–70 秒，除了編輯器混入的安靜 AAC 之外，音軌是無聲的。
bash -n edit_demo.sh和python3 -m py_compile在edit_demo.py和record_demo_template.py上都執行成功。
失敗模式與復原
使用上面的失敗模式表格。復原：
| 你看到的情況 | 你該怎麼做 |
|---|---|
| 字幕遮蓋了按鈕或圖表 | 刪除頁面內疊加。將該行放入時間軸並重新執行 ./edit_demo.sh。 |
| 主體是靜止圖像、拼貼或交叉淡出 | 使用 ./record_demo_template.py 錄製會話，並在節拍之間使用硬切。 |
| 放大效果裁剪了字幕欄 | 保持對節拍的 zoom。edit_demo.py 僅縮放應用程式窗格。 |
| 字幕中的數字未出現在螢幕上 | 複製儀表板或運行指標中的數字，或在圖塊和結尾卡上標記假設。 |
| 平面 UI、彈出的數字或沒有成本面板 | 重新使用 theme.css 和 FRONTEND_STYLE.md 設計樣式，然後再次錄製。 |
| 編輯器因為找不到字型而退出 | 在 ./fonts 下添加 .ttf 檔案，或設定 APP_DEMO_FONT 和 APP_DEMO_FONT_ITALIC，然後重新執行 ./edit_demo.sh。 |
| 來源是筆記本、CLI 或試算表 | 根據 FRONTEND_STYLE.md 圍繞真實資料建立小型前端，然後錄製它。 |