以程式碼打造的 Apple 風格發表影片
Mac 的每個像素皆以程式碼繪製：選單列、瀏海、小工具與桌布。一個自帶 window.seek(seconds) 的 HTML 檔案，可匯出為 MP4。
開始前： 若存在 brand.md 與 MOTION.md 請先閱讀。若無，請先執行 brand-intake，或要求提供色碼、字型與標誌檔案。在取得這些資訊前，切勿將任何結果稱為「符合品牌」。
搭配一個免費技能（非本人所有），可將 Apple 設計指南轉化為 Claude 遵循的規則。安裝一次即可：
npx skills add emilkowalski/skills --skill apple-design
步驟 1：要求五件事，然後等待
- 產品名稱及其一句標語，一字不漏。
- 事實列表。 影片可能展示的每項功能、數字與需求。除此之外不得有任何內容顯示在螢幕上。
- 場景。 6 到 8 個，每個場景包含一項功能與一句簡短標題。例如：「你的聲音在這裡。」
- 參考素材（可選）：一個名為
ref的資料夾，內含真實 Mac 發表影片或其影格。僅用於設定視覺風格。 - 尺寸與長度。 預設為 1920 x 1080，30fps，每個場景約 2.5 秒。
步驟 2：建立簡報（貼入 Claude Code）
使用 apple-design 技能。[若 ref/ 存在：比對 ref/ 中參考素材的視覺風格。先讀取每個影格。請勿複製其文字或產品名稱。]
這是 [PRODUCT] 的發表影片：螢幕正上方的黑色 MacBook 瀏海，會逐漸展開成 Apple 風格的小工具，一次一個場景。每個場景都有各自的全螢幕彩色漸層桌布，以及一個位於瀏海下方、置中的標題，標題的最後一兩個字以桌布顏色的淺色調呈現。影片開場時瀏海展開，並以白色手寫字型顯示「hello」，如同 Mac 的開機畫面。
僅使用以下事實，不得添加其他內容：
[事實列表]
場景，每個約 2.5 秒：
[1. 瀏海在黑色背景上展開，手寫的「hello」。]
[2..n. 桌布顏色、瀏海展開成什麼、標題。]
[最後。黑色：瀏海閉合至靜止形狀。標題：PRODUCT 及其一句標語。]
尺寸 [寬度] 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。