Communitygithub.com

apple-design

Appleスタイルの製品ローンチフィルムを作成します。Three.jsで構築・ライティングされた本格3Dプロダクト、ビートに合わせた大胆なカット、巨大なキネティックタイポグラフィ、コールアウトラベル付きカットアウェイ、カラー/仕上げラインナップ、エンドカード、そしてコードで作曲され映像に同期されたオリジナルサウンドトラックを備え、1080p MP4(音声付き)をレンダリングします。ユーザーがApple風、キーノート風、ローンチビデオ、製品広告、公開、ティーザー、プロモーション映像を希望する場合、または「スピーカーみたいに」「Oto/Velaみたいに」と言った場合、このスキル名が指定されていなくても使用してください。

apple-design とは?

このスキルは、Appleの製品発表会を彷彿とさせる、30~35秒のプロモーションフィルムを自動生成するためのものです。Three.jsを用いて実際の3Dモデルを構築・ライティングし、ビートに合わせたカット、巨大なキネティックタイポグラフィ、製品内部のカットアウェイ、カラー/仕上げのラインナップ、エンドカード、そしてPythonで作曲されたオリジナルサウンドトラックを映像に同期し、1080pのMP4ファイルとして出力します。このスキルの特徴は、「Oto」(ポップでカラフルなスタイル)と「Vela」(シネマティックでプレミアムなスタイル)という2つのベースフィルムを出発点とし、新しいフィルムはそのどちらかをコピーしてカスタマイズする点にあります。各フレームは時間の純粋関数として描画されるため、フレーム単位の正確なレンダリングが可能で、ユーザーが提供する製品情報やコンセプトに基づいて、ビートシートの作成、3Dモデリング、音楽作曲、レンダリングまでを効率的に実行します。結果として、プロフェッショナルな製品ローンチ映像を短時間で制作できます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aronovdaniel14-cmd/apple-design/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Apple Design: ローンチフィルム

このスキルは、Appleのローンチスポットのようなスタイルで30~35秒の製品フィルムを作成します。2つの完成フィルムが同梱されており、新しいフィルムは常にそのうちの1つからスタートします。

フィルムルック用途
films/otoポップ. ビートごとに切り替わるフラットで鮮やかな色面、巨大な白い文字、ベースに合わせてバウンドする遊び心のある製品、120 BPMのハウストラック。消費者向けガジェット、スピーカー、イヤホン、玩具、楽しいものやカラフルなもの。
films/velaシネマティック. 黒いステージ、スタジオライティングの金属、ブルーム、スローなカメラワーク、光線と投影された世界、分解図、100 BPMのスコア。プレミアムハードウェア、カメラ、ウェアラブル、「エンジニアリングされた」もの。

どちらかのフォルダの out/sheet.jpg を開くか(レンダリング後)、film.js を読めば全てのショットがわかります。references/film-recipe.md はフィルムの構成方法と再利用可能なショットパターンを説明しています。新しいフィルムを書く前に読んでください。

フィルムの仕組み

  • films/<name>/index.html はフォントとタイプスタイルを設定します。
  • films/<name>/film.js はThree.jsのプリミティブから製品を構築し、{ a, b, f(t, p) } の時間範囲のリストである SHOTS を定義します。renderAt(t) はシーンをリセットし、その秒に対応するショットを呼び出します。すべてのフレームは t の純粋関数です。Date.now やCSSアニメーション、フレーム間で状態を保持することはありません。これによりフレーム単位の正確なレンダリングが可能になります。
  • films/<name>/music.py はnumpyを使ってサウンドトラックを作曲し、out/score.wav を書き出します。Otoのバージョンはさらに env.json(キックのタイミングとフレームごとのベースエンベロープ)を書き出し、製品やリングが実際のトラックに反応できるようにします。
  • render.mjs はフォルダをサーブし、GPUを備えたヘッドレスChromeでフレームをレンダリングし、MP4をエンコードします。

