product-launch-video

產品發布到 HyperFrames

使用此技能來捕捉產品、了解其品牌、規劃發布影片，並在 HyperFrames 中逐幀建構。

在步驟 0 之前確認路線。 你是協調者。執行每個步驟，驗證其關卡，然後才繼續下一步。此技能適用於正在行銷、發布、推廣或揭露的產品，包括像是「為我們的網站做宣傳」這類以促銷為目的的請求。將其他意圖導向別處：一般的非發布網站導覽 -> /website-to-video；非產品主題的解說 -> /faceless-explainer；GitHub PR -> /pr-to-video；為現有影片加字幕 -> /embedded-captions；簡短的無旁白動態圖形 -> /motion-graphics。如果使用者只說「製作影片」或路線不確定，請先閱讀 /hyperframes。

你是協調者。在 videos/<project>/ 中工作。依序執行步驟並通過每個關卡後再繼續。使用者關卡為步驟 0、步驟 3 和步驟 6。除了步驟 5 你需為每個影格分派一個子代理外，其餘步驟皆由你親自執行。請勿在此處放置設計或動態規則；這些規則位於影格工作者子代理、hyperframes-creative 和 hyperframes-animation 中。

工作流程：步驟 0 設定 -> hyperframes.json；步驟 1 捕捉 -> capture/；步驟 2 設計系統 -> frame.md；步驟 3 分鏡/腳本 -> STORYBOARD.md 和 SCRIPT.md；步驟 3.1 音訊 -> audio_meta.json；步驟 4 視覺設計 -> 豐富的 STORYBOARD.md；步驟 5 影格 -> compositions/frames/NN-*.html 和 index.html；步驟 6 最終渲染 -> renders/video.mp4。

步驟 0：設定與簡報

目標：鎖定核心影片簡報，並在需要時建立 HyperFrames 專案。

僅在 hyperframes.json 遺失時初始化。以 kebab-case 格式從品牌或網域命名 <project>，例如 acme-promo；切勿使用工作區名稱或時間戳。

npx hyperframes init "videos/<project>" --non-interactive --skip-skills --example=blank

在簡報前顯示登入狀態 — 執行 npx hyperframes auth status 並逐字轉達其輸出（不要改寫或重新表述）。 它會報告語音/BGM 將使用 HeyGen 還是本地引擎，以及未登入時如何登入。如果未登入，請停止並等待使用者選擇 — 登入，或說「go」/「offline」以繼續使用本地引擎 — 然後再詢問簡報或其他事項。 將其視為真正的決策點，而非隨意註記；不要將選擇併入簡報問題中，也不要將金鑰寫入每個儲存庫的 .env。（在自主模式下，記錄狀態並繼續離線模式。）請參閱 ../hyperframes-media → Preflight 以取得標準指引。

關卡： hyperframes.json 存在，且角度、長度、長寬比和語言已鎖定；已顯示登入狀態（已登入，或繼續離線模式）。

步驟 1：捕捉素材

目標：收集影片的來源材料、品牌訊號和可用素材。

分類輸入並選擇路徑。明確的 URL -> 捕捉它，並使用網站進行旁白和素材。貼上的腳本/簡報 -> 逐字儲存為 user_script.txt，詢問一次「逐字使用還是重新結構？」，將答案儲存為 VO_MODE，然後解析捕捉目標：文字中的 URL -> 使用它；僅品牌名稱 -> WebSearch，在一行中確認 URL，然後爬取；無 URL/網站 -> 無捕捉路徑。

使用以下指令執行捕捉：npx hyperframes capture "<URL>" -o ./capture

如果存在 GEMINI_API_KEY、GOOGLE_API_KEY 或 OpenRouter 金鑰，捕捉會自動將素材加入字幕至 capture/extracted/asset-descriptions.md。這不是審查關卡。如果沒有視覺金鑰，請使用 DOM 上下文並繼續。

無捕捉路徑：手動建立 capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md 和 capture/assets/。tokens.json 應為 { "title": "", "description": "", "colors": [], "fonts": [] }；盡可能從簡報中填入標題/描述。visible-text.txt 包含完整的簡報或腳本。asset-descriptions.md 應說明未捕捉到任何素材，除非使用者提供了素材說明。

關卡： capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md 和 capture/assets/ 存在；你能用一句話清楚說明品牌。將 asset-descriptions.md 視為主要素材清單。如果實際捕捉後它遺失，請停止並報告捕捉不完整。如果 capture/BLOCKED.md 存在，請遵循它。

步驟 2：設計系統

目標：選擇一個已出貨的影格預設；腳本會將其轉換為此影片的 frame.md + 字幕外觀。

你只需做一個判斷 — 選擇哪個預設。閱讀 ../hyperframes-creative/references/design-spec.md，並挑選外觀最符合品牌和簡報的預設。然後執行：

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

