video-producer

使用场景

当用户提供视频简报——包含多个场景或叙事弧线的完整视频描述时，使用此技能。

触发条件：“创建宣传视频”、“制作产品演示”、“我需要一则 30 秒的广告”、“制作社交媒体动画”，或任何描述多场景视频的提示。

请勿用于：

• 单个动画效果 → 使用 gsap-animation
• 视觉背景组件 → 使用 react-animation
• 非视频任务

技能关系

video-producer (this skill)       ← orchestration: what story, which scenes
├── gsap-animation                ← animation: text splits, SVG drawing, timeline orchestration
├── spring-animation              ← physics: bouncy entrances, elastic trails, organic motion
├── react-animation               ← visuals: Aurora, Silk, particles, grain
└── Remotion                      ← engine: rendering, composition, sequences

工作流

初始请求：$ARGUMENTS

阶段 1：收集简报

从用户请求中提取信息。对于任何缺失的必填字段，使用 AskUserQuestion 询问用户。

字段	必填	默认值	示例
产品 / 品牌名称	是	—	"Topview"
视频类型	是	SaaS Promo	SaaS Promo / Typographic / Social Overlay
核心信息（2-4 条）	是	—	"AI-powered editing", "No coding required"
情感基调	是	—	紧迫 / 安心 / 激动 / 专业 / 叛逆 / 温暖 / 活泼
记忆锚点	是	—	"观众在 30 秒后仍会记住的那张图片"
目标受众	否	通用	"开发者", "营销人员"
时长	否	模板默认值	"25 秒"
分辨率	否	1920x1080	方形视频使用 1080x1080
FPS	否	30	社交媒体使用 60
视觉风格	否	Apple Minimal	Apple Minimal / Bold Typography / Dark Tech / Warm Organic / Retro Pop / Editorial Mono
CTA 文案	否	无	"Start Creating →"
强调色	否	取自风格预设	"#FF7D00"

情感基调决定动画技术的选择、弹簧配置和节奏：

• 紧迫 → SPRING.stiff + GSAP 硬切，快速交错（2-3 帧），GSAP 场景使用 power3.out
• 安心 → SPRING.smooth / SPRING.gentle，高阻尼，缓慢呈现，暖色调
• 激动 → SPRING.bouncy / SPRING.pop，低阻尼，高饱和色彩，SpringTrail 弹出效果
• 专业 → SPRING.snappy / SPRING.smooth，节奏沉稳，动效简洁，充分停留
• 叛逆 → 混合使用 SPRING.stiff + SPRING.rubber，GSAP 故障效果，不规则交错
• 温暖 → SPRING.gentle / SPRING.molasses，暖色渐变，圆润形状，缓慢交错（6-8 帧）
• 活泼 → SPRING.wobbly / SPRING.rubber，极度过冲，GridStagger 从中心向外，明亮点缀色

记忆锚点——观众会截图或记住的那一个视觉瞬间。所有制作决策都应强化这个锚点。询问：“如果有人向朋友描述这段视频，他们会描述哪幅画面？”

阶段 2：规划

1. 根据视频类型选择叙事模板 → 参见 rules/narrative-templates.md
2. 选择视觉风格 → 参见 rules/style-presets.md
3. 将用户的信息映射到所选模板中的场景位置
4. 为每个场景选择动画模式 → 参见 rules/scene-patterns.md
5. 将计划整理成表格并展示给用户：

Scene | Duration | Pattern        | Content
1     | 3s       | TitleCard      | "Topview is powerful"
2     | 3s       | CardFlip3D     | CLI pain → AI solution
...

继续之前，等待用户确认。

阶段 3：搭建项目脚手架

生成标准 Remotion 项目结构 → 参见 rules/project-scaffold.md：

1. src/config.ts — 所有参数（颜色、排版、场景帧数）
2. src/Root.tsx — 合成注册
3. src/Composition.tsx — 包含所有场景的 TransitionSeries
4. src/components/ — 共享组件（背景等）
5. src/scenes/ — 每个场景一个文件

帧数计算： sceneFrames = Math.ceil(sceneDurationSeconds * fps)

阶段 4：场景实现与评估

按顺序实现各个场景。每个场景在进入下一个场景前，都要完成一个构建 → 验证 → 修复循环。→ 完整评分标准和自动修复规则请参见 rules/scene-evaluator.md。

对于每个场景：

步骤 4a：实现场景

