/marketing-demo — 产品演示录制器
为市场营销录制产品演示。提供两种制作路径：快速路径（使用 ply + ffmpeg）适用于粗糙演示，精美路径（使用 Remotion）适用于品牌营销视频。
读取内容
brand/creative-kit.md— 品牌叠加层的颜色、字体、Logo 路径brand/voice-profile.md— 文字叠加层的语调指南brand/stack.md— 可用工具（ply、ffmpeg、remotion）
激活时
- 读取
brand/creative-kit.md以获取颜色、字体、Logo 路径。如果缺失，询问品牌颜色和 Logo。 - 读取
brand/voice-profile.md以获取文字叠加层的语调指南。如果缺失，使用清晰/中性语调。 - 读取
brand/stack.md以确认可用工具。如果缺失，直接检测工具。 - 检查工具可用性：
command -v ply && echo "ply: ready" || echo "ply: missing" command -v ffmpeg && echo "ffmpeg: ready" || echo "ffmpeg: missing" command -v npx && echo "remotion: available" || echo "remotion: unavailable" - 如果
ply或ffmpeg缺失，发出警告并建议安装。
镜头时长规则
| 演示类型 | 每镜头时长 | 备注 |
|---|---|---|
| 快速概览 | 0.5-1s | 快速剪辑，营造兴奋感 |
| 功能演示 | 2-3s | 留出阅读和理解的时间 |
| 操作指南 | 4-5s | 教学节奏 |
| 社交媒体片段 | 1-2s | 吸引注意力，节奏快 |
演示讲故事原则
如果演示只是机械地展示产品，而不是讲述一个故事，那就会失败。观众需要一个继续观看的理由。这些原则来自在落地页和社交媒体上真正能获得参与度的方法：
- 以结果开场，而非设置过程。 前 2 秒决定是否有人观看剩余部分。展示“之后”的状态——带有数据的仪表盘、完成的设计、最终结果。设置过程（登录、加载、导航）不会获得任何关注。
- 一个功能 = 一个演示。 试图在 30 秒内塞入 5 个功能会让所有功能都变得容易被遗忘。一个专注于一个功能的演示胜过一次匆忙的巡览。
- 展现魔法时刻。 每个产品都有一次交互能让用户发出“哇”的感叹。找到那个时刻，并围绕它构建演示——这是人们点击“试用”的原因。
- 用文字叠加层提供上下文。 社交媒体视频在自动播放时会静音。如果没有文字标注，观众只会看到界面在变化，却不知道发生了什么以及为什么重要。每个镜头都需要一个 3-6 个字的叠加层来解释其价值。
- 节奏：每个概念 2-3 秒。 这感觉很快，但观众的注意力非常有限。如果一个镜头没有提供新信息来赢得屏幕时间，就剪掉它。
步骤 1：确定演示类型
| 类型 | 时长 | 分辨率 | 格式 | 用途 |
|---|---|---|---|---|
| 英雄演示 | 15-30s | 1280x800 | MP4 | 落地页首屏 |
| 功能亮点 | 5-15s | 1280x800 | GIF/MP4 | 功能板块、文档 |
| 完整操作指南 | 60-180s | 1280x800 | MP4 | YouTube、销售演示 |
| 社交媒体片段 | 5-15s | 1080x1080 | MP4 | Instagram、Twitter/X |
| 邮件 GIF | 3-8s | 600x400 | GIF | 邮件营销活动 |
| 操作教程 | 30-90s | 1280x800 | MP4 | 帮助文档、新手引导 |
询问用户选择哪种类型，或从上下文中推断。
步骤 2：规划镜头列表
在录制前，规划每个镜头：
## 镜头列表
1. [操作：导航至落地页]
- URL: https://example.com
- 等待：1s 用于加载
- 高亮：英雄板块
2. [操作：点击“开始入门”按钮]
- 等待：过渡动画
- 高亮：注册表单
3. [操作：填写演示数据]
- 输入：[email protected]
- 高亮：成功状态
每个镜头 = 一个 ply 截图或交互序列。
步骤 3：选择制作模式
模式 A：快速演示（ply + ffmpeg）
将截图快速拼接成视频的粗糙演示。
捕获截图：
# 导航并截图每个镜头
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "Get Started"
ply screenshot --output marketing/demos/shot-02.png
使用 ffmpeg 拼接：
# 从截图生成 MP4（每帧 2 秒）
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
-c:v libx264 -pix_fmt yuv420p \
-vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
marketing/demos/demo.mp4
# 预览 GIF（较低质量，较小文件）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=10,scale=640:-1:flags=lanczos" \
-c:v gif marketing/demos/demo-preview.gif
# 邮件 GIF（600px 宽，已优化）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
marketing/demos/demo-email.gif
# 为社交媒体裁剪为正方形（1080x1080）
ffmpeg -i marketing/demos/demo.mp4 \
-vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
marketing/demos/demo-square.mp4
模式 B：精美演示（Remotion）
用于营销级输出，包含过渡、文字叠加层、品牌化开场。
生成 Remotion 合成：
# 如果需要，初始化
npx remotion init marketing/demos/remotion-demo
# 渲染最终视频
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
--output marketing/demos/demo-polished.mp4
合成结构：
src/
├── index.tsx # 根合成
├── Intro.tsx # 品牌化开场（Logo、标语）
├── DemoScene.tsx # 带文字叠加层的截图
├── Transition.tsx # 场景间的淡入/滑动
└── Outro.tsx # CTA + URL
关键 Remotion 模式（完整组件代码请参见 references/remotion-examples.md）：
- 使用
<Img>显示截图，<AbsoluteFill>进行布局 - 使用
useCurrentFrame()+interpolate()实现动画 - 从
brand/creative-kit.md获取品牌颜色 - 使用 30fps 实现流畅播放，分辨率 1280x720 或 1920x1080
- 使用
<Sequence>添加标注功能的文字叠加层
开场场景（2-3 秒）： Logo 居中，标语淡入。使用品牌颜色作为背景渐变。保持简短——产品才是主角。
演示场景（每镜头）： 截图填充 80% 的帧。在顶部或底部放置文字叠加层，包含一行功能介绍。使用 interpolate() 实现微妙的缩放效果（在场景持续时间内从 1.0 到 1.05），增加动感。
场景间过渡： 淡入 + 轻微滑动（200 毫秒）。永远不要使用花哨的转场效果——它们会分散对产品的注意力。
结尾场景（3-4 秒）： CTA 文字（“在 [url] 免费试用”）、Logo 和可选的社会证明语句。这是唯一一个用于推销的幻灯片——保持所有其他幻灯片专注于展示。
错误恢复
ply 失败（页面未加载、元素未找到、超时）：跳过到镜头 N+1，并在镜头列表中记录失败。所有镜头完成后，审查跳过的镜头并重试一次。如果仍然失败，使用手动截图作为备用方案。
ffmpeg 失败（未找到编解码器、格式错误）：使用 ffmpeg -codecs 检查可用编解码器。如果缺少 libx264，尝试 -c:v h264 或通过 brew install ffmpeg 安装。对于 GIF 调色板问题，简化滤镜链——删除 split/palettegen/paletteuse，使用基本的 -vf "fps=10,scale=640:-1"。
Remotion 失败（渲染崩溃、合成错误）：检查 Node 版本（node -v，需要 18+）。如果 npx remotion render 失败，尝试使用 npx remotion render --gl=angle 或 --gl=swangle 解决 GPU 问题。对于合成错误，验证所有 <Img> src 路径正确且图片存在。
步骤 4：转换和输出
所有输出都保存到 marketing/demos/。按类型命名：
| 输出 | 文件名 | 备注 |
|---|---|---|
| MP4（桌面） | demo-hero.mp4 | H.264，1280x800 |
| MP4（社交媒体） | demo-social-1080.mp4 | 正方形，1080x1080 |
| GIF（预览） | demo-preview.gif | 640px 宽，<5MB |
| GIF（邮件） | demo-email.gif | 600px 宽，<2MB |
| MP4（精美） | demo-polished.mp4 | Remotion 输出 |
步骤 5：完成摘要
## 创建的演示资产
| 资产 | 大小 | 格式 | 建议用途 |
|-------|------|--------|--------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | 落地页英雄视频 |
| demo-preview.gif | 3.4MB | GIF 640px | README、文档 |
| demo-email.gif | 1.1MB | GIF 600px | 邮件营销活动 |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram、X |
所有资产已保存到 `marketing/demos/`。
视口配置
| 平台 | 宽度 | 高度 | 缩放比例 |
|---|---|---|---|
| 桌面 | 1280 | 800 | 1x |
| 桌面 HD | 1920 | 1080 | 1x |
| 移动端 | 390 | 844 | 2x |
| 1080 | 1080 | 1x | |
| Twitter/X | 1200 | 675 | 1x |
| 邮件 | 600 | 400 | 1x |
反模式
| 错误 | 失败原因 |
|---|---|
| 录制登录/注册流程 | 没人关心你的认证界面。从登录后开始。 |
| 显示加载中的旋转图标 | 编辑掉它们或直接跳到加载完成状态。旋转图标会破坏节奏。 |
| 静音自动播放时没有文字叠加层 | 社交媒体视频自动播放时会静音。没有文字，观众不知道他们在看什么。 |
| 演示超过 60 秒且没有章节分隔 | 注意力在 15 秒后就会下降。如果时间较长，添加清晰的章节标题。 |
| 使用不一致的视口大小录制 | 在不同大小之间跳转的镜头显得业余。在录制前锁定视口。 |
| 展示每一个功能 | 最多选择 3-5 个功能。什么都展示的演示最终什么都卖不出去。 |
| 鼠标光标随意游荡 | 规划每一次点击。光标应指向明确目标——直线移动。 |
相关技能
/creative— 广告视觉、产品图片（静态资产，非演示）/content-atomizer— 将演示转化为平台特定的帖子/page-cro— 审核演示所展示的页面