feature-image

機能やアップデートの告知用に、ブランドイメージに合ったソーシャルメディア画像を生成します。画像はプロジェクトのブランドに合わせてスタイルを設定した HTML ページとして作成し、Playwright でスクリーンショットを撮影します。

フェーズ 1：Playwright が利用可能か確認する

npx playwright --version 2>/dev/null || (echo "Installing Playwright..." && npx playwright install chromium)

インストールに失敗した場合は、ユーザーに伝え、npm install -D playwright && npx playwright install chromium を提案します。

フェーズ 2：変更内容を把握する（Git を活用）

最近の Git 履歴を分析し、告知する機能やアップデートの内容を把握します。

1. 最近のコミットを確認する：

   git log --oneline -20
   

2. 現在の差分を確認する（ステージ済み＋未ステージ）：

   git diff HEAD --stat
   git diff HEAD -- '*.tsx' '*.jsx' '*.vue' '*.svelte' '*.html' '*.css' '*.scss' '*.rb' '*.erb'
   

3. 最近のブランチ名を確認する（機能の説明になっていることがよくあります）：

   git branch --show-current
   

4. この情報をもとに、機能やアップデートの内容をまとめます。

5. AskUserQuestion で調査結果をユーザーに提示します：

   • ヘッダー：「機能」
   • 質問：「最近の変更を見ると、[X] に取り組んでいるようです。この告知では何について取り上げますか？」
   • 選択肢：
     • 「[自動検出した機能の説明]」- 検出した内容を使用
     • 「その他」- ユーザーが内容を説明
   • 引数として $1 が指定されている場合は、質問せずにその内容を使用します。

フェーズ 3：告知文を自動生成する

画像に載せるテキストを作成します。

• 見出し：機能についての、短く印象的な見出し（3～8 語）
• タグライン：内容を補足する 1 文
• バッジ／ラベル：任意のカテゴリラベル（例：「新機能」、「アップデート」、「改善」）

AskUserQuestion でユーザーに提示します：

• ヘッダー：「テキスト」
• 質問：「画像に載せるテキスト案はこちらです。調整しますか？」
• 選択肢：
  • 「このままでよい」- そのまま使用
  • 「見出しを編集」- ユーザーが見出しを指定
  • 「すべて編集」- ユーザーがすべてのテキストを指定
  • 「テキストを載せない」- テキストなしで画像を生成

フェーズ 4：プラットフォームとサイズを選択する

AskUserQuestion を使用します：

• ヘッダー：「プラットフォーム」
• 質問：「この画像はどのプラットフォーム用ですか？」
• 選択肢：
  • 「Twitter/X（1200x675）」- 標準的な Twitter カードサイズ
  • 「LinkedIn（1200x627）」- LinkedIn の共有画像
  • 「Instagram（1080x1080）」- 正方形フォーマット
  • 「Open Graph（1200x630）」- 汎用的なソーシャルプレビュー

Playwright のビューポート用に、選択した幅と高さを保存します。

フェーズ 5：ビジュアルスタイルを選択する

AskUserQuestion を使用します：

• ヘッダー：「スタイル」
• 質問：「画像にはどのようなビジュアルスタイルを使用しますか？」
• 選択肢：
  • 「スタイライズしたモックアップ（おすすめ）」- アプリの実際のコンポーネントと CSS を使った、簡略化され洗練された UI 要素の再現。認識しやすい一方で、ピクセル単位の忠実な再現ではありません。
  • 「スクリーンショット＋オーバーレイ」- 実行中のアプリのスクリーンショットを撮影し、ブランドに合わせたテキスト、グラデーション、注釈を重ねます。
  • 「抽象／イラスト風」- ブランドカラーとタイポグラフィを使って、特定の UI を再現せずに機能を表現する幾何学模様やグラデーションのデザインを作成します。

スタイル：スタイライズしたモックアップ

このスタイルは最も手間がかかります。実際のスクリーンショットではなく、アプリらしさを感じさせる UI 表現を作成することが目標です。

1. 機能に関連する UI コンポーネントを見つけます：

   • 機能に合致するコンポーネントファイルを検索します（例：「ダークモード」が機能なら、テーマ切り替えコンポーネントを探します）
   • コンポーネントのマークアップを読み、UI の構造を把握します
   • ボタン、カード、入力欄、テーブル、ナビゲーション項目など、主要なビジュアル要素を確認します