1. 创建 src/scenes/SceneN_Name.tsx
2. 选择合适的技术：
   • 文本拆分 / SVG 绘制 / 复杂时间线 → 使用 useGSAPTimeline 或 useGSAPWithFonts（来自 gsap-animation skill）
   • 弹跳 / 弹性入场 / 弹簧轨迹 / 超调效果 → 使用 spring() + 预设（来自 spring-animation skill）
   • 简单淡入淡出 / 滑动 / 线性计数器 → 使用 Remotion 原生 interpolate()
   • 视觉背景 → 使用 react-animation 组件
3. 应用计划中选定的动画模式
4. 接入 Composition.tsx，并在 Root.tsx 中注册预览

步骤 4b：渲染静帧

截取两个关键帧以便进行视觉检查：

# Entry frame — catches early layout, initial positions
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_entry.png --frame={floor(SCENE_FRAMES.sceneN * 0.15)}

# Peak frame — hero moment, all entrances settled
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_peak.png --frame={floor(SCENE_FRAMES.sceneN * 0.60)}

步骤 4c：评估

阅读场景代码、config.ts 和渲染后的截图。根据 7 个加权维度评分（反模式合规性、排版、色彩与对比度、动画设计、构图、叙事连贯性、技术正确性）。

• 评分 >= 7.0 且未触发即时失败 → 通过，继续下一个场景
• 评分 < 7.0 或触发即时失败 → 进入步骤 4d

步骤 4d：自动修复（最多 2 次迭代）

根据 rules/scene-evaluator.md 中的扣分项 → 修复映射表，进行有针对性的修复。每项扣分都对应一个具体的代码更改，而非笼统建议。修复后：

• 返回步骤 4b（重新渲染静帧并重新评分）
• 第 2 次迭代后，若评分仍低于阈值：发出 WARNING，然后继续下一个场景

跨场景跟踪： 持续记录各场景使用的强调色、弹簧预设、入场方向和技术。从场景 3 开始，检查多样性问题（例如，连续 3 次使用同一预设、入场方向相同等）。

所有场景完成后： 进入阶段 5 之前，输出完整的评估汇总表，列出各场景的评分、迭代次数和跨场景备注。

模式选择原则： 对受物理规律驱动的弹跳 / 超调运动使用 spring()。对 SplitText、DrawSVG、MorphSVG 和复杂时间线编排使用 GSAP。对简单的线性 / 缓动运动使用 interpolate()。

阶段 5：渲染

# Standard MP4
npx remotion render src/index.ts MainVideo --output out/video.mp4

# High quality
npx remotion render src/index.ts MainVideo --codec h264 --crf 15

# Transparent background (social overlays)
npx remotion render src/index.ts MainVideo --codec prores --prores-profile 4444
npx remotion render src/index.ts MainVideo --codec vp9 --output out/overlay.webm

格式	Alpha 通道	用途
MP4 H.264	否	通用播放
ProRes 4444	是	专业合成
WebM VP9	是	网页叠加层

复杂度校准

让实现复杂度与情绪基调和视觉风格相匹配。动画投入的精力应服务于创意愿景，既不能喧宾夺主，也不能力度不足。

基调 × 风格	节奏	弹簧预设	GSAP 用法	停留时长
紧迫 + 醒目排版	快（场景时长 1.5-2.5s）	stiff（错开：2f）	charCascade、硬切转场	短（0.5s）
令人振奋 + 暗黑科技	中快（2-3s）	bouncy / pop（错开：3f）	circleReveal 转场、DrawSVG	中（0.8s）
专业 + Apple 极简风	从容（3-4s）	smooth / snappy（错开：5f）	textReveal、SplitScreenComparison	长（1.2s）
温暖 + 温馨自然	缓慢（3-5s）	gentle / molasses（错开：8f）	尽量少用 GSAP，优先仅使用弹簧	长（1.5s）
叛逆 + 复古波普	不规则	交替使用 stiff + rubber	ScrambleText、故障效果	可变
活泼 + 任意风格	弹跳（2-3s）	wobbly / pop（错开：3f）	尽量少用 GSAP，使用 SpringTrail + GridStagger	中（0.8s）

原则： 完美呈现一个标志性转场，比使用六种平庸的效果更有冲击力。将动画预算投入到令人印象深刻的关键时刻。

避免臃肿的规则： 每个场景应只采用一种主要动画技术：

