Appleスタイルの発表映像、コードで構築
Macのすべてのピクセルはコードで描画されます：メニューバー、ノッチ、ウィジェット、壁紙。1つのHTMLファイルにwindow.seek(seconds) を実装し、MP4にエクスポートします。
開始前に： brand.md と MOTION.md が存在する場合はそれらを読んでください。存在しない場合は、最初に brand-intake を実行するか、16進数カラーコード、フォント、ロゴファイルを依頼してください。これらなしに結果を「ブランド準拠」と呼んではいけません。
無料スキル（私のものではありません）と組み合わせて、AppleのデザインガイドラインをClaudeが従うルールに変換します。一度インストールするだけです：
npx skills add emilkowalski/skills --skill apple-design
ステップ1：5つを依頼し、待つ
- 製品名 とそのキャッチフレーズ（一字一句そのまま）。
- 事実リスト。 映像に表示される可能性のあるすべての機能、数値、要件。それ以外は画面に表示しません。
- シーン。 6～8個。各シーンは1つの機能と1つの短いキャプションで構成。例：「あなたの声がここに。」
- 参考資料（オプション）：実際のMac発表映像またはそのフレームを
refフォルダに配置。ルックのみを設定します。 - サイズと長さ。 デフォルトは1920 x 1080、30fps、各シーン約2.5秒。
ステップ2：ブリーフを作成（Claude Codeにペースト）
apple-designスキルを使用してください。[ref/が存在する場合：ref/内の参考資料のLOOKに合わせてください。最初にすべてのフレームを読んでください。参考資料の言葉や製品名をコピーしないでください。]
これは[PRODUCT]の発表映像です：画面上部中央の黒いMacBookノッチが、シーンごとにAppleスタイルのウィジェットに成長します。各シーンには、フルスクリーンのカラーグラデーション壁紙と、ノッチの下に中央揃えのキャプションが1つあり、最後の単語（または2単語）は壁紙の色より少し明るい色合いで表示されます。映像はノッチが拡張され、白いスクリプトラインで「hello」と手書き表示されるシーンで開きます（Macのhello画面のように）。
以下の事実のみを使用し、それ以外を追加しないでください：
[事実リスト]
シーン、各約2.5秒：
[1. ノッチが黒背景で拡張、「hello」手書き。]
[2..n. 壁紙の色、ノッチが何に展開されるか、キャプション。]
[最後. 黒：ノッチが元の形状に閉じる。キャプション：PRODUCTとそのキャッチフレーズ。]
サイズ [WIDTH] x [HEIGHT]、30fps。フレームはMac画面：上部に細いmacOSメニューバーがあり、その中央にノッチ。システムフォント（-apple-system、Helvetica Neueフォールバック）。
window.seek(seconds)を実装した1つの自己完結型HTMLファイルとして構築し、任意の正確なフレームを描画できるようにしてください。各シーンから1フレームをキャプチャし[、一致する参考フレームと並べて比較してください]。差異を修正し、モーションをapple-designスキルに照らして確認してください。
苦労して学んだこと
- ノッチを言葉で明確に指定すること。 同じブリーフを与えても、あるモデルはノートパソコン全体を描いてしまいました。「画面上部中央のノッチ」がアンカーです。
- トゥイーンではなくスプリングを使うこと。 ノッチは幅と高さがそれぞれ独自のカーブでスプリング動作すると見栄えが良く、開くときはソフトに、閉じるときはオーバーシュートなしに。
- 映像の開始時点からモーションを設計すること。 ノッチが閉じ終わる前に再度開くと、現在の位置から継続します。シーンごとのトゥイーンではジャンプが発生します。
- 参考資料とシーンごとに比較すること。 フレーム比較により、中央からずれて大きすぎる「hello」、太すぎるプログレスバー（細いティックであるべき）、メニューバーに押し込まれたプロンプトなどを発見しました。
- メニューバーを短く保つこと。 単語のフルメニューは、幅広のウィジェットで半分に切られます。5項目で十分です。
- ウィジェットに主張を追加しないこと。 プレースホルダーテキストは灰色の線です。事実リストにないUIの単語（ボタンラベル、時計の時刻など）は、承認のためにリストバックされます。
ステップ3：チェックとエクスポート
見知らぬ人が最初の1秒で本物のMacだと信じるでしょうか？画面上のすべての単語は事実リストからのものですか？スプリングをクイックフェードに置き換える、動作抑制設定を追加してください。
HyperFrames（無料、オープンソース）でエクスポート：npx skills add heygen-com/hyperframes、その後 npx hyperframes render。縦型カットが必要な場合は、MP4を reel-export に渡してください。