2. コンポーネントからビジュアルのパターンを抽出します：

   • 角丸の値
   • シャドウのスタイル
   • 具体的なレイアウトパターン（サイドバー＋メイン領域、カードグリッドなど）
   • アイコンの使い方
   • インタラクティブ要素のスタイル（ボタン、トグル、入力欄）

3. 次の条件を満たす、簡略化した HTML モックアップを作成します：

   • 機能の主要な UI 要素を、スタイリッシュでエディトリアルなレイアウトで表示する
   • コードベースにある実際のブランドカラー、フォント、角丸を使用する
   • 柔らかなシャドウ、控えめなグラデーション、ゆとりのある余白などで、さりげなく見栄えを整える
   • 適切であれば、UI を「ブラウザーウィンドウ」や「デバイスフレーム」で囲む
   • 完全に動作するページではなく、厳選してアートディレクションを施した構成にする

スタイル：スクリーンショット＋オーバーレイ

1. 起動中のアプリの URL をユーザーに尋ねます（一般的な localhost の URL を提案します）
2. Playwright で該当するページに移動します
3. ベースとなるスクリーンショットを撮影します
4. 次の要素を含む HTML オーバーレイページを作成します。
   • スクリーンショットを背景画像として埋め込みます
   • テキストを読みやすくするため、ブランドカラーを使ったグラデーションオーバーレイを追加します
   • 見出しとタグラインのテキストを重ねて配置します
   • 該当する場合は、バッジ／ラベルを追加します
5. オーバーレイページのスクリーンショットを撮影します

スタイル：抽象／イラスト

次の要素を含む HTML ページを作成します。

• ブランドカラーを使ったグラデーションまたは幾何学的な背景
• プロジェクトのロゴ（/public、/assets、または /src/assets に見つかった場合）
• プロジェクトのフォントを使った、大きく太字の見出しテキスト
• 補足となるタグライン
• 機能カテゴリを想起させる抽象的な図形、線、またはパターン
• 余白をたっぷり使った、すっきりとモダンなデザイン

フェーズ 6：ブランドの詳細分析

ここが最も重要なフェーズです。ここには十分な時間をかけてください。生成される画像は、ブランドカラーを入れ替えただけの汎用テンプレートではなく、製品を作ったチームが手がけたかのように感じられる必要があります。目標は、デザインチームが作ったものと見分けがつかないほど、ブランドのビジュアルアイデンティティを深く理解することです。

6.1：まず既存のマーケティング素材を調べる

設定ファイルを確認する前に、ブランドが実際にどのように自らを表現しているかを調べます。次の情報を主な参考資料として使ってください。

1. ランディングページとマーケティングページ — 次を検索します。

   • pages/index、app/page、pages/home、components/landing/、components/marketing/、components/hero
   • 名前に landing、marketing、home、hero、cta が含まれるファイル
   • これらのファイルを詳しく読みます。正確なトーン、レイアウトのパターン、テキストとビジュアルの組み合わせ方、グラデーションの方向、装飾要素、背景の扱い方に注目します

2. 既存のソーシャル／OG 画像 — 次を検索します。

   • /public または /assets 内の og-image、social、share、twitter、preview
   • リポジトリ内の既存の告知画像やマーケティング画像
   • ソーシャル向けにブランドが何を「ブランドらしい」と考えているかを知るための、最も有力な参考資料です

3. ブログまたは変更履歴ページ — ページ／ルートのファイル内で次を検索します。

   • blog、changelog、updates、announcements
   • これらから、ブランドが更新情報をどのように伝えているかがわかります。そのトーンやスタイルを反映します

4. メールテンプレート — 次のテンプレートを検索します。

   • email、mailer、newsletter
   • これらから、ブランドのビジュアル言語の別の側面がわかります

5. README とドキュメント — ブランドの個性がわかるバッジ、バナー画像、スタイル付きヘッダーがないか確認します

6.2：カラーパレット

プライマリカラーやセカンダリカラーだけでなく、カラーシステム全体を抽出します。

