website-to-video

media-use：在取得音訊/圖片之前，呼叫 /media-use 以從 HeyGen 目錄中檢索背景音樂 (BGM)、音效 (SFX) 與圖片。請先執行 --adopt 來註冊現有資產。詳情請參閱 /media-use Skill。

Website to HyperFrames

擷取網站，並據此製作專業影片。

在步驟 0 之前先確認路由分流。 本 Skill 用於製作一般網站本身/來自一般網站的影片。如果使用者實際上是要行銷/發表/宣傳產品（即便有提供該網址，甚至說是「我們網站的宣傳片」）→ 請改用 /product-launch-video。沒有網站的主題解說 → /faceless-explainer；GitHub PR → /pr-to-video；對現有影片檔案進行剪輯/重新調色/重新排序 → 超出本 Skill 範圍。如果是因模糊的「做個影片」指令被路由至此，或不確定是上市宣傳還是一般網站？請先閱讀 /hyperframes（完整的路由表 + § HyperFrames 無法做的事）。

使用者可能會說：

• 「把這個網站改成 15 秒的 Instagram 社群短片」
• 「用 https://... 製作 30 秒的網站導覽/展示影片」
• 「擷取我們的首頁，並利用頁面本身的視覺素材製作影片」

工作流程共分為 7 個步驟。每個步驟都會產生一個交付物（Artifact），作為進入下一步驟的關卡（Gate）。預設模式為協同合作——標有 💬 的關卡會暫停並詢問使用者。若使用者表明進入自主模式（例如「幫我決定」、「給我驚喜」），則會跳過標有 💬 的使用者偏好關卡；詳細傳遞機制請參閱 step-2-brief.md。

自主模式並不等於「跳過所有關卡」。 自主模式僅涵蓋使用者偏好類問題（例如 TTS 供應商、語音、配色偏重、節奏點數量、是否使用音樂、是否開啟字幕——此類由 Agent 代替使用者做決定的事項）。它不包含品質驗證關卡。即使在自主模式下，以下關卡依然不可跳過：

• 資產審查（Asset Audit，步驟 3）— 檢視聯絡單（Contact Sheet）並說明各資產採用/跳過（USE/SKIP）的理由
• 逐節點 HTML 檢視（Per-beat HTML read，步驟 5）— 每個節點皆需提供結構化的證據區塊
• DoD 完成標準檢查清單（DoD checklist，步驟 6）— 包含動畫對照表（animation-map）、逐條警告的 WCAG 驗證，以及音訊/動效播放驗證
• 誠實揭露章節（Honest disclosure section，步驟 6）— 最終摘要中必須包含「我未驗證的事項（What I did NOT verify）」

如果你發現自己的推論是「自主模式強調偏向行動，所以我要跳過 X」——而 X 屬於驗證關卡而非偏好問題——那麼該推論是錯誤的。偏向行動（Bias toward action）適用於決定構建什麼內容，而非決定是否進行驗證。

---

Step 0: Capture & Understand the Brand

閱讀： references/step-0-capture.md

擷取網站，隨後閱讀擷取出來的資料以理解品牌與產品——其功能、目標受眾、品牌語調（Voice）與整體基調（Mood）。擷取到的資產是後續使用的品牌工具包，而非直接用來組合影片的基礎積木。

在進行需求簡報（Brief）前顯示登入狀態 — 執行 npx hyperframes auth status 並原封不動轉述其輸出結果（切勿意譯或改寫）。該命令會回報語音/背景音樂（BGM）是否將使用 HeyGen 或本機引擎，若未登入，也會說明如何登入。**若未登入，請立即暫停並等待使用者做出選擇 — 選擇登入，或輸入 "go"/"offline" 以繼續使用本機引擎 — 之後才能詢問簡報或執行其他操作。**請將此視為實質的決策點，而非隨口提醒；切勿將此選項合併到簡報問題中，也不要在個別專案庫的 .env 中寫入 Key。（在自主模式下，記錄狀態後直接離線繼續。）標準規範請參閱 ../hyperframes-media → Preflight。

關卡： 已印出網站摘要 — 在資產/顏色/字型清單之前，須優先提供策略層面資訊（產品功能、目標受眾、品牌語調）；且已顯示登入狀態（已登入，或繼續離線運作）。

---

Step 1: Brand Identity

閱讀： references/step-1-design.md

撰寫 DESIGN.md — 涵蓋視覺識別的品牌速查表：包含色彩、字型排版、元件樣式與版面配置原則。請使用 design-styles.json 取得精確的計算數值。

快速選項： 針對快節奏影片（單一節點即看板風格），DESIGN.md 可以是 50 行左右的色彩 + 字型 + 規範守則（do's/don'ts）摘要，無需寫成 300 行的長篇文件。步驟 5 中的 Sub-agent 提示詞會直接貼上品牌數值，因此 DESIGN.md 的深度僅對複雜的畫面構圖有實質影響。

關卡： 已建立 DESIGN.md（長度不限），且至少包含：調色盤、字型選擇以及規範守則（do's/don'ts）。

---

Step 2: Strategy & Messaging

閱讀： references/step-2-brief.md、references/capabilities.md（快速瀏覽目錄 — 僅在需要時深入閱讀特定章節）

在討論視覺或資產前，先與使用者確認影片必須傳達的核心訊息。解析使用者的提示詞 — 他們可能已經提供了影片類型與風格。僅詢問缺失的資訊：這支影片最核心要傳達的一件事、敘事主軸（Narrative Arc）以及目標受眾。

