Launch Video（發表影片）
將一篇 X 貼文（網址或文字）與品牌的網站（或已保存的 brand.json 設定檔）轉換為 25–40 秒的 1920×1080 60 fps H.264 規格影片（含音軌）。所有創意決策都集中在兩個小 JSON 檔案（brand.json 與 launch.json）中；編譯、畫面佈置、配樂合成與 Remotion 渲染均為確定性流程。
前置需求
- Bun（
bun >= 1.1） - 系統 PATH 上需有
ffmpeg與ffprobe（用於 H.264/AAC 編碼、 loudnorm 音量正規化與接觸表檢查） - ImageMagick（建議在 PATH 上提供
magick，用於 WebP 轉換、透明背景修剪與視窗裁切）
以下 <SKILL_DIR> 指的是包含此 SKILL.md 的目錄（例如 ~/.claude/skills/launch-video 或 ~/.agents/skills/launch-video）。
端到端工作流程
1. 讀取 X 貼文（如有提供網址）
bun <SKILL_DIR>/scripts/post.ts "https://x.com/<handle>/status/<id>"
透過公開的 fxtwitter 端點取得貼文文字、作者、統計數據以及附加媒體（無需登入或 API 金鑰）。
2. 建立或載入品牌設定檔（brand.json）
如果您已經有整理好的 brand.json，可以直接重複使用。若指定的是線上網站（例如 https://fomo.family 或 https://acme.dev），請先建立品牌資料夾：
bun <SKILL_DIR>/scripts/bootstrap.ts "https://fomo.family" --out ./work/brand
然後手動視覺化整理 ./work/brand/brand.json（請勿跳過此步驟）：
- 標誌（
mark）：檢查inline-*.svg、favicon.svg與mark.png。場景背景為深色（#000000或網站本身的暗色背景如#060510），因此mark必須是白色/淺色且帶透明背景（PNG32或SVG）。如果網站的圖示位於不透明深色方塊上，請用 ImageMagick 將淺色標誌提取到透明背景上（magick raw.png -colorspace gray -level 6%,92% alpha.png && magick -size WxH xc:white alpha.png -compose CopyOpacity -composite -trim +repage PNG32:mark-white.png）並檢查預覽樣色。 - 螢幕截圖（
screens）：檢視screens/中的所有下載圖片（或使用無頭 Playwright 以2xDPI 捕捉產品相關頁面）。只保留真實產品的 UI 截圖（4–8 張），刪除純裝飾背景紋理，並為每張截圖撰寫準確的description。如果桌面截圖有外側桌布邊緣，請加入crop: {x, y, w, h}。透明 PNG（如浮空手機、卡片、通知）會自動被裁切並以無邊框方式呈現。 - 合作夥伴/生態系標誌（
logos）：針對節奏中提到的平台、鏈、模型或工具，加入清晰的 SVG/PNG 圖示（例如logos/x.svg、logos/apple.svg、logos/slack.svg等）。在深色單色點陣圖示上設定"fill": "#F2F2F2"，使其在六角磚上更醒目。 - 調色盤與 CTA：確認
palette.bg、palette.fg、palette.accent、mosaicColors（6–10 種品牌主色 + 中性石板色，避免紫色漸層）、website（純網域，例如"fomo.family"）以及cta（big、title、body、button）。
3. 撰寫 launch.json
{
"brand": "./brand/brand.json",
"open": { "tagline": "Where traders become legends." },
"beats": [
{ "id": "spot", "headline": "See it on X, trade it.", "screen": "desktop-terminal", "hexes": ["x", "solana"] },
{ "id": "social", "headline": "Follow what top traders buy.", "screen": "social-feed" },
{ "id": "alerts", "headline": "Real-time alerts before it moves.", "screen": "live-alerts" },
{ "id": "sync", "headline": "Phone to desktop, in sync.", "screen": "desktop-and-phone" },
{ "id": "fund", "headline": "Fund instantly with Apple Pay.", "screen": "apple-pay", "hexes": ["apple", "solana", "base"], "hexLayout": "top" }
],
"cta": {},
"outro": { "seconds": 6.5 },
"music": "profile"
}
關於精準節拍的規則（詳見 references/format-guide.md）：
- 標語（
open.tagline）：5 個單詞以內，描述產品的本質。 - 4 到 6 個節拍：第一個節拍以 X 貼文的鉤子為開端，接著依序展示具體產品頁面。每個標題維持 2–5 個單詞並以句號結尾，以便在
64 px字型下保持單行顯示。 - 螢幕精準對應：每個標題都必須與其
screen所顯示的內容完全一致。切勿將標題與不相關的截圖配對。 - 六角磚佈局（
hexLayout）："auto"（預設值：3 個標誌整齊堆疊在left；1–2 個則放在sides）、"top"（在y = 340的擷取畫面上方顯示水平列）或"sides"。 - 音檔（
music）："profile"會使用brand.json中的music檔案（若有設定），否則會合成一段以 92 bpm 為基礎的極簡電子背景配樂，並正規化至-15 LUFS；"synth"則一律合成；"none"會產生無聲影片；或傳入自訂.m4a/.mp3/.wav的路徑。
4. 渲染快速草稿、檢查影格，再渲染完整 1080p60 版本
# 半尺寸草稿，用於視覺驗證（約 20–40 秒）
bun <SKILL_DIR>/scripts/render.ts ./work/launch.json --out ./work/draft.mp4 --scale 0.5
ffmpeg -v error -y -i ./work/draft.mp4 -vf "fps=1,scale=480:-1,tile=6x6:padding=2:color=gray" -frames:v 1 ./work/draft-sheet.png
檢查 ./work/draft-sheet.png 以及關鍵節點的完整影格：
- 影格 0 應顯示邊緣到邊緣的蜂巢六角形馬賽克；鎖定標誌在深色背景上清晰可見。
- 每個標題都應在寬邊距內以單行顯示，並與其截圖內容相符。
- 透明產品渲染應乾淨浮現，無灰色邊框；六角磚與截圖之間保有足夠的呼吸空間。
- CTA 游標應準確落在點擊影格中的按鈕上。
- 結尾應從完整的蜂巢牆爆破而出，並乾淨地保留打字機效果網域。
在 brand.json / launch.json 中修正任何文案、裁切或佈局問題，然後以完整 1920×1080 60 fps 品質渲染：
bun <SKILL_DIR>/scripts/render.ts ./work/launch.json --out ./work/launch.mp4
ffprobe -v error -show_entries format=duration:stream=codec_name,width,height,r_frame_rate -of default=noprint_wrappers=1 ./work/launch.mp4
回報 ./work/launch.mp4 的完整絕對路徑以及節奏表。