Communitygithub.com

ParthJadhav/apple-like-demo

Appleスタイルのプロダクト発表・デモ動画をDiffusion Studioコンポジションとして作成します。「プロモ/ローンチ/デモ動画を作って」「Apple風の動画を」といった指示や、スクリーンショットのフィードバックをもとに動画を反復改善する際に使用します。

apple-like-demo とは?

このスキルは、Apple.comのプロダクトページを彷彿とさせる、軽やかで洗練されたプロダクトデモ動画を生成するためのものです。Diffusion StudioのJSXコンポジションとして構築されており、すべてのフレームが決定論的で、エクスポート前にキャプチャ検証が可能です。動画は、フルブリードのグラデーションカード、リアルなSF Symbolsとアプリアイコン、そしてコードで生成された音楽(126 BPM、キックとクラップ、アルペジオなど)で構成されます。各カードに一つのメッセージを配置し、ハイライトされたキーワードと共に、読みやすいが速いペース(約45秒)で展開します。対応プラットフォームはDiffusion Studioであり、ワークフローとしては、まず製品サイトのユースケースやコピーを調査した後、`BRIEF.md`と`POSITIONING.md`を作成し、テンプレートをベースにタイムライン、カード、デモを順に構築します。最後に`dapi check`と`dapi capture`で全フレームを検証し、`dapi export`で出力します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ParthJadhav/apple-like-demo/tree/HEAD/skills/apple-like-demo

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

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

ドキュメント

Apple風プロダクトデモ動画

目標は、動くApple.comのプロダクトページです。明るい背景、大きなタイトラッキングのSF Pro、一度に一つのメッセージ、フルブリードのカラーカード、製品の実際のUI、本物のSF Symbols、本物のアプリアイコン、アップビートな作曲トラック、そして最後に価値へのプレーンな呼びかけ。Diffusion Studio JSXコンポジションとして構築されているため、すべてのフレームが決定論的で、エクスポート前に確認できます。

このファイルの隣にある templates/promo-project/ から始めてください(完全に動作するコンポジションです:Macのロック画面ユーティリティのローンチフィルム)。その BRIEF.md と POSITIONING.md を読んで、完成形を確認してください。

作業スタイル

  • フィードバックは簡潔な箇条書きで届き、多くの場合、対象となるフレームのスクリーンショットが添付されています。すべてのフィードバックに対応し、各フレームをキャプチャで検証し、エクスポートし、フレームコンタクトシートを添えて返信してください。
  • ブレインストーミングを求められた場合は、各1行で3~4のオプションをリストし、待たずに最良のものを構築してください。
  • ラウンドごとに BRIEF.md(時間とコピーを含むビートテーブル)と POSITIONING.md(出典付きのコピー根拠)を最新の状態に保ってください。
  • 証拠を作り出さないでください。架空のユーザー数、引用、ロゴは禁止です。実際のスクリーンショット、製品ソースからの実際のコピー文字列、実際のアイコンを使用します。
  • 忠実に報告してください:キャプチャで検証したものとそうでないものを明確にしてください。

構成

カードごとに一つのメッセージ、前後はハードカット。カード間にデモショットが存在する場合はそれを挟みます。カットは音楽のビートグリッドに合わせます。

  1. フック、3秒でスクロールを止める — 視聴者の問題、製品の動作、ロゴなし。ユースケースごとに1カード:1つのウィンドウ+1行、そのペアを中フレームにグループとして中央揃え。ウェブサイトに記載されているすべてのユースケースをカバーします。主要ペルソナだけでなく(「あなたのエージェントはあと3時間必要です。」 / 「あなたのレンダリングはあと40分必要です。」 / 「あなたのビルドは半分です。」 / 「あなたは出かけなければなりません。」)。
  2. 問題 — テキストのみのカード。悪い代替案を中フレームに積み上げ、コストを赤で表示(「ロックする?Macがスリープします。」)。
  3. 明らかにする — 音楽のヒットに合わせてアイコンがポップ、ワードマーク、ウェブサイト自身のヒーローライン(ランディングページとのメッセージ整合)。
  4. 「対象」グリッド — サイトのユースケースを4つのタイルで表示:色付きの円とSF Symbol、タイトル、その下に実際のアプリアイコン。サブテキストなし。
  5. デモ — 実際のUIが一つのことを行い、キャプションはアクションのすぐ下に、キーワードをハイライト。
  6. 機能カード — 見出しにベネフィット、サブに機能。青 / スレートグレイン / 緑 / グラデーションテキストの黒 / ページグレー。見せる、語らない:夜通し進む時計、「✕ ブロック済み」と赤で刻印されたキーキャップ、ロック画面に到着する通知。
  7. 成果 — 完了した作業に戻り、すべてのジョブが完了した状態。
  8. その他の機能グリッド — 4タイル、それぞれ短い1行。
  9. 信頼 — 「クラウドなし。トラッキングなし。サブスクリプションなし。」
  10. サインオフ — アイコン+名前、「7日間無料でお試しください。」、「その後は$8.99、一回のみ。」、URL。他には何もなし。

