宣傳廣告影片
根據商家的一般文字描述,產出可直接發布的直式廣告影片。你(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。