svemyh/launch-video

Launch Video

将一条 X 帖子（URL 或文本）加上品牌的网站（或已保存的 brand.json 配置文件）转化为一段 25-40 秒、1920×1080、60fps、含音频的 H.264 发布影片。所有创意决策都集中在两个小 JSON 文件中（brand.json 和 launch.json）；编译、布局、配乐合成和 Remotion 渲染都是确定性的。

前置条件

• Bun（bun >= 1.1）
• 在 PATH 上可用 ffmpeg 和 ffprobe（用于 H.264/AAC 编码、loudnorm 母带处理以及接触表单检查）
• ImageMagick（magick 在 PATH 上，推荐用于 WebP 转换、alpha 裁剪和窗口裁剪）

以下内容中的 <SKILL_DIR> 指的是包含此 SKILL.md 的目录（例如 ~/.claude/skills/launch-video 或 ~/.agents/skills/launch-video）。

端到端工作流程

1. 读取 X 帖子（如果提供了 URL）

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（不要跳过此步骤）：

1. 标记（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）并检查预览色板。
2. 屏幕截图（screens）：查看 screens/ 中的每一张下载的图片（或使用无头 Playwright 以 2x DPI 捕获真实的产品路由）。只保留真正的产品 UI 截图（4-8 张），删除装饰性背景纹理，并为每个截图编写准确的 description。如果桌面截图有外部壁纸边距，添加 crop: {x, y, w, h}。透明的 PNG（浮动手机、卡片、通知）会自动裁剪并渲染为无边框。
3. 合作伙伴/生态系统标志（logos）：为节拍中提到的任何平台、链、模型或工具添加清晰的 SVG/PNG 图标（logos/x.svg、logos/apple.svg、logos/slack.svg 等）。在暗色单色光栅图标上设置 "fill": "#F2F2F2"，使它们在六角形磁贴上突出显示。
4. 调色板和 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

# 半倍缩放草稿用于视觉 QA（约 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 60fps 质量进行渲染：

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 的完整绝对路径以及节拍表格。