社交视频格式器

社交视频格式器 是做什么的？

你拿到的视频已经制作完成——故事、动态和品牌都已就绪——你需要让它在信息流中也能完美展示。这与制作视频是两码事。在笔记本电脑上看起来很棒的水平演示在竖屏信息流中毫无效果：会被强行加上黑边变成一条窄带，字幕会跑到 UI 按钮下面，首帧是黑色，并且不会循环播放。本技能能一次性解决这五个问题，针对每个平台，并提供“机械包”所需的确切规格。

这是关于“品味”的层面。它与 remotion-video-production 包配合使用：你在此处决定重新构图、安全区域、字幕样式和循环方式，然后将具体规格交给 remotion-compose（用于创作新的 <Composition> 宽高并烧录字幕）和 remotion-render（用于按平台导出）。不要在此处编写合成代码或执行渲染——只需命名规格并延迟处理。

当收到任何关于重新构图、调整大小、裁剪、竖屏化、添加字幕、添加副标题，或“为社交媒体格式化/导出”的请求，或提及特定平台（TikTok、Reels、Shorts、X/Twitter、LinkedIn），甚至仅仅是“让这个在手机上也能看”时，应立即触发此技能。

工作流程

请按顺序执行。先重新构图，再添加字幕（字幕安全区域取决于新的宽高比），并在将任务移交给渲染之前，设计好首帧和循环方式。

步骤 1 - 确定目标平台并获取其规格

询问需要发布到哪些平台，然后从 references/platform-specs 的表格中提取每个平台的硬性约束。每个平台需要四个参数：宽高比、分辨率、最大时长和安全区域边距（平台 UI 元素——用户名、字幕、操作栏、进度条——覆盖的像素区域）。永远不要猜测这些数值；一个位于操作栏缝隙内的字幕在设备上是不可见的，但在预览中却可能显示正常。一个源视频通常会拆分为两到三个导出版本（例如，一个 9:16 的主版本用于 TikTok/Reels/Shorts，再加上一个 1:1 或 16:9 的版本用于 LinkedIn/X）。

步骤 2 - 选择重新构图策略（9:16 ↔ 16:9）

裁剪会决定哪些像素被保留，因此主体必须始终位于新的画面内。为每个导出版本选择一种策略——参见 references/reframe-strategies：

• 重新布局（最佳）。 不要裁剪 16:9 的像素——直接为新画布重新创作场景：将并排的内容堆叠起来，放大文字，将主体移动到垂直中心。这是一个 remotion-compose 的变更事项（新的宽/高，相同的内容），而且效果总是优于裁剪。将目标尺寸交给它处理。
• 中心裁剪。 保留 16:9 画面的中间列以生成 9:16。速度快，但会丢弃外侧的三分之一画面——只有当主体居中时才安全。
• 填充 / 模糊背景。 将整个 16:9 画面适配到 9:16 中，并使用模糊的缩放副本填充顶部/底部。适用于说话人头部特写或屏幕录制；但在动态设计作品中显得粗糙。
• 跟随裁剪。 裁剪到主体，并随时间移动裁剪窗口以跟随动作。效果最强，工作量最大；需要为 remotion-compose 指定关键帧。

从 9:16 转换为 16:9 是同样的逻辑，反向操作：重新布局以利用新的水平空间，而不是将竖屏片段垂直信箱化嵌入横屏画面中。

步骤 3 - 将安全区域映射到新画布上

对于每个导出版本，叠加平台的安全区域边距，并确保所有关键元素（字幕、Logo、行动号召按钮、主要主体）都位于安全矩形内。右侧/底部的边距（操作栏 + 字幕块）通常是 9:16 画面的主要问题。运行下面的 safe_area.js 工具，将百分比边距转换为针对你具体分辨率的像素框，然后将这些数值传递给 remotion-compose 作为布局边界。将不安全区域视为禁区，任何需要被阅读的内容都不得放置其中。

步骤 4 - 设计平台原生的首帧

首帧既是缩略图，也是阻止用户滑过的关键；自动播放默认静音，因此第 0 帧必须在不借助音频的情况下传达信息。不要从黑色画面、Logo 出场或渐变动画开始。以一个可读的钩子开始：最终效果、一个醒目的字幕行，或者主体已经出现在屏幕上。这是对 intro 场景（或添加一个 1-2 秒的预置钩子）进行的 remotion-compose 编辑。明确指定第 0 帧显示的内容。

步骤 5 - 指定内嵌字幕

