前言¶

給產品做一條宣傳視頻，傳統路徑是定分鏡、找素材、上剪輯軟件、渲染導出，一條十幾秒的片子往往要花掉一兩天。用代碼做是另一條路：動畫可控、可複用、可嵌入頁面，但要從零搭工程、調時間軸，門檻不低。這個 Skill 把中間環節壓縮成一句話——把產品簡介或 PRD 交給它，產出一個單文件、自包含的 HTML 宣傳動畫視頻。

這是什麼¶

「產品宣傳視頻製作」（座標 @user_254f7e9e/jit-motion）是發佈在 SkillHub 的社區技能，發佈者 user_254f7e9e，版本 1.0.0，分類 design-media，來源 community。它解決的問題是：在沒有任何視頻製作工具的情況下，由 Agent 直接生成一段 15-30 秒的產品宣傳動畫，輸出爲單個 HTML 文件，瀏覽器打開即可播放。官方簡介稱其適配 Claude Code / Codex / Cursor / Qoder。

核心功能¶

以下能力均來自官方簡介：

1、單文件、自包含的 HTML 視頻：輸入產品簡介/PRD，輸出一個自包含 HTML 文件，時長 15-30 秒，無需外部資源即可播放。

2、多場景 GSAP 時間軸分鏡：內置基於 GSAP timeline 的多場景 storyboard，場景之間按時間軸編排過渡。

3、四種畫幅切換：提供 16:9、4:3、1:1、9:16 四種畫幅比例的切換能力，同一份內容適配橫屏、方圖與豎屏。

4、零 emoji SVG 圖標系統：圖標全部用 SVG 繪製，不使用 emoji，視覺風格統一。

5、品牌色抓取：從產品官網抓取品牌色並應用到動畫中，保持與官網一致的視覺語言。

6、播放控制與 SEO：提供播放控件，並附帶 SEO video metadata，便於在頁面中作爲視頻內容被索引。

安裝與啓用¶

官方地址與 SkillHub 頁面如下，在對應平臺按座標檢索安裝：

官方地址: https://api.skillhub.cn/user_254f7e9e/jit-motion
SkillHub 頁面: https://www.skillhub.cn/skills/user_254f7e9e/jit-motion
座標: @user_254f7e9e/jit-motion

說明幾點：

• 技能標籤爲 requires_api_key=false，使用時不需要額外的 API key。
• 本次寫作時官方頁面抓取失敗，未覈實到具體的安裝命令（如 npm/npx 或平臺內安裝指令），各平臺的安裝方式以官方頁面爲準。
• 官方簡介稱適配 Claude Code / Codex / Cursor / Qoder，但各平臺的具體啓用方式未在資料中逐一給出，建議安裝前在對應平臺內查看該技能的說明。

典型用法¶

1、準備輸入：整理一段產品簡介或 PRD，寫清產品是什麼、要突出哪幾個賣點。

2、在 Agent 中觸發：把簡介貼給 Agent，提出製作產品宣傳動畫的需求，例如「用這個產品簡介做一條 20 秒左右的宣傳動畫」。

3、接收產物：Skill 生成單文件 HTML，用瀏覽器打開即可預覽，檢查分鏡順序、畫幅切換與品牌色是否正確。

4、按需調整：根據預覽結果讓 Agent 調整時長、場景數量或畫幅，改的是同一份 HTML。

適用場景與注意¶

適合的場景：

• 產品發佈、功能演示、官網或落地頁內嵌的動畫展示。
• 需要在交付物裏附帶可交互 HTML demo 的場合。
• 想快速看到宣傳動畫效果、再決定是否投入正式製作的場景。

注意點：

• 產物是 HTML 動畫，不是 mp4 等真實視頻文件；要嵌入不支持 HTML/JS 的環境時需另行導出。
• 品牌色依賴能訪問產品官網，官網不可訪問或沒有明確品牌色時，需手動指定。
• 時長固定在 15-30 秒範圍內，超出這個區間的需求需要自行擴展。
• SkillHub 頁面當前顯示評分 100000、下載 1110（截至本文寫作時），屬於平臺統計，不代表動畫質量。

結尾¶

這個 Skill 的價值在於把「產品宣傳視頻」從製作工序變成了一次生成任務：輸入簡介，輸出可播放、可切換畫幅、可嵌入頁面的單文件 HTML 動畫。如果你手上有 PRD 又想快速看到宣傳效果，可以從上面的官方地址開始試用。