新しいフィルムのワークフロー

  1. ブリーフィング. 製品名、製品の説明と驚くべき特徴1つ、3~5つの実際の事実(数値+単位)、色または仕上げ、タグライン、ローンチライン(「Coming 2027」)を取得します。ユーザーが大まかなアイデアしか提供しない場合は、センスの良い具体的な内容を考案し、その旨を伝えます。質問は多くとも1つに抑えます。
  2. ベースフィルムの選択(ポップならOto、シネマティックならVela)し、コピーします:cp -r films/oto films/<name>(小文字、スペースなし)。コピーした out/ フォルダと env.json を削除します。
  3. まずビートシートを書きます。 BPM(100~124)を選択します。バーグリッド上に8~11のショットを配置し(120 BPMでは1バー=2秒なので、ショットは2、4、または8秒)、各ショットの画面上の単語を決めます。レシピのアークに従います:コールドオープン → ドロップ → 名前 → 機能 → 内部 → 主要数字 → ラインナップ → 無音 → エンドカード。ユーザーが確認を希望した場合のみ、構築前に短いテーブルとして表示します。それ以外はそのまま進みます。
  4. 製品をモデリング します (film.js 内で makeOto / makeDevice を置き換えます)。レイスプロファイル、球体、トーラス、角丸ボックスを MeshPhysicalMaterial(クリアコート、シーン、メタルネス)で構築し、グリル、スクリーン、ラベルのためのキャンバステクスチャを追加します。ショットから呼び出せる pose(...) や setFinish(...) 関数を用意します。レシピのモデリングセクションを参照してください。
  5. ショットとタイプを書き換えます:SHOTS、CAPS、ラベル、ラインナップ名、エンドカード。カットはビートの境界に合わせます。既存のヘルパー(showWord、showRings、drawField、panels、cam、カットアウェイ用リグ、ラベルのリーダーライン)を再利用します。
  6. 音楽を作曲 するには、コピーした music.py を編集します:BPM、キーまたはコードリスト、アレンジメントブロックを設定し、各セクションが対応するショットと一致するようにします(公開でヒット、カットアウェイでブレイクダウン、エンドカード前に無音)。フィルムが env.json を使用する場合は、kick_times とエンベロープのエクスポートを維持します。
  7. スチルを確認し、レンダリング します(スキルフォルダから):
    python3 films/<name>/music.py
    node render.mjs <name> sheet            # 8フレーム → films/<name>/out/sheet.jpg
    node render.mjs <name> stills 4.2,9,17  # 任意の正確な秒数
    node render.mjs <name> final            # → <Name>_Launch_Film.mp4(音楽付き)
    
    シートを確認します。フルレンダリング前に、クリップ、重なり、中央ずれ、読みにくい箇所を修正します。final(60 fps)は34秒で約3~8分かかります。簡易ドラフトには final 30 を使用します。
  8. 納品. 最終MP4とコンタクトシートのパスを伝え、各ショットを1行でリストアップし、具体的な調整(コピー、色、タイミング、音楽)を提案します。

セットアップ(一度だけ)

cd ~/.claude/skills/apple-design && npm install
python3 -m pip install numpy scipy      # またはvenvを使用

Google Chromeとffmpegが必要です。CHROME_PATH を設定してください(Chromeが標準以外の場所にある場合)。

品質基準

  • すべてのカットと単語がトラックのビートグリッドに正確に合っていること。a/b の時間をBPMと照合してください。
  • ショットごとに1つのアイデア。キャプションは7語以内、大きな単語は1語。
  • 製品はその形状が読み取れるよう十分なライティングがされていること:キーライト、リムライト、ソフトなコンタクトシャドウ、金属への環境反射。
  • この製品にしかできないショットが少なくとも1つ含まれていること(Otoのカットアウェイと「音量を上げると高く上がる」、Velaの壁、テーブル、天井)。
  • エンドカードには名前、1つのタグライン、ローンチラインが含まれ、最後の音符でフェードアウトすること。
  • 最終レンダリングの前に、毎回コンタクトシートを確認すること。

ガードレール

「Appleスタイル」はルックを指します。Appleのロゴ、製品名、商標、SF Proのフォントファイル、実際のAppleの映像は使用しないでください。フォントはInterとInter Tightを使用します。製品名や仕様は、ユーザーがコンセプト作品を依頼した場合にのみ考案し、それがコンセプトであることを明記してください。

関連スキル