apple-launch-film

用代码打造 Apple 风格的发布影片

Mac 的每个像素都由代码绘制：菜单栏、刘海、组件和壁纸。只需一个 HTML 文件，支持 window.seek(seconds)，并可导出为 MP4。

**开始前：**如果存在，请阅读 brand.md 和 MOTION.md。如果不存在，请先运行 brand-intake，或索取十六进制颜色值、字体和徽标文件。没有这些内容，绝不要声称成品符合品牌风格。

可搭配一项免费技能（非我开发），将 Apple 的设计指南转化为 Claude 遵循的规则。只需安装一次：

npx skills add emilkowalski/skills --skill apple-design

第 1 步：询问五项内容，然后等待

1. 产品名称及其一句话介绍，必须逐字提供。
2. **事实清单。**影片中可以展示的每项功能、数字和要求。屏幕上不得出现其他内容。
3. **场景。**6 到 8 个，每个场景包含一项功能和一条简短说明。例如：“你的声音，就在这里。”
4. 参考素材（可选）：真实的 Mac 发布影片或影片画面，放在名为 ref 的文件夹中。它只用于确定视觉风格。
5. **尺寸和时长。**默认 1920 x 1080、30fps，每个场景约 2.5 秒。

第 2 步：构建简报（粘贴到 Claude Code 中）

Use the apple-design skill. [If ref/ exists: Match the LOOK of the reference in ref/. Read every frame first. Do not copy its words or its product name.]

It is a launch film for [PRODUCT]: the black MacBook notch at the top centre grows into Apple-style widgets, one scene at a time. Each scene has its own full-screen colour-gradient wallpaper and one centred caption below the notch, with the last word or two tinted a lighter shade of the wallpaper colour. It opens with the notch expanded and the word "hello" handwritten in a white script line, like the Mac hello screen.

Use only these facts, and add no others:
[FACTS LIST]

Scenes, about 2.5 seconds each:
[1. Notch expanded on black, "hello" handwritten.]
[2..n. Wallpaper colour, what the notch opens into, the caption.]
[Last. Black: the notch closes to its resting shape. Caption: PRODUCT and its one line.]

Size [WIDTH] x [HEIGHT], 30fps. The frame is a Mac screen: a thin macOS menu bar across the top with the notch in the middle of it. System fonts (-apple-system, Helvetica Neue fallback).

Build it as one self-contained HTML file with window.seek(seconds) that draws any exact frame. Capture one frame from each scene [and compare it side by side with the matching reference frame]. Fix what differs, and check the motion against the apple-design skill.

我从经验中吸取的教训

• **明确描述刘海。**给出相同的简报，一个模型却画出了一整台笔记本电脑。“屏幕顶部中央的刘海”是关键锚点。
• **使用弹簧动画，而不是补间动画。**让刘海的宽度和高度沿各自的曲线弹性变化，柔和展开、收起时不产生过冲，效果才对。
• **从影片开头开始规划动作。**如果刘海还没收完就重新展开，它会从当前状态继续。逐场景设置补间则会产生跳变。
• **逐场景对照参考素材。**并排对比画面后，我们发现“hello”不居中且过大，进度条太粗（本该是细刻度），还有一条提示挤在菜单栏里。
• **菜单栏要简洁。**文字菜单太长，会被宽大的组件遮挡一半。五个项目就足够了。
• **组件不能引入新说法。**占位文本用灰线表示。凡是事实清单中没有提供的 UI 文案（按钮标签、时钟时间等），都要列出来征求确认。

第 3 步：检查并导出

一个陌生人会在第一秒内相信这是真正的 Mac 吗？屏幕上的每个词都来自事实清单吗？添加减少动态效果设置，将弹簧动画替换为快速淡入淡出。

使用 HyperFrames 导出（免费、开源）：npx skills add heygen-com/hyperframes，然后运行 npx hyperframes render。如需竖屏版本，将 MP4 交给 reel-export。