假设播放是静音的：字幕是强制性的，而非可选项，并且必须内嵌（渲染到像素中），因为上传的 .srt 侧边字幕文件在不同平台上不一致且无法自定义样式。为 remotion-compose 指定：位置（在安全区域内，通常是下部三分之一处，但在字幕栏边距之上）、样式（大号、高对比度、半粗体，加描边或实心底衬以确保在任何背景上清晰可读）、时间轴（与语音同步的词组级别分块，而非大量文字），并且任何时刻屏幕上不超过约 2 行字幕。对于逐字逐词动画的字幕，将动态设计留给 kinetic-typography 处理，此处只需指定安全区域框和时间轴。

步骤 6 - 设计循环方式

信息流会立即重播视频片段，因此干净的循环可以成倍增加观看时长。选择一种方式：

• 无缝循环 - 最后一帧与第一帧匹配（相同的构图、位置、颜色），使得重播时无法察觉。最适合短时长氛围感/品牌循环。
• 回钩循环 - 以一句话结尾，引导观众回到开头（“…这是第一步”），使重放具有目的性。
• 硬停 - 一个明确的行动号召结束卡；适用于较长叙事片段，因为循环会让其感觉支离破碎。

对于无缝循环，开头和结尾是一个 remotion-compose 的约束条件（匹配第 0 帧和最后一帧）。指定循环类型以及需要匹配的帧。

步骤 7 - 输出导出规格并移交任务

填写下方的 export-spec 模板——每个平台一个块。该规格是给机械包的简报：remotion-compose 根据每个宽高比创作 <Composition>，包含安全区域布局、首帧和内嵌字幕；然后 remotion-render 导出每个版本（一个 9:16 的导出就是一个在 1080×1920 下创作的 Composition，遵循 remotion-render 的竖屏预设）。不要在此处执行渲染——只需交付规格。

质量标准

只有当以下所有条件都满足时，一个导出版本才能被评为 A+：

• 每个平台导出都指明了真实的宽高比、分辨率、最大时长和安全区域框——均从规格表中提取，而非猜测。
• 在任何目标平台上，没有关键元素（字幕、Logo、行动号召按钮、主体）位于不安全的边距内；已根据 safe_area.js 的框进行验证。
• 重新构图是重新布局或跟踪裁剪（否则主体会丢失）——而非在动态作品上盲目地进行中心裁剪或懒人模糊背景填充。
• 第 0 帧在静音状态下可读：钩子、结果或主体——绝不是黑色画面、裸露的 Logo 或渐变中途。
• 字幕已内嵌，位于安全区域内，按词组分块，不超过 2 行，高对比度。
• 循环类型是刻意选择的，并且无缝循环的首帧/尾帧已被指定为匹配。
• 输出是一个交给 remotion-compose / remotion-render 的规格——本技能未编写任何合成代码，也未执行任何渲染。

禁止事项

• 不要在这里搭建项目、编写合成代码或执行渲染——命名规格，交由 remotion-setup / remotion-compose / remotion-render 处理。
• 当主体未居中时，不要将 16:9 源素材中心裁剪为 9:16；你会把主体裁掉。应改用重新布局或跟踪裁剪。
• 不要将字幕、行动号召按钮或 Logo 放置在右侧/底部的边距中，因为平台的操栏和字幕块会将其覆盖。
• 不要依赖上传的 .srt/.vtt 侧边字幕文件；将其内嵌到像素中，以确保始终渲染并让你控制样式。
• 不要以黑色画面、Logo 出场或渐变来开始——第 0 帧是缩略图。
• 不要向每个平台都提交一个 16:9 文件；竖屏信息流会将其信箱化为一窄条。应根据宽高比分别导出。
• 不要超过平台的最大时长，以为“还能发布”——视频会被截断或拒绝；应在剪辑阶段将其修剪到限制之内。
• 不要在此处设计逐字动画字幕——那是 kinetic-typography 的职责；只需指定安全框和时间轴。
• 不要在此处规划故事板或镜头顺序——如果视频还不存在，那是 video-storyboard 的职责；本技能处理的是已经剪辑好的视频。
• 不要在此处调整元素的运动方式（缓动、间距、随动）——那是 motion-design-principles 的职责；本技能仅命名新画布和边界。
• 不要在此处为重新构图选择调色板、对比度或光照——将这些选择留给 motion-color-and-light。
• 不要在此处指导产品演示内容或屏幕编排——那是 product-demo-director 的职责；本技能假设内容已锁定。
• 不要在此处设计配乐、节拍同步或声音——字幕已假定静音自动播放场景，但音频是 sound-and-music-sync 的职责。