腳本會確定性地完成其餘工作：將預設的 FRAME.md 複製為 frame.md，並重新混音到 capture/extracted/tokens.json 中的品牌標記上（品牌顏色按角色映射到預設的顏色鍵上 — 墨水、畫布、強調色 — 保留鍵/結構/元件；預設的顯示字體和正文字體替換為品牌字體），將預設的字幕外觀複製到 .hyperframes/caption-skin.html，並自我驗證（映射錯誤時退出碼為 1）。一旦退出碼為 0，立即繼續下一步 — 無需手動編輯規格。

tokens.json 中沒有品牌顏色/字體（例如無捕捉）-> 腳本保留預設的調色盤，這是一個完整的可出貨設計。如果簡報中提到了捕捉遺漏的品牌顏色/字體，請在執行前將其加入 capture/extracted/tokens.json（或使用使用者的 design.md 來填入）；僅在映射確實需要時才事後手動調整 frame.md。

關卡： build-frame.mjs 退出碼為 0 — frame.md 來自指定的預設，且（當預設附帶字幕外觀時）.hyperframes/caption-skin.html 作為字幕外觀來源存在。

步驟 3：分鏡與腳本

目標：將簡報和捕捉的材料轉換為經核准的逐影格故事計劃。

閱讀 references/story-design.md、../hyperframes-core/references/storyboard-format.md 和 ../hyperframes-core/references/script-format.md。使用它們來撰寫 STORYBOARD.md，並在需要旁白時撰寫 SCRIPT.md。

使用 story-design.md 來決定故事原型、鉤子、說服邏輯、節拍、VO_MODE 和素材選擇。從 capture/extracted/asset-descriptions.md（標準清單）中為每個視覺影格選擇 asset_candidates — 不要瀏覽原始的 capture/assets/。除非該清單遺失或無法使用，否則不要要求使用者選擇素材。使用分鏡和腳本參考中的確切必要欄位。

草稿完成後，顯示逐影格摘要。在同一則訊息中詢問使用者兩件事：(a) 核准或要求修改，以及 (b) 是否想要分鏡框架的即時預覽（npx hyperframes preview） — 僅在回答「是」時開啟。迭代直到核准，並將預覽選擇帶到步驟 6。

關卡： STORYBOARD.md 存在，每個視覺影格都有 asset_candidates，需要旁白時 SCRIPT.md 存在，且使用者已核准逐影格計劃。

步驟 3.1：音訊

目標：從已核准的腳本生成旁白、單字時間、音樂和音訊元資料。

在步驟 3 核准後開始音訊處理。在背景執行，然後繼續步驟 4。

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json &

音訊腳本處理旁白、單字時間、從 HeyGen 音樂庫查詢 BGM 以及時間元資料。BGM 情緒來自分鏡的 music: 欄位。這使用 HeyGen 音訊 API 進行檢索，而非生成，並使用與 TTS 相同的 ~/.heygen 憑證。有關提供者的詳細資訊，請閱讀 ../hyperframes-media/references/tts.md。

如果沒有旁白且沒有 SCRIPT.md，則跳過語音生成。如果分鏡有音樂情緒，BGM 仍可能執行。

關卡： 音訊工作已開始，或專案標記為無聲。

步驟 4：影格視覺設計

目標：為每個分鏡影格加入視覺方向、佈局意圖和動態選擇。

就地編輯 STORYBOARD.md。不要建立另一個分鏡。使用 frame.md 作為顏色、字體、佈局感覺和風格的真相來源。

閱讀 references/visual-design.md、references/composition.md、references/motion-language.md 和 ../hyperframes-animation/。使用 visual-design.md 來取得必要的影格欄位和必要的 ## Video direction 區塊。使用 composition.md 來處理佈局、層次、焦點和視覺角色。使用 motion-language.md 和 ../hyperframes-animation/ 來取得有效的效果和藍圖 ID。不要發明效果名稱或藍圖 ID。

對於每個視覺影格，加入必要的視覺和動態欄位，包括 effects 和 focal 和/或 roles。加入一個影片範圍的 ## Video direction 區塊，用於整體視覺方向、動態風格、節奏和設計規則。

不要更改故事、腳本、素材選擇、asset_candidates、transition_in 或捕捉的來源材料。不要在此步驟中撰寫 HTML。

在視覺設計鎖定後，暫存命名的素材：

node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .

關卡： 每個視覺影格都有 effects 加上 focal 和/或 roles；## Video direction 存在；assets/ 包含命名的素材。

步驟 5：建立影格

目標：將每個分鏡影格建立為 HTML 合成，並組裝可播放的影片。

如果音訊已啟動，請等待步驟 3.1 的音訊完成。然後同步持續時間並取得 SFX；如果無聲則跳過兩者。

node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md

node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .

持續時間同步是機械性的：真實語音持續時間優先；無聲影格保留估計值；切勿手動編輯同步後的持續時間。

在分派之前，閱讀 sub-agents/frame-worker.md 和 ../hyperframes-core/references/subagent-dispatch.md。為每個影格分派一個子代理，如果可能則並行；否則以波浪方式執行工作者。每個工作者只處理一個影格。

