sanky369/vibe-building-skills

Remotion 脚本编写器

将视频目标（以及可选的代码库）转化为 Remotion 脚本 JSON —— 一个逐场景的规范，精确到足以让 Remotion Agent 无需追问即可实现。核心原则：脚本是渲染的唯一真相源 —— 每个时长、元素、动画和旁白均以数字和精确字符串表示，绝不用“大约5秒”或“一些介绍文本”这样模糊的描述。两个Agent在收到相同输入时，必须输出结构相同的脚本。

何时使用 / 何时不使用

• 当输出将使用 Remotion 以编程方式渲染时使用：Web 应用的产品演示、带有动画代码的编码教程、动态图形作品、数据可视化视频、短形式社交动画。
• 概念和节奏尚未为产品视频确定时 → 先运行 skills/creative/product-video；其节拍表将作为此技能的场景列表。
• 人物出镜视频 → skills/creative/talking-head（Remotion 不是正确的工具）。
• 静态图形 → skills/creative/social-graphics。
• 此技能仅编写脚本 —— 实现 React 组件、在 Remotion Studio 中预览以及渲染由 Remotion 自身的下游 Agent 技能完成。

规则文件 —— 编写脚本前请阅读

• rules/prompt-structure.md —— 构建脚本所需的输入字段（目标、目标受众、代码、视频类型、时长、风格、动画、转场）。在将输入规范化为输入对象时阅读。
• rules/script-generation.md —— 权威的输出 JSON 结构和生成指令。在输出脚本之前阅读；下面的纲要只是摘要，该文件才是契约。
• rules/animation-patterns.md —— 经过批准的动画/转场词汇表，包含精确的 JSON 形状和时序指南。在指定任何 animation 或 transitionToNextScene 值时阅读；不要发明此文件之外的动画类型。
• rules/scene-templates.md —— 针对常见情况（标题卡片、功能展示、代码讲解、数据可视化、结尾/CTA）的预制场景 JSON。当场景匹配已知模式时，从模板开始编辑。
• examples/product-demo-example.json —— 一个完整的示例脚本。阅读以校准粒度。

信息收集

一次性紧密询问，仅询问缺失的内容（字段名称见 rules/prompt-structure.md）：

1. 目标 和 目标受众 —— 视频应实现什么目标？面向谁？
2. 视频类型 —— product-demo | coding-tutorial | animation | data-visualization | social-media？
3. 时长（秒）和目标平台（决定宽/高/帧率）。
4. 代码 —— 代码库路径、仓库 URL 或代码片段（如果视频展示应用或代码）。
5. 风格 —— 视觉/品牌约束（颜色、字体、Logo；如果存在，可使用 skills/creative/creative-strategist 的风格指南）。

推理而不是询问：从代码库推断 language；从平台推断尺寸（横屏 1920×1080 默认，竖屏社交 1080×1920，帧率 30）；如果未指定，从 style 推断动画/转场偏好。不要卡住： 如果已知目标 + 视频类型 + 时长，则陈述假设并继续。

工作流程

1. 分析源材料

如果提供了 code，则进行探索：识别关键功能、用户流程、数据结构和值得展示的 UI 界面。根据与 goal 的相关性对功能进行排序 —— 视频展示前 3-5 个，而不是所有功能。如果没有代码，则从用户描述中提取等效列表。

2. 构建场景结构

根据 videoType 的决策规则：

• product-demo → 标题卡片 → 问题/背景 → 每个功能一个场景（前 3-5 个） → 结尾/CTA。
• coding-tutorial → 标题 → 概念设置 → 每个代码步骤一个场景（展示代码，然后解释） → 总结。
• data-visualization → 标题 → 背景 → 每个图表/洞察一个场景 → 要点。
• social-media → 钩子场景（≤3 秒） → 1-2 个效果场景 → CTA；总时长 ≤60 秒。
• animation → 从创意概念（或 skills/creative/product-video 的节拍表）推导节奏。

时长计算是强制性的：场景时长加上转场重叠必须精确等于 duration。TransitionSeries 转场会重叠相邻场景 —— 需考虑重叠，不要只相加时长。保持总时长在约 5 分钟以内（渲染性能启发式）。

3. 完整指定每个场景

对于每个场景，填写每个字段：sceneNumber、title、durationInSeconds、visuals.background、visuals.elements[]（类型、精确内容字符串、字体、字号、颜色、位置、来自 rules/animation-patterns.md 的 animation）、audio.voiceover（确切的句子 —— 验证其约以 2.5 字/秒的速度适合场景时长）、和 transitionToNextScene。当场景匹配时，使用 rules/scene-templates.md 中的模板。

4. 编译资产和技术要求

列出任何场景中引用的每个图像、视频剪辑、音频轨道、字体和Logo，放在 requiredAssets 中 —— 引用的任何内容都不能从列表中遗漏。资产生成超出范围：将每个标记为用户提供或精确描述；静态图像可通过 skills/creative/image-generation 生成（仓库管道：docs/creative_cli.py，模型 fal-ai/nano-banana-pro）。列出 remotionPackages（例如，使用转场时始终包含 @remotion/transitions）和任何第三方库。

5. 根据质量标准验证，然后交付 JSON

交付脚本以及交接备注（见下文）。下游 Remotion Agent 生成组件、设置合成、在 Studio 中预览并渲染。

必需输出格式

输出一个完全匹配 rules/script-generation.md 结构的 JSON 对象：

{
  "videoMetadata": {
    "title": "...", "durationInSeconds": 60,
    "width": 1920, "height": 1080, "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1, "title": "...", "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB or asset ref",
        "elements": [
          { "type": "text|image|code|chart", "content": "exact content",
            "animation": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "Exact spoken sentence(s)." },
      "transitionToNextScene": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

在 JSON 之后附加一个简短的 markdown 交接备注：总时长检查（显示场景计算）、你做出的 1-3 个假设，以及用户必须在渲染前提供的资产。

质量标准（交付前检查）

• 场景时长 + 转场重叠总和精确等于 videoMetadata.durationInSeconds；在交接备注中显示算术。
• 每个 animation 和转场 type 都存在于 rules/animation-patterns.md 中 —— 没有发明的类型。
• 每个旁白句子都适合其场景的时长（约 2.5 字/秒）；没有场景的视觉元素无旁白或标题陈述的目的。
• 场景中引用的每个资产都出现在 requiredAssets 中；文本元素使用的字体已列出。
• Remotion 正确性内置于规范：通过 useCurrentFrame() 实现基于帧的计时，使用 damping: 200 的弹簧实现揭示效果，通过字符串切片（而非逐字符不透明度）实现打字机效果，仅确定性随机（来自 remotion 的 random()，绝不使用 Math.random()），在重型序列上使用 premountFor，使用 <Sequence>/<Series>/<TransitionSeries> 进行排序。
• content 字段是最终文案，而不是像“此处放置功能描述”这样的占位符。
• 旁白是自动草稿 —— 在交接备注中标记用户可能需要完善它。

集成

• skills/creative/product-video → 输入：产品视频的概念 + 节拍表 + 关键帧；每个节拍成为一个场景。
• skills/creative/creative-strategist → 输入：应用于 visuals 和 style 的风格指南（颜色、字体、情绪）。
• skills/creative/original-design → 输入：设计语言简报；每个场景的视觉词汇必须来自该领域。
• skills/creative/image-generation → 产出：列在 requiredAssets.images 中的静态资产。
• skills/creative/social-graphics → 消费：渲染的静态图像/缩略图，用于发布资产。
• 下游：此仓库外部的 Remotion Agent 技能消费 JSON 以构建组件、预览和渲染。