Communitygithub.com

アプリ3Dビデオ

ユーザーがiOSアプリの3Dプロモ、ティーザー、ローンチ、「近日公開」、「新機能」ビデオ、またはその改訂版やローカライズ版をリクエストしたときに使用します。実際の3D iPhoneと、アプリのUIをタップして回るマスコットキャラクターが登場します。

アプリ3Dビデオ とは?

このスキルは、iOSアプリのプロモーションビデオを完全にこのMac上で3Dレンダリングするためのものです。SceneKitで作られたリアルなiPhone、明るいアイボリー色の世界、アプリのマスコットキャラクター(跳ね回り、実際のUIを押す)、価値を伝える見出し、そしてすべての跳躍にマリンバの音が合うオリジナルのスイング楽曲を生成します。`template/`ディレクトリには完全なサンプルプロジェクト (薬のリマインダーアプリ「MyApp」) が含まれており、そのまま実行できます。ストーリー、UI、データ、ブランド、音楽は自由に変更可能です。必須のサブスキルは `motion-video` で、エンジンやビートグリッド計画、スチルレビューを提供します。標準の `motion-video` スキルとは異なり、このスキルは `bash mv3d.sh` を使用し、マスコットのバウンス、キラキラ、紙吹雪をデフォルトの見た目として保持します。ワークフローは、リポジトリから事実を収集し、マスコットを構築し、ビートグリッド上で計画を立て、見出しをコピーし、楽曲を作成し、最低2ラウンドのスチルレビューを経て、最終的にバックグラウンドでレンダリングを行い、`~/Downloads/` に納品します。マスコットは情報を隠さず、影が表示され、UIの色がオレンジの見出しと競合しないようにするなど、厳格な見た目の契約に従います。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huypham85/app-3d-video-skill/tree/HEAD/app-3d-video

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

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

ドキュメント

App 3D video

概要

このMac上で完全にレンダリングされる20秒の縦型ビデオ。明るいアイボリー色の世界に実在するSceneKit iPhone、アプリのマスコットキャラクター(跳ね回り実際のUIを押す)、価値を最優先した見出し、そして跳躍ごとにマリンバの音が合うオリジナルのスイング楽曲が含まれます。template/ は完全なサンプルプロジェクト(「MyApp」という服薬リマインダーアプリ)で、そのまま実行できます。ストーリー、UI、データ、ブランド、音楽は変更してください。ユーザーから特に指示がない限り、外観は維持します。

必須サブスキル: motion-video(エンジン、ビートグリッド計画、スチルレビュー)。すべての値(パレット、サイズ、ライト、音楽、落とし穴、セカンドデバイス、リアル vs イラストレーティブ)は、このファイルの隣にある reference.md に記載されています。

2つのスキルで異なる場合は、こちらが優先されます:template/ をコピーし、bash mv3d.sh(mv.sh ではありません)を実行し、マスコットのバウンス、キラキラ、紙吹雪は、motion-videoのヘルスプリセットでは避けられますが、こちらの外観の一部とします。データを表示するUIは依然としてディップとポップのみを行い、マスコットがバウンスします。

テンプレートから開始

cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio                   # score.swift -> music.wav、レベルを出力。スチルの前に実行
bash mv3d.sh stills 0.5,4.6,10.1     # BEATS -> stills/ + sheet.png
bash mv3d.sh video                   # out.mp4、1台の電話で20秒の場合約5分。バックグラウンドで実行
bash mv3d.sh frames out.mp4 2.5,6.3  # SECONDS -> check/ + check_sheet.png

ブランディングは scenes.swift の先頭にある BRAND ブロックにあります:APP_NAME(エンドカードのワードマーク)、APP_VERSION(3Dの数字。長さが変わったらサイズと位置をスチルで再確認)、LABEL(最初の見出しの上の小さなラベル)、END_PILL(エンドカードのグラデーションピル)、マスコットの色。次に、render() 内のすべての headline(...) 呼び出し、ヘッダーコメント、plan.md を置き換えます。「COMING IN …」と「COMING SOON」はティーザー用の文言です。ローンチの場合は、ユーザーにラベルとエンドカードのテキストを尋ねてください。

サンプルシーン(Live Activityカード、Lock Screenウィジェット、週間ピルボックス壁紙)はサンプルアプリのものです。ユーザー自身のUIに置き換え、テクニック(フレームごとの2Dキャンバスを電話画面にマッピング、マスコットが要素の上に立って押す、1つのクロックで駆動するタイムラプス)は維持してください。