關卡： 已鎖定影片類型、時長、格式，以及最關鍵的 — 傳達訊息與敘事主軸。缺少這些資訊，步驟 3 將無法撰寫以概念為優先的分鏡腳本。

---

Step 3: Storyboard + Script 💬

閱讀： references/step-3-storyboard.md

以概念優先的方式撰寫分鏡腳本：訊息 → 敘事主軸 → 服務主軸的節點（Beats）→ 每個節點採用的技術 → 最後加上品牌點綴（Brand Accents）。接著撰寫搭配的旁白腳本。向使用者展示兩者以及逐節點摘要，持續修改調整直到獲得使用者批准。

關卡： 已建立 STORYBOARD.md 與 SCRIPT.md，且使用者已批准該計劃。

---

Step 4: VO, Timing + Captions 💬

閱讀： references/step-4-vo.md

若步驟 2 確認不需要旁白 — 詢問背景音樂偏好後直接跳至步驟 5。否則：詢問使用者欲採用的 TTS 供應商（HeyGen TTS、ElevenLabs 或 Kokoro），生成音訊、進行語音轉寫，並將時間戳對齊至各節點。隨後詢問字幕設定。

關卡： 滿足以下任一條件：(a) 無需旁白，且分鏡腳本已手動設定節點時間；或 (b) 已建立 narration.wav 與 transcript.json，且節點時間已根據實際時長更新。

---

Step 5: Build Compositions

閱讀： hyperframes Skill（請載入它 — 每一條規則都很重要）
閱讀： references/step-5-build.md

依照分鏡腳本（步驟 3）選定的架構與節奏構建 index.html 與畫面組合。Sub-agent 在回報結果前，需對每個節點執行 hyperframes lint 及 hyperframes snapshot。

關卡： 主 Agent 已對照 DESIGN.md 與 STORYBOARD.md，從頭到尾完整檢視過每個 compositions/beat-N.html。逐節點檢查清單請參閱 step-5-build.md。

---

Step 6: Validate & Deliver

閱讀： references/step-6-validate.md

執行 Lint、驗證、擷取依影片長度按比例放大的快照（公式：max(beats × 3, ceil(duration_seconds / 2))），並審查每一張快照。交付前修正所有問題。交付本地 localhost 的 Studio 專案 URL — 僅在使用者明確要求時才渲染為 MP4。該 Studio URL 僅在最終交付時呈現 — 它是最終且穩定的預覽；建置階段的快照屬於 Headless 截圖，因此請勿在建置途中跳出預覽。

交付令你感到自豪的作品。 交付前問問自己：我敢把這部影片掛上自己的名字發布到社群媒體上嗎？如果不敢，請修正問題。

關卡： npx hyperframes lint 與 npx hyperframes validate 通過且零錯誤，且最終回覆包含有效的 Studio 專案 URL。

---

Quick Reference

Video Types

各影片類型的常見限制 — 請作為起點參考，而非死板公式。節點數量應取決於內容與旁白，而非特定目標區間。

類型	常見時長	時長決定因素	旁白
社群廣告 (IG/TikTok)	10–15 秒	平台限制	可選
產品 Demo 展示	30–60 秒	腳本長度	完整旁白
功能宣告短片	15–30 秒	功能複雜度	完整旁白
品牌形象短片 (Brand reel)	20–45 秒	音樂軌道	可選（以音樂為主）
上市預告片 (Launch teaser)	10–20 秒	鉤子 (Hook) 強度	極少

表格中未包含節點數量是刻意安排的 — 節點數應源自分鏡腳本，而非「社群廣告 = 3-4 個節點」這類公式。複雜產品的社群廣告可能需要 5 個時機精準的節點；而視覺主題單一強烈的品牌形象短片可能只需要 3 個。

Format

• 橫式 (Landscape)：1920x1080（預設）
• 直式 (Portrait)：1080x1920（Instagram Stories、TikTok）
• 正方形 (Square)：1080x1080（Instagram 動態消息）

Reference Files

文件	何時閱讀
step-0-capture.md	步驟 0 — 擷取、理解品牌與產品，撰寫策略優先的網站摘要
step-1-design.md	步驟 1 — 撰寫 DESIGN.md 品牌速查表（5 個章節，250-350 行；看板風格社群廣告可使用 50 行的快速路徑）
step-2-brief.md	步驟 2 — 與使用者對齊傳達訊息、敘事主軸與目標受眾
capabilities.md	步驟 2 與 5 — HyperFrames 功能完整清單（24 個章節）。簡報期間瀏覽目錄，建置期間深入閱讀特定章節
step-3-storyboard.md	步驟 3 — 分鏡腳本 + 腳本草稿（合併），附帶使用者審查關卡
step-4-vo.md	步驟 4 — TTS 供應商選擇、音訊生成與時間軸對齊
step-5-build.md	步驟 5 — 構建 index.html + 畫面組合（compositions）
step-6-validate.md	步驟 6 — Lint 檢查、驗證、快照（依影片時長放大）與預覽
techniques.md	步驟 3 與 5 — 13 種基礎動畫技術與程式碼模式（請靈活改編，切勿直接複製貼上）
html-in-canvas-patterns.md	步驟 5 — HTML-in-Canvas 特效的完整程式碼模式（位於 hyperframes skill 中）