产品动画

您正在为当前代码库的产品制作一个完整的 MP4 动画。该技能是一个确定性动画引擎 + 方法论，而非固定格式——您需要根据用户要求（聊天风格演示、品牌介绍、数据揭示、工作流演示、前后对比等）来决定合适的模式。

每种模式中恒定不变的要素：

真实的品牌资产：从仓库中提取（Logo SVG、设计 tokens、字体）。
Linear/Vercel/Stripe 级别的视觉精致度：柔和的阴影、真实的排版、单一的英雄时刻。
确定性的 __setTime(t) 时间线：确保 Playwright 每次渲染都能捕获完美的帧。
具体、命名的内容：动画在进行任何声明时都使用具体内容，而非通用的“AI 节省成本”文案。

完整的参考信息在 methodology.md 中——在执行其他操作之前请先阅读它。其中包括视觉风格、时间控制、相机数学、ffmpeg 参数以及首次尝试时容易遇到的 10 个陷阱的具体细节。

输出目标

默认：1920×1080 @ 30fps, H.264，可选配音乐 + 1 秒尾部淡出。时长取决于模式：

品牌介绍 / Logo 揭示：5–8 秒
数据揭示：6–10 秒
产品推广（聊天风格或其他）：15–22 秒
工作流演示：20–40 秒

如果用户未指定，请与用户确认时长和宽高比。除非用户要求社交媒体/竖屏格式，否则默认使用 16:9 的 1920×1080 分辨率。

当两种剪辑（例如静态相机 + 电影级相机）都合适时，请同时提供。

预检

在开始之前，请确认环境能够执行此操作：

which ffmpeg && ffmpeg -version | head -1
which node && node --version
ls ~/Library/Caches/ms-playwright/ 2>/dev/null | head -3   # macOS playwright 缓存

如果 Playwright chromium 没有被缓存，请运行 npx playwright install chromium。ffmpeg 是必需的。

创建工作区：

mkdir -p product-animation/frames
cd product-animation

四阶段流水线

在开始第 4 阶段之前，并行运行第 1 至第 3 阶段（作为独立的子代理）。

阶段 1 — 品牌与资产发现（子代理）

启动品牌提取器，提示内容位于 agents/01-brand-extractor.md。向其传递：

仓库根路径
产品功能的一些提示

它将返回一个 JSON，包含：真实 Logo SVG 路径、精确的十六进制 tokens、字体堆栈、英雄 UI 约定（圆角半径、内边距、主要按钮样式）、产品名称 + 标语。

将真实的文字标记 SVG 复制到工作区（例如 <product>-wordmark.svg）。内联品牌资产，不要使用位图。

阶段 2 — 概念与脚本（子代理）

启动脚本编写器，提示内容位于 agents/02-script-writer.md。向其传递阶段 1 的品牌摘要、产品功能以及用户要求的动画类型（推广、品牌介绍、数据揭示等）。

它将返回：

为此产品选择的动画模式（例如 "chat-demo"、"stat-reveal"、"brand-intro"）
带有场景时间的故事板：冷开场 → 主要内容 → 结尾
每个场景要展示的确切文本/数字/视觉效果

如果模式是 chat-demo，则 templates/chat-demo.html 模板是一个完整的可用起点——用脚本内容填充 CASES.BIGGEST 数据结构。对于其他模式，请使用 methodology.md § 2 中描述的动画引擎从头开始构建 HTML——使用相同的 __setTime(t) 驱动程序、相同的缓动工具包和相同的 Playwright 捕获方式。

阶段 3 — 内容研究（子代理）

启动案例研究员，提示内容位于 agents/03-case-researcher.md。向其传递产品领域和动画模式。

返回的内容取决于模式：

聊天演示 / 推广： 一个权威的、命名的、引人注目的前后对比案例，附带真实数据（该领域的“Converse Chuck Taylor 时刻”）+ 3-4 个次要案例。
数据揭示： 产品可以可信地拥有的一个重大公共指标，并附有引用来源。
品牌介绍 / Logo 揭示： 公司的实际头条新闻、真实客户数量、真实发布故事——任何可以验证并显示在屏幕上的内容。
工作流演示： 最常见的真实用户旅程，来自产品本身的命名步骤。

动画在进行任何声明时，都必须使用具体、命名且可验证的内容。

阶段 4 — 构建与渲染

将输出整合到选定的 HTML 模板（或您从头编写的模板）中，使用 Playwright 渲染帧，然后使用 ffmpeg 编码。

构建阶段

不同模式的构建略有不同。共同的框架：