1. Tailwind の設定（tailwind.config.js、tailwind.config.ts）：

   • theme.extend.colors ブロック全体を読みます
   • プライマリ、セカンダリ、アクセント、ニュートラル、成功、警告、エラーを含むパレット全体を確認します
   • 色の関係性に注目します。ブランドはどのような色の組み合わせを使っていますか？

2. CSS カスタムプロパティ（グローバル CSS ファイル内で :root を検索）：

   • --primary、--brand、--accent、--background、--foreground、--muted、--card などを探します
   • HSL／RGB／hex の値を抽出します
   • ライトモードとダークモードで別々のパレットがあるか確認します

3. デザイントークンファイル（ファイル名に tokens、theme、design-system が含まれるものを検索）：

   • 色の定義とセマンティックな対応関係を抽出します

4. マーケティングコンポーネントでの実際の使われ方：

   • ヒーローセクション、CTA ボタン、機能カード、料金表を読みます
   • 背景、テキスト、アクセント、ボーダーにそれぞれどの色が使われているか確認します
   • グラデーションの定義（正確な色の位置、方向、使われている箇所）を探します
   • ブランドを象徴する色の組み合わせ（例：暗い背景＋明るいアクセント、柔らかなパステルカラー、鮮やかな原色）を見つけます

6.3: タイポグラフィ

1. フォントのインポート（フォント URL を含む @import、@font-face、Google Fonts のリンクを検索します）
2. Tailwind の fontFamily 設定
3. body／見出しの CSS font-family 宣言
4. フォントパッケージの Package.json（例：@fontsource/*、next/font）
5. 実際の見出しスタイル -- マーケティングページの見出しを確認し、以下を調べます。
   • フォントの太さ（bold？ black？ medium？）
   • 文字間隔（狭い？ 通常？ 広い？）
   • テキストの変換（大文字？ 通常？）
   • 行の高さ
   • 見出しのサイズと本文の相対的な大きさ

画像には、検出したフォントを使用します。Google Font の場合は、HTML に <link> タグを含めます。ローカル／カスタムフォントの場合は、類似したシステムフォントまたは Google Font の代替フォントを使用します。

6.4: ロゴとアセット

ロゴファイルを検索します。

public/logo*, public/images/logo*, src/assets/logo*, assets/logo*
public/*.svg (check for logo-like SVGs)
public/brand*, src/assets/brand*

ロゴが見つかった場合は、画像に埋め込みます（インライン SVG または Base64 エンコード）。

以下も確認します。

• アプリで使用されているアイコンライブラリやカスタムアイコンセット
• イラストのスタイル（線画？ 塗りつぶし？ デュオトーン？）
• 背景のパターンやテクスチャ
• 装飾要素（ドット、グリッド、ブロブ、リング）

6.5: ビジュアルランゲージとパターン

基本的な設定だけでなく、ブランドの視覚的な 個性 も調べます。

• 角丸：アプリは角丸（rounded-xl、rounded-2xl）ですか、それとも角張っていますか（rounded-none、rounded-sm）？まったく同じ角丸を使用します。
• シャドウ：柔らかく浮き上がった印象ですか、それともフラットですか？どのようなシャドウ値が使われていますか？（例：shadow-lg、shadow-sm、またはシャドウなし）
• ダークモード：ダークモードがデフォルトまたは主要なテーマですか？背景色は何色ですか？
• グラデーション：グラデーションは目立つ形で使われていますか？方向、色、使用箇所はどうなっていますか？
• ガラス／ぼかし効果：backdrop-blur は使われていますか？半透明のカードはありますか？
• 境界線：区切りに境界線を使っていますか、それとも境界線はありませんか？色や不透明度はどうなっていますか？
• 余白のリズム：デザインは密でコンパクトですか、それとも余白をたっぷり取っていますか？
• 装飾要素：ブランドでは、背景のグリッド、ドットパターン、グロー効果、ノイズテクスチャ、グラデーションオーブを使用していますか？
• アニメーションのスタイル：画像にはアニメーションは表示されませんが、滑らかなスプリングアニメーションを使うブランドと、アニメーションを使わないブランドでは、その 印象 から個性が分かります。

6.6: ブランド概要の作成

画像を作成する前に、ブランドのビジュアルアイデンティティを短く内部でまとめます。

• 「このブランドは、[色] のアクセントを使った [ダーク／ライト] 背景を採用しています。タイポグラフィは [フォント]、太さは [太さ]、文字間隔は [狭い／通常] です。美的な印象は [ミニマル／大胆／遊び心がある／企業的] です。主なビジュアルモチーフは [グラデーション／ガラス／角張った形など] です。マーケティングページは [レイアウトパターン] を使い、[装飾要素] を取り入れています。」

画像のデザインを決める際は、この概要を指針にします。すべての要素について、「この要素はランディングページに自然になじむか？」という基準を満たすようにします。

フェーズ 7: HTML 画像ページを作成する

一意な一時ファイル： 複数のエージェントを並行して実行する際の競合状態を避けるため、この実行用のスラッグ形式の ID を生成します。形式は {project-slug}-{feature-slug}-{short-id} です。project slug はディレクトリ名または package.json の名前から取得し、feature slug は機能を 2～3 語で要約した kebab-case とし、short ID はランダムな英数字 4～6 文字にします。例：baremetrics-dark-mode-a3f2。以下の一時ファイルパス（[UNIQUE_ID] として表示）では、このスラッグを使用します。HTML ファイルとキャプチャスクリプトの両方で、同じスラッグを使います。

/tmp/feature-image-[UNIQUE_ID]-page.html に、以下の条件を満たす自己完結型 HTML ファイルを作成します。

1. 選択した寸法と完全に一致する（ビューポートサイズで、スクロールなし）
2. すべてのスタイルをインラインで埋め込む（外部 CSS 依存なし）
3. Google Fonts のリンク（または同様の CDN）を使ってフォントを含める
4. 検出したブランドカラー、フォント、ビジュアルパターンを使う
5. 選択したテキストオーバーレイを含める（見出し、タグライン、バッジ）
6. 選択したビジュアルスタイルに合わせる（モックアップ、スクリーンショット＋オーバーレイ、または抽象表現）

HTML 構造テンプレート

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css2?family=[DETECTED_FONT]&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: [WIDTH]px;
      height: [HEIGHT]px;
      overflow: hidden;
      font-family: '[DETECTED_FONT]', system-ui, sans-serif;
    }
    body {
      background: [BRAND_GRADIENT_OR_COLOR];
      color: [TEXT_COLOR];
      display: flex;
      /* Layout depends on style choice */
    }
    /* ... style-specific CSS ... */
  </style>
