Communitygithub.com

ajewoleOlugbenga/video-skills

將小型商家、產品或優惠的簡短描述,轉換為 15–30 秒的完成版動畫宣傳廣告影片 (MP4),適用於 Instagram Reels、TikTok、WhatsApp 狀態或 Facebook,並包含動感文字、品牌顏色、音效與音樂。當有人要求為商家製作宣傳影片、產品廣告、Reels、銷售影片、傳單式影片或動畫廣告時使用。

video-skills 是什麼?

這個 AI 技能能將商家提供的簡短描述,自動轉換為一支可直接發布的直式廣告影片。AI 會扮演文案撰稿人、動態設計師與剪輯師的角色:先根據參考文件撰寫廣告劇本,然後將其結構化為簡潔的 JSON 格式,最後透過內建的 Remotion 模板渲染出 MP4 影片。主要支援 Instagram Reels、TikTok、WhatsApp 狀態及 Facebook 等社群平台。使用前需確保已安裝 Node.js 18+ 與 npm,首次渲染時會自動下載無頭 Chrome。技能內建了詳細的腳本結構參考、簡歷 JSON 格式規範、以及預覽靜態影像的檢查機制,確保文字無裁切、顏色對比清晰,並遵守版權規定(例如不虛構客戶見證、不使用未經授權的音樂)。渲染完成後,AI 還會主動建議 A/B 測試不同的開場鉤子、調整影片格式、或加入旁白等後續優化選項。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ajewoleOlugbenga/video-skills/tree/HEAD/plugins/promo-ad-video/skills/promo-ad-video

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

宣傳廣告影片

根據商家的一般文字描述,產出可直接發布的直式廣告影片。你(Claude)將扮演文案撰稿人、動態設計師與剪輯師:你負責撰寫廣告腳本、將其轉換為簡短的 JSON 格式,並使用 template/ 中內建的 Remotion 模板進行渲染。

輸出:MP4 格式(預設為 1080×1920)以及預覽靜態影像,全以程式碼完成,無需使用剪輯軟體。

需求

  • Node.js 18+ 與 npm(模板會在首次執行時安裝 Remotion)
  • ffmpeg 為選用(僅用於修剪/轉換使用者提供的音訊)
  • 首次渲染時會自動下載無頭 Chrome(約 100 MB)。若下載被阻擋,請設定 REMOTION_BROWSER=/path/to/chrome。
  • 授權:Remotion 對個人、員工不超過 3 人的公司以及非營利組織免費;較大的營利公司需要 Remotion 公司授權(remotion.dev/license)。如果使用者似乎是為較大的公司進行渲染,請提醒一次。內建字型採用 SIL OFL 授權(請參閱 template/public/fonts/OFL.txt)。

工作流程

請依序執行下列步驟。不要省略步驟 5 中的預覽檢查。

1. 收集簡要資訊

你需要:商家名稱、銷售的商品、優惠/價格、目標對象、如何購買(WhatsApp 號碼、IG 帳號、網站、地點)。加分項:品牌顏色、標誌、產品照片、真實客戶評價、真實數字(服務過的客戶數、經營年數)。

在 一則 簡短訊息中(最多 3 個問題)詢問遺漏的必要資訊。對於你可以自行妥善決定的項目(顏色、場景順序、用詞),請不要詢問。如果使用者無法即時回覆,請做出合理的預設選擇,並說明你所假設的內容。

2. 撰寫腳本

閱讀 references/ad-scriptwriting.md 並選擇一種結構。將腳本撰寫為簡短的場景清單,並在渲染前以幾行文字呈現給使用者,除非使用者要求你直接進行。最重要的規則:

  • 在前 2 秒內設定鉤子,最多 7 個字。要能讓人停止滑動,內容應關於觀看者,而非品牌。
  • 總長度 15–30 秒,包含 5–8 個場景。
  • 絕不要虛構客戶見證、客戶數量、評分或價格。 僅在使用者提供相關事實時,才使用 testimonial 和 stat 場景。否則請省略它們。
  • 完全依照使用者提供的內容複製價格、電話號碼與帳號。