相关技能

这是视频包中的一个工艺技能；当请求实际上是关于其他技能关注点时应延迟处理，并将格式规格交给机械技能：

• video-storyboard - 在视频存在之前规划节拍和镜头顺序。位于本技能之前。
• product-demo-director - 指导演示内容和屏幕编排。
• motion-design-principles - 动画的缓动、间距和动态工艺；在为一个新的宽高比重新布局画面时依赖它。
• motion-color-and-light - 调色板、对比度和光照决策。
• kinetic-typography - 逐字动画字幕的动态（你命名安全框和时间轴；它设计动画）。
• sound-and-music-sync - 配乐和节拍同步；本技能故意不触及的音频层。
• remotion-compose / remotion-render - 消费本技能导出规格的机械部分，用于创作基于宽高比的 <Composition> 并导出 MP4。

计算工具

自包含的 Node 脚本。保存为 safe_area.js 并用 node safe_area.js 运行。它将每个平台的百分比安全区域边距转换为该平台分辨率的像素框，以便你能够将精确的布局边界交给 remotion-compose。无依赖。根据规格变化编辑 platforms 块。

// 社交媒体安全区域计算器。运行: node safe_area.js
// 边距是每个边缘被平台 UI 覆盖的百分比（上/右/下/左）。
// 右侧和底部在 9:16 画面上较大，因为有操作栏和字幕块。
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X（信息流内）', w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    '安全框 -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

运行示例输出

TikTok         1080x1920   安全框 -> x:32   y:115  w:929   h:1479
Reels          1080x1920   安全框 -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   安全框 -> x:32   y:96   w:918   h:1574
X（信息流内） 1080x1080   安全框 -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   安全框 -> x:43   y:54   w:994   h:1161

解读：在 TikTok 上，将所有必须阅读的元素布局在 x 32→961, y 115→1594 的范围内。右侧边距（操作栏：点赞、评论、分享）占据了最后约 119px，底部（用户名+字幕）占据了约 326px——该区域内的内容在设备上会被覆盖，尽管在 Studio 预览中看起来正常。将这些作为布局边界传递给 remotion-compose；在 1080×1920 的竖屏 Composition 上，将字幕和行动号召按钮定位在框内，而不是画面原始边缘上。

模板：export-spec

每个平台填写一个块。这是 remotion-compose 和 remotion-render 使用的简报——从 safe_area.js 中粘贴安全区域数值。

社交媒体导出规格。 [填写：视频名称]。源素材： [填写：16:9 主版本, 1920x1080]

平台： [填写：TikTok / Reels / Shorts / X / LinkedIn]
  宽高比 / 分辨率：   [填写：9:16 / 1080x1920]
  最大时长：          [填写：例如 <= 60s 信息流内]
  安全框（像素）：    x:[填写] y:[填写] w:[填写] h:[填写]   （来自 safe_area.js）
  重新构图策略：      [填写：重新布局 / 中心裁剪 / 模糊背景 / 跟随裁剪]
    -> remotion-compose： [填写：新的 Composition WxH + 布局说明 / 裁剪关键帧]
  首帧（第 0 帧）：   [填写：第 0 帧显示的静音钩子——绝不能是黑色/Logo/渐变]
  字幕：              内嵌, [填写：安全框中的位置], <=2 行,
                       按词组分块, [填写：样式 - 大小/对比度/底衬]
  循环：              [填写：无缝 / 回钩 / 硬停]
    -> 如果无缝：      第 0 帧与最后一帧在 [填写：位置/颜色] 处匹配
  渲染：              remotion-render [填写：预设, 例如 1080x1920 H.264 MP4]

（为每个目标平台重复此块）

references/platform-specs

在发布前，根据每个平台当前的创作者文档进行验证；以下为稳定形态，但限制可能会有变化。宽高比和安全区域比确切的最大时长更重要。

• TikTok - 9:16, 1080x1920。信息流内的最优点为短时长（约<60s），上传可运行更长时间。右侧操作栏和底部字幕块较大；需将必读内容放在高且居中的位置。注重有声文化，但仍需为无障碍和静音自动播放添加字幕。
• Instagram Reels - 9:16, 1080x1920。最长约 90s。右侧/底部 UI 与 TikTok 类似，底部还有个人资料/音频行。信息网格内的裁剪是 1:1，因此中心部分必须也能作为方形缩略图阅读。
• YouTube Shorts - 9:16, 1080x1920。最长 60s（任何…

……[为翻译截断]