</head>
<body>
  
</body>
</html>

デザイン品質ガイドライン

画像はプロがデザインしたように見える必要があります。次の原則に従ってください。

• 階層：見出しを最も大きな要素にします。タグラインで見出しを補足します。バッジは小さくします。
• コントラスト：テキストは背景に対して十分に読みやすくします。
• 配置：明確なグリッドを使用します。左揃えまたは中央揃えで統一します。
• 仕上げ：控えめなシャドウ、滑らかなグラデーション、洗練されたタイポグラフィ（文字間隔、行間）を使います。
• 抑制：色は2～3色までにします。フォントのウェイトは2種類までにします。

スペースの使い方（重要）

これらの画像は、SNSのフィード、タイムラインカード、リンクプレビューなど、小さいサイズで表示されます。1ピクセルも無駄にできません。使われていないスペースは無駄です。

必須ルール：

1. キャンバスを埋める。 コンテンツには利用可能な領域の85～95%を使います。余白は詰め、幅1200pxの画像なら最大40～60pxにします。100px以上は避けてください。
2. テキストを大きくする。 見出しは1倍表示で最低48～72pxにします。見出しが短い（3～4語）場合は、さらに大きくし、80～100pxにします。テキストはサムネイルサイズ（幅約400px）でも読める必要があります。画像を目を細めて見たときに見出しが読めないなら、小さすぎます。
3. 中央を空けない。 上部に見出し、下部にUIモックアップを置くレイアウトでは、中央に大きな隙間を作らないでください。要素を詰めて配置するか、補足コンテンツでスペースを埋めます。
4. UIモックアップを大きくする。 スタイルを加えたUI要素を表示する場合、画像領域の少なくとも50～60%を占めるようにします。背景のグラデーションの中に小さなカードを浮かべないでください。
5. 必要に応じて端まで広げる。 UIモックアップはキャンバスの端からはみ出してもかまいません。すべてを余白の中に中央配置するより、動きが出てスペースを有効に使えます。
6. バッジやラベルのテキストは14～18pxにする。 それより小さくしないでください。見える大きさにする必要があります。
7. サムネイルサイズで確認する。 仕上げる前に、画像を幅400pxに縮小した状態を想像してください。それでも見出しを読めますか？ UIに何が表示されているか分かりますか？ 分からない場合は、さらに大きくしてください。

