tiktok-launch-video

TikTok 发布视频

使用 HyperFrames 制作原生 TikTok 发布视频——以编程方式生成 HTML/CSS 视频，结果确定，便于 Agent 使用。

这项技能有明确的风格取向：采用 TikTok 语法（9:16、1 秒内出现钩子、内嵌字幕、快速剪辑、原生文字叠层），而不是把 16:9 横屏视频直接移植到竖屏。

用法

/tiktok-launch-video https://example.com/launch — 从发布页面提取上下文 /tiktok-launch-video "we're shipping AI brand guardrails for marketers" — 简短简介 /tiktok-launch-video — 采访用户

前置条件

在这台机器上运行一次：

node --version            # ≥ 22
ffmpeg -version | head -1 # ≥ 6

如果任一项检查失败，请先让用户安装 Node 22+ 和 FFmpeg，再继续。

步骤

1. 收集产品上下文

按以下顺序尝试信息来源——找到足以撰写脚本的信息后就停止。不要重复用户已经完成的工作。

1a. 本地文件 — 如果存在 .agents/product-marketing-context.md 或 .claude/product-marketing-context.md，请读取。

1b. Cogny MCP 上下文树 — 如果已连接 cogny MCP 服务（通过工具检查——mcp__cogny__get_context_tree_overview 或任何 mcp__cogny__* 工具），请查询：

mcp__cogny__get_context_tree_overview          # see what's documented
mcp__cogny__search_context query="<product>"   # pull customer / pricing / positioning nodes
mcp__cogny__read_context_node node_id="…"      # drill into the most relevant nodes

上下文树通常包含公开抓取无法获取的信息：真实客户名称、ICP、定价档位、本季度目标、近期发布内容、路线图内容。在改用网页抓取前先检查它。

1c. 公开网页 — 如果传入了 URL，且 1a/1b 提供的信息仍不够，请用 WebFetch 获取页面内容，并提取产品名称、价值主张、核心优势、目标用户以及一个具体的证明点。

1d. 用户简介 — 如果传入了简短简介，请直接使用。

完成 1a–1d 后，只向用户询问TikTok 钩子清单中仍缺少的信息。

TikTok 钩子清单（撰写脚本前实际需要的信息）：

1. 目标观众是谁？请用 5 个词描述。（例如：“投放付费广告的 B2B 营销人员”）
2. 视频以什么打破观众预期？（POV、揭晓、反常识主张、演示闪现、“等着看”）
3. 哪一个主张或时刻能让观众停下滑动？
4. 有什么证明？（数字、截图、客户名称、前后对比）
5. CTA 是什么？（个人简介中的链接、评论关键词、搜索产品、关注）

五项信息缺一不可。如果是在猜测，请提问。

1.5 获取品牌形象

视频应体现用户的品牌，而不是套用现成模板。请用户提供以下任意一项：

• 网站 URL（我们会从页面提取颜色、字体和语气）
• 包含 tailwind.config.* 或带 CSS 变量的 globals.css 的代码仓库路径
• 现有的 brand-kit.json（.agents/brand-kit.json / .claude/brand-kit.json / 项目根目录）
• 手动提供：3 个十六进制颜色值（背景、文字、主色）+ 一个字体系列 + 一句话描述品牌语气

至少生成包含以下字段的 brand-kit.json：colors.background、colors.foreground、colors.primary、colors.accent、type.family、voice.register。将其保存到 HyperFrames 项目根目录。

完整的架构、提取方法和语气到构图的映射，请参阅 references/brand-identity.md。

构图模板会将这些值读取为 CSS 变量（--bg、--fg、--primary、--accent、--font-display）——因此，接入品牌套件后，同一模板就能为任何用户渲染出符合品牌风格的内容。

2. 选择符合惯例的格式

不要发明新格式。从以下格式中选择一种——它们都已在 TikTok 上验证有效，并且能与 HyperFrames 清晰对应：

格式	适用场景	结构
POV	让人产生共鸣的角色痛点	“POV：你是一名[角色]” → 痛点 → 揭晓产品的包袱
公开构建	创始人／早期发布	“我因为 Z，在 Y 天内构建了 X” → 快速演示 → 结果
反主流观点	鲜明观点、创建品类	“大家都说 X。他们错了，因为 Y” → 演示
之前／之后	改进工作流	“这以前要花 4 小时” → 切镜 → “现在只要 30 秒”
列表悬念	展示多项功能	“关于 [工具] 的 3 件没人提过的事” → 1、2、3 → CTA

选一种。写稿前先向用户确认。

3. 撰写脚本（TikTok 语法）

写节拍表，不要写散文。每个节拍对应一张卡片或一个时刻。要求：

• 总时长：9–22 秒。除非用户明确要求更长，否则默认 15 秒。
• 节拍 1（0.0–1.0 秒）：钩子。大字。不要放 Logo。不要开场。必须让观众停下来。
• 节拍 2–N：每个约 1.0–2.5 秒。每个节拍都要值得占用时间，否则就删掉。
• 最后一个节拍（最后 1.5–2 秒）：CTA。使用明确的动词。不要写“了解更多”，而要写“在 TikTok 搜索 [名称]”、“评论 WAITLIST”或“点击链接”。
• 字幕：每个口播词都要烧录为文本。每张字幕卡最多 6 个词。
• 语气／风格：第一人称、对话式，不要用营销腔。大声读出来——如果听起来像新闻稿，就重写。

