垂直 SaaS 演示影片
這類影片從頭到尾講述一個真實的使用案例，產品真實介面顯示在 3D 裝置上。所有元素環環相扣：每個元素都從前一個元素中誕生。無聲也能理解，因為每個步驟都有標題，而且沒有一秒空白。
參考資料中的數字（影格、音量與時間）皆來自此技能最初的範例影片：一個 32.6 秒有語音版本和一個 32.9 秒無語音版本，影片中包含旋轉並釋放金幣的手機。無語音版本位於 assets/codigo/ 中的範本：Plantilla.tsx 使用相同的動作為「你的品牌」講述相同的故事，而不同影片間所有會變化的內容都在 ajustes.ts（名稱、顏色、字體、文字、螢幕截圖與音效）中。若要製作新的無語音影片，請以此為起點。
僅在到達各個步驟時才閱讀其參考資料：
| 步驟 | 閱讀 |
|---|---|
幕的劇本、timeline.json 以及依附語音的動畫 | references/estructura.md |
| 3D 筆電與手機、清晰螢幕、攝影機、傾斜手機（含動態畫面）、旋轉與金幣 | references/imagen-3d.md |
| 注意力與視線引導：每次一個焦點、標題緊鄰其物件、使用可辨識圖示（無第三方 Logo） | references/atencion-ojo.md |
| 產品標題、「魔法」(「砰！」)、新擬物風格、連貫轉場、游標 | references/transiciones-estilo.md |
| 語音：模型、聲音選擇、錄製、擺放與單詞對應影格 | references/voz.md |
| 音效、音效包、音樂、在 Remotion 中的混音與空白 | references/sonido.md |
| 渲染、測量、聯絡表與已見錯誤列表 | references/revision.md |
| 以經驗教訓收尾並分享（可選） | references/lecciones.md |
不可協商的原則
- 真實數據。 螢幕、文字、價格與流程皆來自真實產品：其網站、儲存庫或用戶提供的資訊。無虛構數字、虛假見證或結果承諾。若需要範例數據，需標示「範例」。在撰寫文字前，請閱讀專案的指示文件（
CLAUDE.md、AGENTS.md或類似文件），因為其中通常包含品牌、平台或文字的限制。 - 語音是輔助，非必要，也可能不存在。 影片在無聲中也能理解：每個步驟都在螢幕上顯示，並由標題（實色線條與灰色線條）說明。若有語音，每個句子都應有其對應標題。
- 無死寂。 沒有任何 0.3 秒的段落低於 -29 LUFS（瞬間值）。音樂從第 0 影格開始播放，並已調平音量，所有出現的元素都有聲音（按鍵聲、彈出聲、撞擊聲）。開頭可以有語音靜默，但永遠不能有聲音空白。
- 一切相連。 沒有東西會憑空出現或無故消失：訊息結束時品牌出現，筆電闔上送來並打開，元素從一個螢幕跳到另一個螢幕，手機變成下一個場景的縮圖。
- 動畫有所依附。 有語音時，每個時刻為
某個單詞的影格 + n。無語音時，每個時刻是鏈接到前一個時刻的腳本常數（旋轉 = 驚奇 + 8），且持續時間與timeline.json進行比對。絕不允許隨機數字散佈在程式碼中。 - 確定性動畫。 所有動畫都是影格的純函數：不使用
Math.random()、Date或影格間的狀態。 - 無裁切或穿幫。 3D 物件完整進入畫面，並以其中心旋轉。應以完整影像淡入，絕不能一塊一塊地淡入，否則會看到內部。務必檢查每個入場的前幾個影格。
- 安全性。 ElevenLabs 金鑰只能存在於環境變數
ELEVENLABS_API_KEY中：絕不能存在於檔案中、聊天中或列印出來。未經詢問不得發布、購買或下載模型或音效庫，且未經用戶要求不得提交。發布時，影片需在平台上標註為 AI 生成。 - 產品外觀，非廣告外觀。 使用標準小寫無襯線介面字體，避免彩色底線單詞：曾有客戶因其「不專業」而拒絕。啟用狀態使用實色，品牌顏色僅用於品牌本身。情感透過動作（傾斜、加速、旋轉、突然出現）傳達，而非字體。
- 每次一個焦點，引導視線。 沒有人能同時閱讀上方的標題並觀看下方的動畫。標題應在其場景靜止時出現，緊貼其物件（在攝影機畫面內，每個場景位置不同），且場景應在標題被閱讀後才動作。新元素應誕生於視線所在之處，或由動態物體引入。在撰寫腳本前請先閱讀
references/atencion-ojo.md。 - 無第三方 Logo。 若要識別社群媒體或電子郵件，請使用純文字名稱和通用圖示，而非品牌 Logo：後者通常需要許可或禁止看起來像代言。
- 聚焦於可見區域。 在手機上，橫幅會遮蓋頂部、底部（名稱、貼文文字與按鈕）以及右側按鈕列。所有可讀文字必須位於安全區域 x 65-888, y 288-1248（Meta 和 YouTube 合併計算），且攝影機應錨定於其中心，而非畫面中心。交件前請使用
scripts/zonas.py進行確認。數字與字體詳見references/atencion-ojo.md。 - 未經同意不發布。 最後一步的經驗教訓保存在本地。僅在用戶明確同意後，並在看到即將發送的確切內容後，才能分享。
流程
- 素材與腳本。 收集真實螢幕截圖、文字與顏色。按幕撰寫腳本與語音台詞（
references/estructura.md和references/voz.md）。在構建前向用戶展示腳本與各幕。 - 先處理語音（若有）。 生成錄音、選擇並放入
timeline.json：如此每個單詞的影格即固定。無語音時，固定腳本常數，並在這些影格處生成音樂段落。 - 影像。 從範本而非從零開始：將
assets/codigo/複製到你的專案，填寫ajustes.ts，並將真實截圖放入螢幕位置。僅在產品故事需要時才更改各幕（references/estructura.md）。 - 音效。 使用音效包中的效果（或使用相同提示詞生成新效果），音樂分段（在品牌標誌處有最終重音），調平音量並置於語音之下。
- 測量式審查。 檢查每個入場與轉場的單張影格、中解析度草稿、聯絡表、音量與空白（
references/revision.md）。修正、重新測量並盡快交付。完美將在下一輪實現。 - 交付。 最終 MP4 以 PNG 序列渲染，附帶其音量、峰值與時長。說明已測量什麼、已檢查什麼，以及哪些只能由用戶憑聽覺或視覺判斷。更新影片的 README。
- 以經驗教訓收尾。 若在此影片中有任何問題被修正，請將教訓寫入本機的
assets/leccion.md（references/lecciones.md說明位置與方式）。之後詢問是否願意分享。若得到明確同意，使用gh將其作為 issue 或 PR 打開。若無gh，提供表單連結。若未同意，則不發送任何內容。
技能包含的內容
scripts/
elevenlabs.py 語音（含單詞時間）、音效與音樂；快取以避免重複付費
paquete_efectos.py 使用你的金鑰生成、篩選並準備好配方中的音效
nivelar_musica.py 按影格調整音樂音量曲線，使其永不靜默
cortar_teclas.py 將一段打字音效剪成 8 個獨立按鍵聲
medir.py 測量 MP4 的 LUFS、真實峰值、時長與聯絡表
silencios.py 檢測低於閾值的段落（死寂）
zonas.py 聯絡表，疊加顯示垂直廣告的安全區域
caja.py 按影格測量暗色物體的寬度與中心；若觸及畫面邊緣則發出警告
huecos.py 檢測損壞影格：白色背景或缺少一影格的 3D 物件
empalme.py 延長一幕而不重新生成音樂：重複最接近時間點的一個完整小節
claridad.py 語音選角：哪段錄音在影片音樂下最清晰，哪段有刺耳的 S 音
assets/sonidos/ receta.json：需生成的 27 種介面音效（音量詳見 references/sonido.md）
assets/codigo/ 範本及其組成部分（參見 LEEME.md）
Plantilla.tsx 完整的無語音組合：聊天、品牌、筆電、手機、動態畫面、旋轉（含金幣）、審查、報告與表單
ajustes.ts 唯一需要填寫的內容：品牌、顏色、字體、文字、截圖與音效
kit-plantilla.tsx 顏色、字體、曲線與 p()/mix()
mundo3d.ts three.js 中的筆電、手機與金幣，含邊距畫布
timeline.json 範本的時長與音樂段落；plan-musica.json 為 ElevenLabs 的計劃
assets/leccion.md 教訓範本（與儲存庫中 lecciones/PLANTILLA.md 相同）
腳本使用 uv run <script> 執行：其依賴關係已在檔案中宣告。
新專案
- Remotion 4，搭配
three（0.18x）。在remotion.config.ts中：Config.setChromiumOpenGlRenderer('angle')。在 Windows 上，使用短路徑：超過 260 個字元時 Remotion 會失敗。 scripts/elevenlabs.py涵蓋語音、音效與音樂。- 使用
uv run scripts/paquete_efectos.py assets/sonidos/receta.json public/<project>/sfx生成音效，並將ajustes.sonido.efectos指向該資料夾。若無 ElevenLabs 金鑰，請使用相同名稱放入你自己的音效。
如何與用戶協作
- 使用用戶的語言回答，直接且實用，提供建議而非選單。
- 當某項操作（如渲染或生成）需要花費時間時，應先告知用戶。
- 盡快交付一個可檢視的版本，並持續改進。
- 當用戶說「看起來被裁切」、「聽起來很空洞」或「感覺不連貫」時，應先檢查影格或測量結果以找出原因。然後用一句話向用戶解釋。