避けるべきよくあるミス：

• 広い背景の中央に小さな見出しを配置する。拡大して、隅や端に寄せてください。
• グラデーションに囲まれた、キャンバスの30%程度のUIモックアップ。目立つ大きさにしてください。
• 余白が多すぎて、コンテンツが空間に浮いているように見える。
• タグラインのテキストが14～16px。最低20～24pxに大きくしてください。
• すべての要素の間隔を同じにして、関連する項目を密にまとめていない。

フェーズ8：Playwrightでスクリーンショットを撮る

Node.jsスクリプトを作成して実行します。

import { chromium } from 'playwright';
import { readFileSync } from 'fs';

async function capture() {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: [WIDTH], height: [HEIGHT] },
    deviceScaleFactor: 2, // Retina quality
  });
  const page = await context.newPage();

  // Load the HTML file
  const html = readFileSync('/tmp/feature-image-[UNIQUE_ID]-page.html', 'utf-8');
  await page.setContent(html, { waitUntil: 'networkidle' });

  // Wait for fonts to load
  await page.waitForTimeout(1000);

  await page.screenshot({
    path: './feature-image.png',
    type: 'png',
  });

  await browser.close();
  console.log('Saved: ./feature-image.png');
}

capture().catch(console.error);

スクリプトを/tmp/feature-image-[UNIQUE_ID]-capture.mjsに保存して実行し、その後クリーンアップします。

node /tmp/feature-image-[UNIQUE_ID]-capture.mjs && rm /tmp/feature-image-[UNIQUE_ID]-capture.mjs /tmp/feature-image-[UNIQUE_ID]-page.html

フェーズ9：確認して提示する

1. ファイルが存在し、適切なサイズであることを確認します。

   ls -la ./feature-image.png
   sips -g pixelWidth -g pixelHeight ./feature-image.png 2>/dev/null || file ./feature-image.png
   

2. Readツールを使って画像を読み込み、ユーザーに表示します。

3. AskUserQuestionを使って、調整が必要かどうかを尋ねます。

   • ヘッダー：「結果」
   • 質問：「機能紹介画像をご覧ください。いかがですか？」
   • 選択肢：
     • 「とても良い」— 完了
     • 「色を調整」— カラーパレットを調整
     • 「テキストを調整」— 見出しやタグラインを変更
     • 「別のスタイルを試す」— 別のビジュアルスタイルに切り替え
   • 調整が必要な場合は、該当するフェーズに戻って再生成します。

4. 概要を出力します。

   Generated: ./feature-image.png
   Size: [W]x[H] @ 2x ([actual_W]x[actual_H] pixels)
   Platform: [chosen platform]
   Style: [chosen style]
   

エラー処理

• インストールを試してもPlaywrightが見つからない場合：npm install -D playwright && npx playwright install chromiumを使った手動インストールを提案します。
• Gitの履歴がない場合：Gitの分析をスキップし、機能についてユーザーに直接尋ねます。
• ブランドカラーが見つからない場合：すっきりとしたニュートラルな配色（暗い背景、白いテキスト、青のアクセント）を使用します。
• フォントが検出されない場合：安全でモダンな既定のフォントとしてInter（Google Font）を使用します。
• スクリーンショットの撮影に失敗した場合：HTMLファイルが正しく作成されているか確認し、よりシンプルなレイアウトを試します。
• スクリーンショットでフォントが読み込まれない場合：待機時間を延長するか、システムフォントに切り替えます。

最良の結果を得るためのヒント

1. ブランド検出が機能するよう、このスキルはプロジェクトディレクトリ内で実行してください
2. アプリで開発サーバーが稼働している場合は、「Screenshot + overlay」スタイルが最も本物に近い結果を生み出します
3. 抽象的なスタイルでは、参照する UI コンポーネントがなくても、このスキルをうまく利用できます
4. 生成される画像は 2 倍の解像度（Retina）なので、どの画面でも鮮明に表示されます