網站轉 HyperFrames
擷取一個網站，然後從中製作專業級影片。
使用者會這樣說：
- 「擷取 https://... 幫我製作一支25秒的產品發布影片」
- 「把這個網站變成一則15秒的 Instagram 社交廣告」
- 「從 https://... 製作一支30秒的產品導覽」
工作流程包含7個步驟。每個步驟都會產生一個工件，作為下一個步驟的輸入。
第1步：擷取與理解
閱讀： references/step-1-capture.md
執行擷取，讀取取得的資料，並使用「寫下後忘記」的方法建立一份可用的摘要。
關卡： 印出你的網站摘要（名稱、主要顏色、字型、關鍵資產、一句話氛圍）。
第2步：撰寫 DESIGN.md
閱讀： references/step-2-design.md
為擷取的網站撰寫一份簡單的品牌參考文件。包含6個章節，約90行。這是一份速查表，不是創意計劃——創意計劃在第4步。
關卡： DESIGN.md 存在於專案目錄中。
第3步：撰寫劇本
閱讀： references/step-3-script.md
撰寫旁白劇本。故事的主幹。場景時長來自旁白，而非猜測。
關卡： SCRIPT.md 存在於專案目錄中。
第4步：撰寫分鏡圖
閱讀： references/step-4-storyboard.md
撰寫每個片段的創意指導：氛圍、鏡頭、動畫、轉場、資產、深度圖層、音效。這是創意的北極星——工程師依此文件來建立每個畫面。
關卡： STORYBOARD.md 存在，且包含逐片段的創意指導以及資產審計表。
第5步：生成配音 + 對應時間
生成 TTS 音訊，進行逐字時間戳記的轉寫，並將時間戳記對應到片段。用實際時長更新 STORYBOARD.md。
關卡： narration.wav（或 .mp3）+ transcript.json 存在。STORYBOARD.md 中的片段時間已更新。
第6步：建立畫面
閱讀： hyperframes 技能（載入它——每個規則都很重要）
閱讀： references/step-6-build.md
按照分鏡圖建立每個畫面。每次建立後：進行自我審查，檢查佈局、資產放置和動畫品質。
關卡： 每個畫面都經過自我審查。沒有重疊元素、沒有放錯位置的資產、沒有靜止不動的圖像。
第7步：驗證與交付
閱讀： references/step-7-validate.md
進行 lint、驗證、快照、預覽。先將本機的 Studio 專案 URL（http://localhost:<port>/#project/<project-name>）交給使用者——只有在明確要求時才渲染成 MP4。請勿將 index.html 視為專案交付連結；它僅是原始碼的上下文。
關卡： npx hyperframes lint 和 npx hyperframes validate 通過且無錯誤，最終回應包含有效的 Studio 專案 URL。
快速參考
影片類型
| 類型 | 時長 | 片段數 | 旁白 |
|---|---|---|---|
| 社交廣告（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 | 第1步——讀取擷取的資料 |
| step-2-design.md | 第2步——撰寫 DESIGN.md |
| step-3-script.md | 第3步——撰寫旁白劇本 |
| step-4-storyboard.md | 第4步——逐片段的創意指導 |
| step-5-vo.md | 第5步——TTS、轉寫、時間對應 |
| step-6-build.md | 第6步——建立畫面並進行自我審查 |
| step-7-validate.md | 第7步——lint、驗證、快照、預覽 |
| techniques.md | 第4步與第6步——10種視覺技巧及程式碼模式（SVG繪圖、Canvas 2D、3D、字型排版、Lottie、影片、打字動畫、可變字型、MotionPath、轉場） |