長さは約45秒。フックカード ≈ 1.3秒、テキストカード ≈ 2秒、デモ 1.6~2.8秒、グリッド ≈ 3.4秒、サインオフ ≈ 7秒。テンポが速いですが、各画面は読み終えるのに十分な長さを保ちます。

ルック

トークンは references/design.md にあります。簡単に言うと:

  • ページ背景 #f5f5f7、テキスト #1d1d1f、セカンダリ #6e6e73、アクセント=製品の青、システムレッド #ff3b30(コストとTouch IDグリフ用)、システムグリーン(成功用)。ライトモードのみ。
  • SF Pro(-apple-systemを使用)。見出しは76~120 px、ウェイト600~700、レタースペーシング −0.03~−0.04 em。時計にはSF Pro Rounded。
  • Apple.comのプロダクトページの精神に則った、フルブリードのグラデーションカード(青、緑、SVGグレイン入りスレート、グラデーションでクリップされたモノテキスト付き黒)。
  • リキッドグラス表面:半透明の白、縁取りの光、カプセル形状、幅広のソフトシャドウ、背景のぼかし。製品UIは、同じサイズ、ウェイト、コピーで、製品自身のソースから再構築。
  • macOSからレンダリングされた実際のSF Symbols(tools/render-symbols.swift)。インストール済みアプリから抽出された実際のアプリアイコン。単語のハイライトは Rich.tsx を通じて **…** で行います。
  • テキストは中央揃え。ウィンドウとその行は中央揃えのグループとして一緒に動きます。上部で何かアニメーションしている間に下部のテキストを変更しないでください。キャプションはアクションの隣に配置し、行が着地するまで他のモーションを遅らせてください。

コピー

原理と出典は references/copy.md にあります。ルール:

  • 簡単な単語、短い行、事実を含まない限りサブテキストなし。
  • 見出しは製品の機能を完全に説明。サイトのものを再利用。
  • 具体的な数字(「あと3時間」、「340テスト」、「2:06 AM」)。
  • ベネフィットを先に、機能を証明として。購入を阻む反論(プライバシー、ロックアウト、価格、「自分のケースに合うか」)に対処。
  • CTAは価値への呼びかけで、価格を横に表示。

オーディオ

コードでBGMを作曲(tools/make-music.py、numpy + ffmpeg):126 BPM、1小節目からすべてのビートでキック、2/4拍子でクラップ、プラックアルペジオ、サブ、パッド。リバイズ+インパクトで明らかにする瞬間とロックを強調。アンロックでブレイクダウン。サインオフの下で解決。カードカットごとにソフトなチック音。製品に実際のシステムサウンドがあればそれを使用。ライセンス音楽は使用しません。

ワークフロー

  1. 製品のサイトとソースを読み、ユースケース、コピー文字列、UIキャプチャ、アイコンを収集。references/copy.md を読む。
  2. BRIEF.md と POSITIONING.md を書く。
  3. templates/promo-project/ をコピーし、src/theme.ts で ROOT を設定する。
  4. 最初にタイムライン(src/timeline.ts:モーメント、コピー、トゥイーン)、次にカード、最後にデモを構築する。モーメントに合わせて音楽を再生成する。
  5. 検証:dapi check を実行し、次に dapi capture ですべてのビートのコンタクトシートを取得。それらを読み、修正し、その後初めて dapi export を実行する。MP4を調べる(長さ、オーディオピーク)し、返信用にサンプルフレームをタイル表示する。
  6. パイプライの詳細とラスタライザの注意点:references/pipeline.md。

関連スキル