スキル自身の言葉で
ソーシャルメディアのカバー、広告キャンペーン、ウェブサイトのヒーロー、印刷物向けにバナーをデザインし、HTML/CSSで複数のアートディレクションのオプションを生成します。構造化された質問（プラットフォーム、コンテンツ、ブランド、スタイル、数量）を通じて要件を収集し、同梱のサイズおよびセーフゾーンのガイダンスを参照し、プラットフォームに合わせたピクセル精度のPNGを正確な寸法で書き出します。
ミニマリスト、グラデーション、太字タイポグラフィ、写真ベース、ジオメトリック、グラスモーフィズム、ネオンなど、22種類のアートディレクションスタイルに対応しています。Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、カスタム形式を扱います。デフォルトではリクエストごとに3つのオプションを生成します。ユーザー提供のアセット、CSSで構築したビジュアル、または任意生成の背景を使用し、ブランドルールを独自に作り出すことはありません。動画編集、フルウェブサイトデザイン、印刷制作は扱いません。
生成されるもの
- プラットフォームに合わせた正確な寸法のPNG画像ファイルを、ケバブケースの命名でassets/banners/{campaign}/に書き出します
- 画像キャプチャが利用できない場合の、各バナーバリアントのHTML/CSSソースコード
仕組み
- 01構造化された質問による要件収集
目的（ソーシャルカバー、広告、ヒーロー、印刷物）、プラットフォームまたはカスタム寸法、コンテンツ（見出し、サブテキスト、CTA、ロゴ）、ブランドガイドライン、スタイルの好み、数量（デフォルト3オプション）を収集します。
- 02アートディレクションとセーフゾーンの調査
対象フォーマット、セーフゾーン、適したスタイルについて、同梱のbanner-sizes-and-styles.mdリファレンスを読み込みます。
- 03各オプションをHTML/CSSでデザイン
セーフゾーンルール（重要なコンテンツを中央70〜80%に配置）に従い、最大2種類の書体、単一のCTA、4.5:1のテキストコントラストを用いて、プラットフォームに合わせた正確な寸法でバナーを作成します。
- 04オプションごとにビジュアルソースを選択
ユーザー提供のアセットを優先し、依存関係のない結果を得るためにCSSで構築したビジュアル（グラデーション、ジオメトリックフォーム）を使用します。ランタイムがサポートしていれば、対象のアスペクト比で背景を任意生成することもできます。
- 05バナーをPNG画像として書き出す
各バナーを正確なビューポートでブラウザ上にプレビューし、標準のスクリーンショット機能でPNGとしてキャプチャし、ピクセル寸法、セーフゾーンのクロップ、フォントの読み込み、画像品質を検証します。
- 06根拠とともにオプションを提示
書き出されたすべての画像を並べて表示し、アートディレクションのスタイル名、プレビュー、主要なデザインの根拠、ファイルパス、寸法を示します。