• 弹簧主导：所有动效都使用 spring() + interpolate()（弹跳入场、轨迹、计数器）
• GSAP 主导：使用 useGSAPTimeline 处理文本拆分、SVG 操作和复杂编排
• 混合：用弹簧实现元素入场，用 GSAP 拆分该元素中的文本（可接受）
• 绝不：在一个场景中同时使用 GSAP 时间轴、弹簧物理效果、react-animation 背景和复杂插值

弹簧优先原则： 默认使用 spring() 实现所有入场、退场和错开动画。只有在确实需要 SplitText、DrawSVG、MorphSVG、ScrambleText 或复杂时间轴标签时，才添加 GSAP。弹簧更轻量，无需额外依赖，而且能产生自然流畅的动效。

创意方向原则

每个视频都必须有自己的立场。 缺乏鲜明美学主张的“简洁、专业”视频，只会显得平平无奇。要做出具体、大胆的选择：

• 一种主导色（而不是 5 种权重相同的柔和色）
• 一款有个性的字体（而不是 Google Fonts 的第一个搜索结果）
• 一种会在多个场景中重复出现的动态标志（相同的缓动曲线、相同的入场方向、相同的停留节奏）
• 一条打破预期的空间规则（例如，所有文本都左对齐并位于 20% 处、不对称面板、对角网格）

记忆度测试： 确定方案前，先问自己：“如果把这个视频和另外 10 个 AI 生成的宣传视频放在一起，我的视频是否会显得与众不同？”如果不会，就进一步强化美学风格。

快速决策参考

“我需要……”	使用
粗体文字入场（字符拆分）	gsap：charCascade / textReveal effect
粗体文字入场（弹跳词语）	spring：WordTrail / CharacterTrail
并排对比	gsap：SplitScreenComparison template
卡片翻转揭示（平滑）	gsap：CardFlip3D template
卡片翻转揭示（弹簧物理效果）	spring：SpringCardFlip
元素从两侧入场	gsap：PerspectiveEntrance template
文字高亮	gsap：TextHighlightBox pattern
UI 点击模拟	gsap：CursorClick pattern
文字切换动画	gsap：RotateXTextSwap pattern
流动背景	react-animation：Aurora / Silk
胶片颗粒叠加效果	react-animation：NoiseOverlay
简单淡入 / 滑入	Remotion：interpolate()
数字计数器（线性）	Remotion：interpolate()
数字计数器（超调）	spring：SpringCounter
弹跳缩放入场	spring：ScalePop
列表 / 网格交错揭示	spring：SpringTrail / GridStagger
入场 + 退场动画	spring：useSpringEnterExit
顺序编排	spring：useSpringChain
打字效果	Remotion：.slice() + interpolate()
场景转场（擦除 / 光圈）	gsap：circleReveal / wipeIn effect
场景转场（弹簧滑动）	spring：SpringSlide / SpringCrossfade
Logo 描边绘制	gsap：DrawSVG + drawIn effect
功能网格弹入	spring：SpringFeatureGrid

---

强制变化

不同视频绝不能采用相同的美学风格。每个作品都必须像独特的创意作品，而不是套用模板。

• 轮换字体： 连续视频中绝不使用相同的展示字体。如果上次使用了 Space Grotesk，这次就选 Clash Display 或 Cabinet Grotesk。
• 轮换色温： 在暖色（橙色 / 珊瑚色 / 金色）和冷色（蓝色 / 紫罗兰色 / 翡翠绿）主色调之间交替。
• 轮换空间构图： 如果上个视频采用居中对称构图，这次就采用左侧锚定的不对称构图。
• 轮换动态风格： 在弹簧效果为主、线性机械风和有机流动风的动画理念之间变化。
• 轮换背景处理： 依次使用纯色、渐变色团、极光、颗粒纹理、几何图案。

差异化规则： 开始第 3 阶段前，在脑海中将计划采用的美学风格与“默认 AI 视频”进行比较——白色背景、居中的 Inter 文字、淡入转场、蓝色点缀。如果计划中有超过一项与这些特征相同，就进一步偏离默认风格。

---

创意追求

每个视频都应该让观众想要截取其中一帧并分享。这是动效设计的技艺，而不是模板拼装。

超越“实用”，追求“非凡”。尝试意想不到的字体搭配。试试让人觉得大胆冒险的配色。让某个场景打破网格。将记忆锚点时刻的动画投入加倍。

平淡无奇的宣传片与令人难忘的宣传片之间，差距不在于技术复杂度，而在于创作勇气。大胆做出选择，并精准地执行。