专业动态图形 (V2 架构) 是做什么的？
构建清晰、确定性、工作室级的动态图形视频，使其看起来像由资深技术动态导演精心制作。此技能强制实施严格的反污泥视觉标准、数学物理原理、多引擎路由以及端到端的 10 阶段制作流水线。
何时激活此技能
- 生成程序化视频代码 (Remotion / React, HTML/CSS/SVG + GSAP, 或 HTML5 Canvas)。
- 构建视频类别：社媒 Reels/Shorts (
9:16)、品牌宣传片 (16:9/1:1)、SaaS 产品发布、UI 微演示、电影级动态文字或技术讲解视频。 - 重构看起来像“AI 污泥”（模糊的模糊斑点、霓虹网格辉光、通用渐变、无锚点的 CSS 淡入淡出、机械的线性缓动）的动画。
- 在编写代码之前规划帧精确的故事板、数学时序和音效同步。
模型执行规则 (针对 Sonnet & Haiku 优化)
- 数值优于形容词：将所有美学意图直接转换为精确的数值标记（帧数、弹簧的
stiffness/damping、cubic-bezier 曲线、8px 网格增量以及十六进制/OKLCH 颜色）。绝不使用模糊的形容词来描述视觉呈现。 - 确定性帧数学：每个动画必须严格由
frame变量或显式时间线progress($0.0 \to 1.0$) 驱动。绝不使用未预设种子的Math.random()、setTimeout或在渲染期间可能不同步的无锚点 CSSinfinite关键帧。 - 仅使用 GPU 安全属性：对
transform(translate3d,scale,rotate)、opacity、clip-path或 SVGstroke-dashoffset进行动画。绝不逐帧动画width、height、top、left或重度filter: blur()。 - React Hooks 使用规范：在 Remotion 中，
spring()是一个纯计算函数。切勿在数学辅助函数前添加use前缀（例如，使用getStaggerSpringProgress()，而不是useStaggerSpring()），以避免在.map()循环中违反 React 的 Hooks 规则。
多引擎路由矩阵
在生成项目代码前，请根据 多引擎选择指南 评估需求：
- 引擎 A：Remotion (React)：最适合复杂的 UI 模拟、SaaS 发布、模块化多场景视频、数据驱动型 Reels 以及帧精确的 CLI 渲染。
- 引擎 B：HTML/CSS/SVG + GSAP：最适合动态文字、编辑型品牌宣言、SVG 标志描边动画以及轻量级浏览器播放。请参阅 GSAP 模式。
- 引擎 C：HTML5 Canvas：最适合程序化图形、粒子网络、数学动画和生成式视觉效果。
10 阶段视频制作流水线
对于每个项目，请遵循以下顺序阶段：
阶段 1：理解需求
确定目标平台、宽高比、时长 ($t$)、FPS、核心信息、视觉风格和可用素材。仅提出必要的缺失问题（最多 4 个要点）。如果细节未指定，则应用工作室默认值：
- 宽高比：桌面/网页为
16:9(1920x1080)；社媒为9:16(1080x1920)。 - 帧率：UI 和社媒为
60fps；编辑和讲解视频为30fps；电影级文字为24fps。
阶段 2：分类路由
将请求映射到 分类剧本 中的 6 个分类蓝图之一：
- 类别 A：社媒 Reels、TikToks 和 Shorts (
9:16, 60fps, 12s–30s) - 类别 B：品牌宣传与宣言 (
16:9/1:1, 30fps, 20s–45s) - 类别 C：SaaS 产品发布视频 (
16:9, 60fps, 45s–90s) - 类别 D：功能亮点 / UI 微演示 (
1:1/4:5, 60fps, 10s–25s) - 类别 E：电影级动态文字 (
16:9/9:16, 24/30fps, 15s–45s) - 类别 F：讲解与教育视频 (
16:9, 30/60fps, 45s–120s)。详见 讲解视频剧本。
阶段 3：资产发现与验证
收集真实的品牌资产（标志、UI 截图、字体、调色板）。
- 保持真实品牌标志的完整性，不扭曲宽高比。
- 在提供了真实产品截图的情况下，绝不使用虚构的占位符 UI 替换它们。
- 使用
scripts/check-assets验证资产路径。
阶段 4：故事板规划与数学时序
构建一个显式的时间线表格，根据秒数和 FPS 计算帧数： $$\text{frame} = \text{round}(t \times fps)$$ 定义场景开始/结束时间、视觉描述、摄影机过渡和音频提示。确保场景时长与总目标时长匹配，避免意外重叠。
阶段 5：集中式设计系统 (BRAND_CONFIG)
在编写场景 JSX/HTML 之前建立设计令牌：
- 颜色：从 反污泥规则 中选择一个精选系统（瑞士技术深色、编辑暖纸或动态单色）。
- 排版：遵循 排版指南（显示字体使用负字间距
-0.04em+ 等宽元数据使用正字间距+0.08em+tabular-nums）。 - 几何：强制实施同心圆角数学：$R_{inner} = \max(0, R_{outer} - Padding)$。
阶段 6：模块化生产代码
根据 templates/ 中选择的引擎模板生成干净、模块化的代码：
templates/remotion-starter/：模块化 Remotion 合成，包含config.ts、motion.ts和组件。templates/gsap-starter/：帧确定性的 GSAP 时间线设置。templates/canvas-starter/：程序化 2D Canvas 绘制循环。 使用scripts/validate-project验证结构。
阶段 7：音频与音效设计
根据 音频设计指南 集成音频层：
- 在语音旁白期间，将背景音乐音量降低 12–16dB。
- 将过渡音效对齐到视觉中点前 2 帧；将撞击声对齐到确切的视觉接触帧。
- 确保所有音乐均为免版税/已获得商业使用许可。
阶段 8：渲染与编码
使用高质量确定性设置进行渲染：
# Remotion 高质量网页 MP4 (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18
阶段 9：视觉质量保证
执行 视频质量检查清单：
- 在总时长的 25%、50%、75% 和 100% 处渲染静帧预览（
npx remotion still ... --frame=N）。 - 检查文本裁剪、8px 网格对齐、对比度比例和安全区（
9:16顶部 220px / 底部 340px）。 - 使用
scripts/inspect-output out/video.mp4验证最终视频输出。
阶段 10：交付与交接
提供：
- 渲染后的视频输出文件（或精确的可复现渲染命令）。
- 符合模板架构的干净源代码项目。
- 引用的资产组织在
public/目录下。 - 运行说明和验证日志。
强制性质量门禁
在结束任何动态图形任务之前，请验证：
- 没有通用的
filter: blur()斑点或紫蓝色 AI 渐变。 - 没有违反 React Hooks 规则（使用纯辅助函数，如
getStaggerSpringProgress）。 - 所有动画均由
frame或归一化的progress确定性地驱动。 -
node scripts/validate-project.js <project-dir>退出码为 0。 -
node scripts/check-assets.js <project-dir>退出码为 0。 - 通过
node scripts/inspect-output.js <output-path>验证渲染输出。