3. 設定工作目錄(每個專案一次)

cp -r <skill-dir>/template ./promo-ads   # 如果 ./promo-ads 已存在則跳過
cd promo-ads && npm install

<skill-dir> 是此 SKILL.md 檔案所在的資料夾(技能的基本目錄,會在技能載入時顯示)。它可能位於外掛快取或 ~/.claude/skills/ 中;絕對不要編輯該處的檔案,務必先將模板複製出來。

將使用者提供的標誌、產品照片與音訊放入 promo-ads/public/assets/。正方形或 4:5 比例、背景乾淨的產品照片效果最佳。

4. 撰寫簡要 JSON

建立 promo-ads/briefs/<business-slug>.json。完整欄位參考:references/brief-schema.md。請從 template/briefs/example.json 開始。

重點:

  • 顏色必須是 6 位十六進位碼。選擇一個 background、一個強烈的 primary(按鈕、強調標記)、一個 accent(標籤、價格爆發、徽章),以及與背景有強烈對比的 text。
  • 每行用 *星號* 包圍 1–2 個關鍵詞以進行強調,例如 "今晚 *煮飯* 太累了嗎?"。
  • 場景類型:hook、problem、product、benefits、stat、price、testimonial、cta。每個場景可選用 seconds 參數。
  • 可用圖示:check、star、truck、clock、shield、phone、chat、globe、tag、spark、heart、location、cash、bolt、gift、x。

5. 預覽靜態影像,然後仔細檢查

scripts/render.sh briefs/<slug>.json stills

此步驟會驗證簡要資訊,然後為每個場景寫入一張 PNG 到 out/<slug>-frames/。開啟每一張靜態影像並檢查:

  • 沒有文字被裁切或換行不順(單獨一個詞孤零零地在一行 → 縮短文字)
  • 文字在背景上清晰可讀
  • 沒有重要內容靠近上方 15% 或下方 22% 的區域(平台按鈕會遮蓋這些區域;模板已將內容保留在安全區內,因此這主要針對較長文字)
  • 拼寫、價格與聯絡方式完全正確

修正簡要資訊並重新執行靜態預覽,直到一切乾淨。這步驟成本很低(約 1 分鐘);完整渲染則不然。

6. 渲染影片

scripts/render.sh briefs/<slug>.json

會寫出 out/<slug>.mp4(30 秒影片約需 2–4 分鐘)。確認影片長度在 15–30 秒之間。

7. 交付

將 MP4 提供給使用者,並用一句話說明影片內容。提供一個有用的下一步建議,例如:

  • 2–3 個替代鉤子作為 A/B 變體(複製簡要資訊,僅更改鉤子場景)
  • 另一種格式:用於動態消息貼文的 "format": "1:1" 或 "4:5",或用於 YouTube/網站的 "16:9"
  • 加入旁白的版本(請參閱 references/voiceover.md)

音訊

  • 音效(咻、啵、叮、撞擊聲)會在場景切換與列表項目出現時自動播放。可透過 "audio": {"sfx": false} 關閉。
  • 預設會播放一個免版稅的入門節拍。使用使用者自己的音樂檔案,請設定 "audio": {"music": "assets/song.mp3"},或設為 false 以不播放音樂。絕對不要下載或使用受版權保護的歌曲;使用者必須擁有或取得其提供的任何音樂檔案的授權。
  • 旁白:請參閱 references/voiceover.md。

自訂外觀

若要進行超出簡要資訊範圍的修改(例如新的場景類型、不同的動畫),請編輯 promo-ads/src/ 中的檔案:

  • scenes/Scenes.tsx:每種場景類型對應一個元件
  • components/Words.tsx:動感文字與強調標記
  • components/Frame.tsx:背景、品牌標籤、安全區域、場景轉場效果
  • Ad.tsx:場景時間預設值與音訊

請遵守 Remotion 規則:所有動畫必須由 useCurrentFrame() 驅動(不可使用 CSS 轉場或 setTimeout),且資源必須使用 staticFile() 載入。

如果遇到失敗情況,請參閱 references/troubleshooting.md。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能