ワークフロー

  1. 事実収集。 各機能についてユーザーのリポジトリを読み取ります。実際の文字列、レイアウト、パレット、状態、有料層のゲーティング、アプリアイコンの色(マスコットの色になります)。コードで答えられないこと(どの機能、正確な名前、無料か有料か、ティーザーかローンチか、長さ。デフォルトは20秒縦型)を尋ねます。リポジトリにUIがない機能:デザインまたはスクリーンショットを尋ねます。ない場合は、アプリのデザインシステムから描画し、イラストレーティブとしてリストにし、最初のスチルシートに表示します。
  2. マスコット。 デフォルトは、アプリのブランドカラーを使用した2トーンカプセルです。アプリに独自のマスコットやシンプルなアイコン形状がある場合は、buildCapsule() でSceneKitプリミティブから構築します(CAP_HALF、ユニットサイズ、マテリアルリストはそのままにして、影と2パスが機能するようにします)。
  3. 計画 plan.md をビートグリッド上に作成します(96 BPMスイング、8小節 = 20秒)。1機能 = マスコットが実際のUIと1回インタラクションします。午前中1回、1つのデータセット、1つのクロック。電話がステージです。セカンドデバイス(Watch、iPad)は、そこに存在する機能のためだけに登場します(reference.md、「Second device」)。リアル vs イラストレーティブをリストします。
  4. コピー。 見出し = ユーザーが得られるもの。機能名ではありません。有料のものにはサブラインにPROチップを付けます。ヒューマナイザースキルがインストールされている場合は、すべての行にそれを実行し、その後事実を再確認します。
  5. スコア。 サウンドは維持します(ウクレレ、マリンバ、ホイッスル、スナップ、Eメジャー、エンドカードのダウンビートのシンセチャイム)が、新しい振り付けに合わせて新しいコード、メロディ、ヒットを書き込みます。すべての着地は、その視覚的なビート上のマリンバノートです。アプリに独自の通知音がある場合は、シンセチャイムを置き換えることができます(score.swift の最後を参照)。スコアのキーをそれに合わせます(motion-video references/score-guide.md)。ユーザーが別の音楽をリクエストした場合は、楽器も変更します。ターゲットは −13…−15 dBFS、クリッピング0%です。
  6. スチル、最低2ラウンド、ジャンプ中のビートも含みます。チェック:マスコットが情報を覆い隠していない、押している要素で一時停止する、影が見える、電話の上部が見出しの下にある、コピーの下に何も表示されていない、実際のUIの色がオレンジの見出しと競合していない。
  7. レンダリング をバックグラウンドで実行し、次にMP4で frames を実行して確認します。
  8. 納品 先は ~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4 で、ファイルをユーザーに送信または表示します。秒単位でビートバイビート、リアル vs イラストレーティブ、オーディオは測定によって判断されたことを報告します。以前のバージョンは v1/ に保存します。ユーザーが承認するまでビデオは1つの言語に保ちます。追加のロケールごとに完全な再レンダリングが必要なので、ユーザーが希望するロケールを尋ねます。

外観の契約

  • 柔らかな日差しのあるアイボリー/オート麦の世界。暗いスタジオの背景、彩度の高いピンクは禁止。
  • ニュートラルなチタン電話、フォトスタイルのベージュ壁紙、ダークインクの時計、画面上のカード用の明るいパレット。
  • SF Pro Rounded ヘビー の見出し。2行目はオレンジのグラデーション。
  • マスコットはインタラクションします(着地、踏みつけ、ヘッドバンプ、要素間を跳ねる)。ただ周回したりポーズを取ったりするだけではありません。
  • リアルな柔らかい影。被写界深度なし、ブルームなし。

よくある間違い

間違い修正方法
frames にビートを渡す、または stills に秒を渡すframes = 秒、stills = ビート(20秒 = 32ビート)
マスコットが着地した瞬間にボタンから離れる約0.2ビート留まり、押していることがわかるようにする
マスコットが時刻やラベルの上に立つ覆い隠す情報の横に配置する
opacity でメッシュをフェードする移動、スケーリング、または非表示にする
ブランドカラーがオレンジの見出しグラデーションと競合するブランドはマスコットとバージョン番号に使用し、見出しのグラデーションはユーザーからリクエストがあった場合のみ変更する

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル