網站轉 HyperFrames
擷取一個網站，然後從中製作專業的影片。
使用者會說的話：
- 「擷取 https://... 然後幫我製作一部 25 秒的產品上市影片」
- 「將這個網站變成一支 15 秒的 Instagram 社群廣告」
- 「從 https://... 建立一支 30 秒的產品導覽影片」
這個工作流程共有 7 個步驟。每個步驟都會產出一個 Artifact，作為下一個步驟的閘控。
Step 1: 擷取與理解
閱讀： references/step-1-capture.md
執行擷取、讀取擷取到的資料，並使用 write-down-and-forget 方法建立一份工作摘要。
閘控： 印出你的網站摘要（名稱、主要色彩、字型、關鍵資產、一句話氛圍）。
Step 2: 撰寫 DESIGN.md
閱讀： references/step-2-design.md
為被擷取的網站撰寫一份簡單的品牌參考文件。總共 6 個段落，約 90 行。這是一份備忘錄，而非創意腳本——創意腳本在 Step 4 才會出現。
閘控： DESIGN.md 存在於專案目錄中。
Step 3: 撰寫 SCRIPT
閱讀： references/step-3-script.md
撰寫旁白腳本。這是故事的骨幹。場景的長度來自旁白腳本，而非猜測。
閘控： SCRIPT.md 存在於專案目錄中。
Step 4: 撰寫 STORYBOARD
閱讀： references/step-4-storyboard.md
針對每個節拍撰寫創意方向：氛圍、鏡頭、動畫、轉場、資產、深度圖層、音效。這是創意的北極星——工程師會依據這份文件來建立每個合成畫面。
閘控： STORYBOARD.md 存在，包含每個節拍的方向以及資產審核表。
Step 5: 生成旁白 + 對應時間
生成 TTS 音訊、轉錄文字以取得逐字時間戳記，並將時間戳記對應到節拍。用實際的持續時間更新 STORYBOARD.md。
閘控： narration.wav（或 .mp3）+ transcript.json 存在。STORYBOARD.md 中的節拍時間已更新。
Step 6: 建立合成畫面
閱讀： /hyperframes 技能（叫用它——每個規則都很重要）
閱讀： references/step-6-build.md
按照故事板建立每個合成畫面。建立之後：自行審查版面配置、資產擺放位置與動畫品質。
閘控： 每個合成畫面都已完成自我審查。沒有重疊的元素、沒有錯置的資產、沒有靜止不動的圖片。
Step 7: 驗證與交付
閱讀： references/step-7-validate.md
Lint、驗證、預覽。建立一份 HANDOFF.md 以利於跨 session 的持續協作。
閘控： npx hyperframes lint 和 npx hyperframes validate 通過，零錯誤。
快速參考
影片類型
| 類型 | 長度 | 節拍數 | 旁白 |
|---|---|---|---|
| 社群廣告 (IG/TikTok) | 10-15 秒 | 3-4 | 可選用鉤子句 |
| 產品示範 | 30-60 秒 | 5-8 | 完整旁白 |
| 功能公告 | 15-30 秒 | 3-5 | 完整旁白 |
| 品牌精華片段 | 20-45 秒 | 4-6 | 可選，以音樂為主 |
| 上市預告片 | 10-20 秒 | 2-4 | 極簡，高能量 |
格式
- 橫式： 1920x1080（預設）
- 直式： 1080x1920（Instagram Stories、TikTok）
- 正方形： 1080x1080（Instagram 動態牆）
參考檔案
| 檔案 | 何時閱讀 |
|---|---|
| step-1-capture.md | Step 1 — 讀取擷取到的資料 |
| step-2-design.md | Step 2 — 撰寫 DESIGN.md |
| step-3-script.md | Step 3 — 撰寫旁白腳本 |
| step-4-storyboard.md | Step 4 — 每個節拍的創意方向 |
| step-5-vo.md | Step 5 — TTS、轉錄、時間對應 |
| step-6-build.md | Step 6 — 建立合成畫面並進行自我審查 |
| step-7-validate.md | Step 7 — lint、驗證、預覽、交接 |
| techniques.md | Step 4 與 6 — 10 種視覺技巧與程式碼模式（SVG 繪圖、Canvas 2D、3D、排版、Lottie、影片、打字效果、可變字型、MotionPath、轉場） |