把节拍表交给用户，并在开始创作前等待确认。进行一轮修改很正常。

4. 搭建 HyperFrames 项目

使用 CLI。不要尝试手动编写 package.json。

# In the user's working directory, or a videos/ subdirectory if they prefer
npx -y hyperframes@latest init <product-slug>-tiktok --yes
cd <product-slug>-tiktok

这会创建 index.html、meta.json、hyperframes.json，以及包含框架规则的 CLAUDE.md／AGENTS.md。阅读一次 CLAUDE.md——其中记录了此技能所依赖的 data-* 属性约定和 window.__timelines 注册方式。

5. 合成视频（9:16，动感十足）

编辑 index.html，制作 1080×1920 的合成画面。下面的模式是满足 TikTok 原生风格的最低可行合成方案——调整文案，保留结构。

关键规则（这些来自 HyperFrames，不要跳过）：

• 每个定时元素都需要 class="clip"，以及 data-start、data-duration、data-track-index。
• 合成根元素需要 data-composition-id、data-width、data-height、data-duration。
• 动画要放在已暂停的 GSAP 时间轴上，并注册为 window.__timelines["<composition-id>"]。
• 不要使用 Date.now()、Math.random() 或 fetch()——渲染必须具有确定性。

参考合成方案：见 references/composition-template.html。

以下是一些需要遵循的 TikTok 专属样式规则：

• 字体：钩子用 110–160px，正文字幕用 70–90px。加粗，字间距紧凑。
• 安全区域：底部 320px 和顶部 220px 保持空白——TikTok 的 UI 会占据这些区域。
• 颜色：高对比度。黑色背景 + 白色文字 + 一种强调色（青色、青柠色或洋红色）。避免柔和的粉彩色。
• 动效：每张卡片进场时都要添加 0.25–0.4 秒的 y 或 scale 补间动画。使用硬切，不要交叉淡化。
• 避免素材感：如果脚本要求“演示”，就捕获产品的实际 UI（hyperframes capture <url>），并将其裁切到 9:16 画面中，而不是使用通用素材片段。

6. 检查

npx hyperframes lint

修复所有错误。警告通常可以安全忽略，但要先阅读。

7. 渲染

npx hyperframes render --output launch.mp4

15 秒的合成视频通常需要 30–90 秒渲染，具体取决于机器。输出格式为 H.264 MP4，分辨率为 1080×1920，帧率为 30fps。

8. 完成前进行检查

打开文件，完整浏览一遍。然后检查：

• 钩子是否在 0.8s 内完整呈现？
• 字幕在观看尺寸（手机、静音）下是否清晰可读？
• 底部 320px 区域是否没有重要内容？
• 结尾的 CTA 是否至少显示 1.5s？
• 总时长是否在 9 到 22 秒之间？

如果任何一项不符合，就进行编辑并重新渲染。不要发布不符合上述任何要求的视频。

9. （可选）交付给 TikTok Ads

如果用户想将其用作付费信息流广告（而非自然发布），请使用 TikTok Ads MCP 搭建广告系列框架。不要自动启动。

tiktok_ads__tool_list_advertisers
tiktok_ads__tool_get_pixels(advertiser_id)              # confirm tracking
tiktok_ads__tool_create_campaign(...)                   # objective: TRAFFIC or VIDEO_VIEWS, status: DISABLE
tiktok_ads__tool_create_ad_group(...)                   # placement: TIKTOK only; daily budget; status: DISABLE
# Upload the rendered MP4 manually in TikTok Ads Manager — the MCP doesn't currently
# upload creatives. Then:
tiktok_ads__tool_create_ad(...)                         # status: DISABLE

所有实体都应创建为 DISABLE。打印摘要，并准确告知用户：审核创意后，需要在 TikTok Ads Manager 中启用哪些 ID。

对于自然发布：只需将 launch.mp4 交给用户，并告知他们通过 TikTok 应用上传（自然发布不支持通过 API 上传）。

输出格式

完成后，打印：

1. 渲染后 MP4 的路径
2. 使用的节拍表（方便用户迭代）
3. 一行摘要，说明时长、所选格式和宽高比 4.（如适用）以 DISABLE 状态创建的 TikTok Ads 广告系列／广告组／广告 ID

常见错误

1. 将 16:9 素材拉伸到 9:16 — 重新拍摄或使用 HyperFrames 叠加层。不要拉伸。
2. Logo 片头 — TikTok 会惩罚任何看起来像电视广告的内容。钩子就是第一帧。
3. 没有字幕的旁白 — TikTok 上 80% 以上的视频是在静音状态下观看的。没有字幕就等于不存在。
4. 泛泛的 CTA — “了解更多”在 TikTok 上从来不起作用。明确告诉观众下一步要做什么。
5. 过度渲染 — 输出 4K 毫无意义；TikTok 无论如何都会重新压缩到约 720p。
6. 只在结尾放 CTA — 到那时一半观众已经离开了。还要在约 60% 的播放时长处重申优惠。

相关内容

• /reddit-launch-video — Reddit 常用格式的相同模式
• /linkedin-launch-video — 适用于 LinkedIn
• /video-to-gif — 将渲染后的 MP4 转换成适合信息流的 GIF
• /ad-copy-writer — 生成随视频发布的标题／文案