Apple 风发布片构图

Apple 风格产品演示视频

目标是制作一个像 apple.com 产品页面那样动态的视频：浅色背景、大号紧凑追踪的 SF Pro 字体、每屏只显示一条信息、满版彩色卡片、产品的真实 UI、真实的 SF Symbols、真实的应用程序图标、一段欢快的原创背景音乐，以及最后简洁的价值陈述。基于 Diffusion Studio JSX 组合构建，因此每一帧都是确定性的，可以在导出前检查。

从本文件旁边的 templates/promo-project/ 目录开始（这是一个完整且可用的组合：一款 Mac 锁屏工具的开场影片）。阅读其 BRIEF.md 和 POSITIONING.md 以了解最终的形态。

工作风格

• 反馈以简洁的要点形式给出，通常附带所指帧的截图。需要完成所有反馈；通过截图验证每一项；导出；回复时附带帧联系表。
• 当被要求进行头脑风暴时，每行列出 3–4 个选项，然后直接构建最佳方案，无需等待。
• 保持 BRIEF.md（包含时间和文案的情节表）和 POSITIONING.md（包含来源的文案理由）在每个迭代中都是最新的。
• 绝不编造证据：不使用虚构的用户数量、引语或标志。使用真实的截图、产品来源的真实文案字符串和真实的图标。
• 如实报告：说明哪些是通过截图验证的，哪些没有。

结构

每张卡片一条信息，两边硬切，在存在演示镜头时，卡片之间放置产品演示镜头。剪辑点与音乐的节拍网格对齐。

1. 开场钩子，3 秒，用于阻止滚动 — 观众的问题，产品在行动中，无标志。每个用例一张卡片：一个窗口 + 一行文字，这对组合作为一个组居中放置在画面中央。覆盖网站列出的所有用例，而不仅仅是主要用户角色（“你的 Agent 需要再多三个小时。” / “你的渲染需要四十分钟。” / “你的构建进行到一半。” / “你需要离开。”）。
2. 问题 — 纯文本卡片，糟糕的替代方案堆叠在画面中央，成本以红色显示（“锁定？Mac 会休眠。”）。
3. 揭示 — 图标随着音乐节拍弹出，显示字标，以及网站自己的主打文案（与落地页信息匹配）。
4. “专为”网格 — 网站的用例以 4 个磁贴形式呈现：带有 SF Symbol 的彩色圆圈、标题、其下的真实应用图标。无副文本。
5. 演示 — 真实 UI 执行核心操作，字幕紧贴动作下方，关键字高亮显示。
6. 功能卡片 — 好处作为标题，功能作为副标题。蓝色 / 石板纹理 / 绿色 / 黑色带渐变文字 / 页面灰色。展示而非讲述：一个时钟走过夜晚，键帽上印着红色的“✕ 已阻止”，通知出现在锁屏上。
7. 成果 — 回到已完成的工作，所有任务都已完成。
8. 更多功能网格 — 4 个磁贴，每个一行简短的文字。
9. 信任 — “无云端。无跟踪。无订阅。”
10. 结尾 — 图标 + 名称，“免费试用 7 天。”，“然后 $8.99，一次性付费。”，URL。没有其他内容。

时长约 45 秒。钩子卡片约 1.3 秒，文字卡片约 2 秒，演示 1.6–2.8 秒，网格约 3.4 秒，结尾约 7 秒。节奏快，但每个画面停留时间足够阅读。

外观

标记在 references/design.md 中。简要来说：

• 页面背景色 #f5f5f7，文字色 #1d1d1f，次要文字色 #6e6e73，强调色 = 产品的蓝色，系统红色 #ff3b30 用于成本和 Touch ID 图标，系统绿色用于成功。仅限浅色模式。
• 通过 -apple-system 使用 SF Pro 字体；标题 76–120 px，字重 600–700，字间距 −0.03 至 −0.04 em；时钟使用 SF Pro Rounded。
• 全出血渐变卡片（蓝色、绿色、带 SVG 纹理的石板色、带渐变裁剪单色文字的黑色），风格类似 apple.com 产品页面。
• 液态玻璃表面：半透明白色、发光边缘、胶囊形状、宽而软的阴影、背景模糊。产品 UI 根据其自身源码重建，使用相同的尺寸、字重和文案。
• 真实的 SF Symbols 从 macOS 渲染（tools/render-symbols.swift）；真实的应用程序图标从已安装的应用中提取。通过 Rich.tsx 使用 **…** 高亮单词。
• 文字居中；一个窗口及其行文字作为一个居中的组一起移动。绝不在顶部动画时改变底部文字；将字幕放在动作旁边，并延迟其他运动直到该行文字落下。

文案

原则及来源见 references/copy.md。规则：

• 使用简单的词语、简短的句子，除非副文本承载事实，否则不使用。
• 标题应完整描述产品的功能；重用网站上的标题。
• 使用具体数字（“再多三个小时”、“340 项测试”、“凌晨 2:06”）。
• 先提好处，功能作为证据；处理阻止购买者的异议（隐私、锁定、价格、“是否适合我的情况”）。
• 行动号召是价值号召，并附带价格。

音频

通过代码编写背景音乐（tools/make-music.py，使用 numpy + ffmpeg）：126 BPM，从第一小节开始每拍一个底鼓，2/4 拍上军鼓，拨弦琶音，次低音，铺底；在揭示和锁定时刻加入上升音 + 冲击音；在解锁处加入停顿；在结尾处解决；在每个卡片切换处加入柔和的滴答声。在脚本顶部将各个时刻作为参数；每当剪辑点变化时重新调整。在可能的情况下使用产品的真实系统声音。不使用授权音乐。

工作流程

1. 阅读产品的网站和源代码，了解用例、文案字符串、UI 截图和图标。阅读 references/copy.md。
2. 编写 BRIEF.md 和 POSITIONING.md。
3. 复制 templates/promo-project/；在 src/theme.ts 中设置 ROOT。
4. 首先构建时间线（src/timeline.ts：时刻、文案、补间动画），然后是卡片，最后是演示。根据时刻重新生成音乐。
5. 验证：运行 dapi check，然后运行 dapi capture 获取每个节拍的联系表；阅读它们；修复问题；然后才运行 dapi export。检查 MP4 文件（时长、音频峰值）并平铺示例帧用于回复。
6. 管道细节和光栅化注意事项：references/pipeline.md。