苹果风格发布影片，用代码构建
Mac的每一个像素均由代码绘制：菜单栏、刘海屏、小组件和壁纸。一个包含 window.seek(seconds) 的HTML文件，导出为MP4。
开始之前： 如果存在 brand.md 和 MOTION.md 则先阅读它们。如果没有，先运行 brand-intake，或者询问十六进制颜色代码、字体和Logo文件。在没有这些信息的情况下，切勿将结果称为符合品牌规范。
搭配一个免费技能（非本人所写），该技能将苹果的设计指南转化为Claude遵循的规则。安装一次：
npx skills add emilkowalski/skills --skill apple-design
步骤1：询问五件事，然后等待
- 产品名称及其一行字，一字不差。
- 事实列表。 影片可能展示的每一项功能、数字和要求。屏幕上不显示其他内容。
- 场景。 6到8个，每个场景包含一个功能加一句简短说明。例如：“你的声音在这里安家。”
- 参考素材（可选）：一个真实的Mac发布影片或其中的帧，放在名为
ref的文件夹中。它仅用于设定外观。 - 尺寸和时长。 默认1920 x 1080，30fps，每个场景约2.5秒。
步骤2：构建简报（粘贴到Claude Code中）
使用apple-design技能。[如果ref/存在：匹配ref/中参考素材的LOOK。先读取每一帧。不要复制其文字或产品名称。]
这是一部针对[产品]的发布影片：屏幕顶部中央的黑色MacBook刘海屏逐渐展开，每次展开一个苹果风格的小组件。每个场景都有自己的全屏渐变彩色壁纸，以及刘海屏下方居中的一句说明文字，其中最后两个词用比壁纸颜色更浅的色调着色。影片以刘海屏展开和“hello”手写白色衬线文字开始，就像Mac的问候屏幕。
仅使用以下事实，不添加其他内容：
[事实列表]
场景，每个约2.5秒：
[1. 黑色背景上刘海屏展开，“hello”手写。]
[2..n. 壁纸颜色，刘海屏展开成什么部件，说明文字。]
[最后. 黑色：刘海屏闭合到静止形状。说明文字：产品名称及其一行字。]
尺寸[宽度] x [高度]，30fps。画面是一个Mac屏幕：顶部一条细的macOS菜单栏，中间是刘海屏。系统字体（-apple-system，Helvetica Neue 后备字体）。
构建为一个自包含的HTML文件，带有 window.seek(seconds) 函数，可以绘制任何精确的帧。从每个场景捕获一帧[并与匹配的参考帧并排比较]。修复差异，并根据apple-design技能检查动画。
我硬核学到的教训
- 用语言命名刘海屏。 面对相同的简报，一个模型画了整台笔记本电脑。“屏幕顶部中央的刘海屏”是锚点。
- 使用弹簧动画，而非补间动画。 当宽度和高度按照各自曲线弹性变化时，刘海屏看起来才对——张开时柔和，闭合时没有过冲。
- 从影片开始就规划好动画。 如果刘海屏在闭合完成之前重新打开，它会从其当前状态继续。逐场景的补间会导致跳跃。
- 逐场景与参考素材对比。 并排帧比较能发现“hello”位置偏左且过大、本应是细刻度的粗进度条、以及挤进菜单栏的提示。
- 菜单栏保持简短。 一长串菜单文字会被宽大的小组件切成两半。五个项目就足够了。
- 小组件不添加任何声明。 占位文本为灰色线条。事实列表中未提供的任何UI文字（按钮标签、时钟时间）都需要列出来待批准。
步骤3：检查并导出
一个陌生人会在第一秒就相信这是一台真正的Mac吗？屏幕上的每个字都来自事实列表吗？添加一个减少动效的设置，将弹簧动画替换为快速淡入淡出。
使用HyperFrames（免费开源）导出：npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render。如需竖屏剪辑，将MP4交给 reel-export。