复制或编写动画 HTML。
- 如果脚本编写器选择了 chat-demo，则将 templates/chat-demo.html 复制到工作区，并使用阶段 2 的脚本内容和阶段 3 的研究结果编辑 CASES.BIGGEST 数据对象。同时更换品牌 :root { --tokens }、页眉文本（"Atlas Trade"、"Intelligence"、badge）、URL 栏、文字标记 <img src> 以及 Logo 结尾的标语和 CTA。
- 对于其他模式（品牌介绍、数据揭示、工作流演示、前后对比），请使用动画引擎从头编写 HTML——methodology.md § 2 展示了确定性时间线模式。复用 reference/design-rules.md 中的设计规则、reference/camera-modes.md 中的相机数学以及相同的 Playwright 渲染协议。
复制渲染脚本。 对于 chat-demo，使用 templates/render-chat-demo.js（525 帧，约 17.5 秒）或 render-chat-demo-zoom.js（585 帧，约 19.5 秒，电影级相机）。对于自定义模式，复制其中一个渲染脚本并更新 DURATION 常量——其余部分保持不变。
先在浏览器中验证。 直接打开 HTML——动画会自动循环播放。仔细检查每个场景。在浏览器中花 5 分钟可以为每次迭代节省 3 分钟的渲染时间。
烟雾测试渲染——在提交完整渲染之前，在场景边界处渲染 6–8 个关键帧。参见 scripts/smoke.js 了解模式。可在 30 秒内发现布局重叠、字体回退、屏幕外元素等问题。

渲染阶段

在工作区安装 Playwright：

npm install [email protected] --no-save --no-audit --no-fund --silent

渲染帧：

node render-<pattern>.js          # 写入 frames/f_*.png 文件（持续时间 × FPS，约每秒 3-5 帧）

使用 ffmpeg 编码。将 -t 调整为您动画的持续时间，并将 afade=t=out:st=X 设置为在结束前 1 秒开始淡出：

ffmpeg -y -framerate 30 -i frames/f_%05d.png \
  -i /path/to/music.mp3 \
  -c:v libx264 -pix_fmt yuv420p -crf 18 -preset medium -movflags +faststart \
  -c:a aac -b:a 192k -af "afade=t=out:st=<DURATION-1>:d=1.0" \
  -t <DURATION> -shortest animation.mp4

yuv420p 对于 Slack/LinkedIn/Twitter 播放是必需的。+faststart 支持流媒体播放。crf 18 接近视觉无损。

如果未提供音频，请去除 -i music.mp3、-c:a aac -b:a 192k 和 -af 标志。scripts/encode.sh 以合理的默认值封装了上述操作。

质量门——声明完成前请阅读

通用（所有模式）：

真实品牌文字标记已内联（SVG <img>，而非使用 Inter Tight 粗体样式模拟的 Logo）。
所有颜色均来自产品的 tokens——绝不使用发明的十六进制颜色。
动画引用了代码库中的内容——其 UI、字体、文案惯用语均可识别。
单一的英雄时刻。一个数字，一次揭示，一个 CTA——而不是 12 个相互竞争的焦点。
任何变化的数字都使用 tabular-nums（避免水平抖动）。
动画到位——没有任何元素与另一个元素在完全相同的瞬间出现并淡出；尊重进入/退出时间窗口。
Logo 在结尾处停留足够长时间（品牌结尾 ≥ 3 秒）。
MP4 可在 QuickTime 中播放，精确达到目标分辨率 × fps，文件大小合理（通常 1–6 MB）。
使用 open <name>.mp4 为用户打开 MP4。

对于 chat-demo 模式，具体附加检查（参见 reference/design-rules.md）：

英雄 $ 数字使用 JetBrains Mono / 字重 800 / 至少 6 位数字。
工具链大约有 8 个芯片，节奏约 3 秒——任何更短的时间都会显得假。
用户气泡在栏位清除后出现，绝不与之同时出现。
思考气泡在结果淡入之前滑出——两者从不同时不透明。
光标仅在输入时出现，绝不在占位符上出现。

在声明完成前进行清理：

rm -rf frames frames-zoom node_modules package.json package-lock.json smoke_*.png

最终工作区应包含：HTML 文件、渲染脚本、文字标记 SVG 和完成的 MP4 文件。

文件映射

~/.claude/skills/promo-animation/
├── SKILL.md                  ← 您在这里
├── methodology.md            ← 深度参考，请先阅读——通用动画引擎
├── agents/
│   ├── 01-brand-extractor.md   ← 阶段 1 子代理提示
│   ├── 02-script-writer.md     ← 阶段 2 子代理提示
│   └── 03-case-researcher.md   ← 阶段 3 子代理提示
├── templates/
│   ├── chat-demo.html              ← 标准聊天演示模式（工作示例）
│   ├── render-chat-demo.js         ← 静态模式 Playwright 渲染器
│   ├── render-chat-demo-zoom.js    ← 缩放模式渲染器
│   └── atlas-wordmark.svg          ← 占位 SVG
├── scripts/
│   ├── smoke.js                ← 关键帧烟雾测试
│   └── encode.sh               ← ffmpeg 封装脚本
└── reference/
    ├── design-rules.md         ← 视觉规则精简版
    ├── camera-modes.md         ← 静态与缩放模式决策
    └── timing-blueprint.md     ← 场景时间安排

如有疑问，请阅读 templates/chat-demo.html——它是一个完整的可用示例，您现在就可以渲染（模拟的“Atlas Trade”/Converse Chuck Taylor 重分类场景）。它是聊天演示模式和确定性动画引擎的权威参考——methodology.md 中的每个视觉规则、时间安排决策和陷阱都已编码在该文件中。

对于其他动画模式，您需要从头编写 HTML——但动画引擎（methodology.md § 2）、渲染协议（§ 5）和设计规则（reference/design-rules.md）均保持不变。

产品动画技能