每個工作者的上下文必須包含 PROJECT_DIR、frame_id、畫布大小、字幕狀態和啟用字幕時的保留區域，以及 ANIM_DIR 作為 ../hyperframes-animation/ 的絕對路徑。每個工作者讀取 frame.md、STORYBOARD.md 中自己的 ## Frame N 區塊，以及每個引用的效果或藍圖 ID 的配方主體。每個工作者只寫入 compositions/frames/NN-*.html。工作者絕不能編輯 STORYBOARD.md。

當每個工作者返回時，協調者在 STORYBOARD.md 中將該影格標記為 animated。

在音訊時間存在後，在背景建立字幕並組裝索引：

node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &

node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .

captions.mjs 使用專案的 .hyperframes/caption-skin.html（在步驟 2 中複製）作為字幕外觀，從 frame.md 注入品牌標記；如果沒有外觀，則渲染內建的預設藥丸形狀。captions: skipped (<reason>) 是有效的。當明確跳過時，繼續進行而不加字幕。

關卡： 每個影格都標記為 animated，index.html 存在，且字幕已建立或明確跳過。

步驟 6：最終化

目標：驗證組裝好的影片，取得使用者核准，並渲染最終的 MP4。

注入轉場、執行檢查、暫停以供審查，然後渲染。

node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .

node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html

npx hyperframes lint

npx hyperframes validate

npx hyperframes inspect

npx hyperframes snapshot --at <frame-midpoints>

snapshot 將捕捉的影格拼接成一張聯絡表（snapshots/contact-sheet.jpg）。快速瀏覽；如果沒有明顯問題，就繼續 — 不要在此停留。

如果某個指令失敗，顯示 stderr 並停止 — 不要堆疊恢復指令。自行修復：對 compositions/frames/NN-*.html 進行最便宜的安全編輯，然後重新執行失敗的檢查。

已知的誤報 — 不要追查它。 inspect 可能會報告少數 text_box_overflow 錯誤，約 1–4px，發生在字幕強調詞（選擇器 #caption-word-* / .caption-line）上。字幕藥丸使用刻意緊湊的 line-height（在 scripts/captions.mjs 中設定一次），且沒有 overflow:hidden，因此較重的顯示字形墨水會溢出幾 px 到藥丸自己的內邊距中 — 實際上沒有任何內容被裁剪。將這些視為預期行為並繼續。不要放大字幕的 line-height（這會使藥丸膨脹，更糟）。僅當 text_box_overflow 指向一個影格元素（#el-NN-*）而非字幕詞時才採取行動。

檢查通過後，暫停以供使用者審查。影片已組裝完成，可在 Studio 中檢視和編輯。僅在步驟 3 和步驟 6 之間管理一次預覽：如果使用者之前要求過則開啟，如果之前拒絕則提供，如果他們已在 Studio 中審查則不再詢問。

預覽：npx hyperframes preview

僅在使用者核准後渲染：

npx hyperframes render --skill=product-launch-video --quality high --output renders/video.mp4

渲染後不要重新執行 lint、validate、inspect 或 snapshot，除非使用者要求。

關卡： lint、validate 和 inspect 在渲染前通過；使用者在審查暫停時核准；renders/video.mp4 存在。最終回覆說明 MP4 路徑和最終時長。

快速參考

格式： 預設橫向 1920x1080；直向 1080x1920；正方形 1080x1080。在分鏡的前言中設定一次格式。

背景腳本： 工作流程僅提供以下 scripts/ 下的腳本：build-frame 用於採用並重新混音影格預設至 frame.md（+ 字幕外觀）；audio 用於 TTS、轉錄、BGM、SFX 和持續時間同步；captions；transitions 用於注入和驗證；stage-assets 用於將影格命名的素材複製到 assets/；以及 assemble-index。其他所有內容由 hyperframes CLI 處理。

閱讀	時機
`[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)`	步驟 2：選擇並採用影格預設。
`[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)`	步驟 2：正確應用品牌標記。
`[references/story-design.md](references/story-design.md)`	步驟 3：規劃產品發布故事。
`[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)`	步驟 3：撰寫 `STORYBOARD.md`。
`[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`	步驟 3：撰寫 `SCRIPT.md`。
`[../hyperframes-media/references/tts.md](../hyperframes-media/references/tts.md)`	步驟 3.1：選擇或了解 TTS 提供者和語音。
`[references/visual-design.md](references/visual-design.md)`	步驟 4：在視覺上豐富分鏡。
`[references/composition.md](references/composition.md)`	步驟 4：判斷構圖。
`[references/motion-language.md](references/motion-language.md)`	步驟 4：判斷動態語言。
`[../hyperframes-animation/](../hyperframes-animation/)`	步驟 4：引用效果和藍圖 ID。
`[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`	步驟 5：分派每個影格的工作者。
`[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)`	步驟 5：安全地分派子代理。

您可能也喜歡

android-clean-architecture

230Kdesign-ui

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns.

affaan-m

獲取

power-bi-performance-troubleshooting

37Kdesign-ui

Systematic Power BI performance troubleshooting prompt for identifying, diagnosing, and resolving performance issues in Power BI models, reports, and queries.

github

獲取

imagegen-frontend-mobile

48Kdesign-ui

Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.

leonxlnx

獲取

繼續探索

瀏覽 design-ui 熱門 Skills 最近更新