tuanhuyptit/gwd-banner-animation

GWD バナーアニメーション

提供されたデザインを保持し、モーションを追加した、編集可能なGoogle Web Designerのソースプロジェクトを作成します。 すべてのリクエストは、1つの 入力 と1つの モーションモード の組み合わせです。

入力	条件
A. レイヤー化されたGWDフォルダ	ユーザーがGWDプロジェクト（HTML + assets/ + gwd_workspace.json）を提供する場合
B. Illustratorアートボード	ユーザーがIllustratorでデザインを開いているか、.aiファイルを指定し、GWDプロジェクトを希望する場合

モーションモード	条件
テンプレート	ユーザーが同じセットのサンプルGWDバナーを提供し、同じエフェクトを希望する場合（「giống hiệu ứng mẫu」、セット内の別のサイズ）
フリー	サンプルがない場合、またはユーザーが新しい/カスタムモーションを依頼する場合（「tự làm hiệu ứng」、「hiệu ứng tùy ý」）

リクエストからモードを選択します。サンプルが提供された場合はテンプレートモード、それ以外はフリーモードです。 類似したブランディング、アセット、フォルダ、サイズのみではテンプレートモードを意味しません。リクエストが真に曖昧な場合のみ質問してください。

ツール

• scripts/inspect_gwd_banner.py <project>: キャンバス、レイヤー、ソース、クラスを一覧表示します。
• scripts/prepare_layers.py, scripts/derive_light_layers.py: Illustratorの書き出しから、トリミングされた2xアセット + layout.json を生成します（references/illustrator-export.md）。
• scripts/extract_gwd_motion.py <project> -o spec.json: GWDプロジェクトからスペックを生成します。
• scripts/adapt_template_motion.py: テンプレートスペック + 新しいレイアウトから、新しいサイズ用のスペックを生成します（references/template-mode.md）。
• scripts/build_gwd_project.py spec.json <out>/<Name>: スペックから編集可能なGWDプロジェクトを生成します（ランタイムは assets/gwd-runtime から、Advancedモードのワークスペース）。スペック形式: references/spec-format.md。
• scripts/apply_half_scale.py <project>: 2x画像を、スケール0.5の自然なサイズの要素に変換します（GWDルール参照）。
• scripts/validate_gwd_banner.py <project>, scripts/package_gwd_banner.py <project> [zip]。

PythonスクリプトはPillowとnumpyを必要とします（python3 -m pip install --user pillow numpy）。

ワークフロー

1. ソースを保護する。 提供されたGWDフォルダとサンプルは読み取り専用として扱い、書き込み可能な出力フォルダで作業します。Illustratorでは、ユーザーのアートワークを決して変更せず、一時的な GWD_* レイヤーに複製し、その後削除します。
2. レイヤーを取得する。
   • 入力A: プロジェクトをコピーし、inspect_gwd_banner.py を実行し、レイヤーを意味（背景、ラベル、見出し、サポートコピー、オファー、CTA、イラスト、製品、グロー、アクセントラインなど）にマッピングし、視覚的に確認します。
   • 入力B: references/illustrator-export.md に従います。すべてのレイヤーを 2x の透明な背景を持つフルアートボードとして書き出し、その後 prepare_layers.py と、ブレンドモードに依存するグローのために derive_light_layers.py を実行します。完成したアートワークの _ref2x.png を書き出します。
3. モーション。
   • テンプレートモード: references/template-mode.md に従います。サンプルを抽出し、新しいレイアウトに適合させ、スペックをレビューします。サンプルのシーケンス、タイミング、イージング、ループは変更しないでください。
   • フリーモード: references/motion-design-guide.md を読んでください。キーフレームを書く前に、1文のコンセプト、階層、1つのシグネチャモーション、エントランスシーケンス、強調、読み取り可能なホールドを定義し、この構成から選択します。コンテキスト内の最近の作業と比較し、以前のシグネチャモーションやシーケンスを繰り返す場合は再設計します。以下のGWDルールに従ってスペック（入力B）を作成するか、コピーしたHTML（入力A）を編集します。
4. ビルド。 入力B（または任意のスペック）: build_gwd_project.py を実行します。入力Aをその場で編集する場合: HTML、アセット、ランタイムファイルを保持し、gwd_workspace.json に `