前言¶

產品方甩過來一個落地頁 HTML，說”把這個做成一個 30 秒的宣傳片，要有解說”。傳統做法是錄屏、剪輯、配音、加動效，一圈下來半天起步，效果還受制於錄屏分辨率和剪輯工具。下面介紹的視頻生成技能（source-to-video）走另一條路：把 HTML 頁面直接作爲素材源，由 HyperFrames 合成帶口播和動效的短視頻，省去錄屏與剪輯環節。

這是什麼¶

視頻生成技能是一個基於 HyperFrames 的 Agent Skill，座標 @user_8bae2f22/source-to-video，版本 1.0.1，由社區發佈者 user_8bae2f22 維護，來源爲 community，分類屬於 design-media。它解決的問題是：當手上只有 HTML 頁面 / 工作臺 / 落地頁這類原始素材，卻需要產出可分享的宣傳短視頻時，把素材理解、設計令牌提取、合成、配音、渲染串成一條流水線，由 Agent 調用技能一次性完成。

據官方簡介，該技能覆蓋素材理解、設計令牌提取、合成、清晰中文配音、渲染全流程，默認產出 30 秒、1920×1080@30fps 的成片。

核心功能¶

已覈實的能力：

• 輸入爲原始素材（HTML 頁面 / 工作臺 / 落地頁），由技能理解頁面結構與樣式。
• 合成層基於 HyperFrames，從素材中提取設計令牌（配色、字體、間距等）用於動效與畫面統一。
• 產出帶中文口播配音的宣傳短視頻，默認規格 30 秒、1920×1080、30fps（據官方簡介）。

觸發場景（據官方簡介）：用戶提供 HTML 文件並要求”做成視頻 / 宣傳片 / 短視頻”、提到 Hyperframes、或想把某個產品 / 頁面 / 功能錄製成可分享的動效視頻時，應使用此技能。

安裝與啓用¶

已抓取資料中未給出具體的安裝命令，也沒有 Cursor / Codex CLI / Claude Code 的分端說明，此處不臆測，請以官方頁面爲準。

可覈實的元數據：

• 標籤 requires_api_key=false，即調用不需要額外配置 API Key。
• 官方地址：https://api.skillhub.cn/user_8bae2f22/source-to-video
• SkillHub 頁面：https://www.skillhub.cn/skills/user_8bae2f22/source-to-video

啓用方式按通用 SKILL.md 技能流程：在支持 SkillHub 技能的 Agent 環境中加載該技能座標，由 Agent 在遇到上述觸發場景時自動調用。

適用場景與注意¶

適合：

• 手上有 HTML 落地頁、產品頁或內部工作臺，需要快速產出帶解說的短視頻用於發佈或演示。
• 希望畫面動效與頁面設計一致，而不是錄屏後的粗糙效果。

注意：

• 該技能依賴 HyperFrames 合成鏈路，素材越結構化（標準 HTML + CSS），產出越穩定。
• 配音爲中文口播，若需要其他語言或特定音色，目前資料中未見相關配置項。
• 資料中顯示安裝數爲 0、來源爲 community，屬於較新的社區技能，大規模生產使用前建議先用一個頁面做小樣驗證。

結尾¶

視頻生成技能把”HTML 素材 → 帶口播動效的宣傳片”這條鏈路收斂成一次技能調用，核心價值是替代錄屏 + 剪輯的手工流程，並保持畫面與頁面設計的一致性。想進一步確認安裝命令與最新參數，建議直接打開官方地址查看。

官方地址：https://api.skillhub.cn/user_8bae2f22/source-to-video