muhdaliyan/zeer

目標

GoogleのImagen 4モデルを使用してプロフェッショナルで高品質な画像を生成し、ウェブプロジェクト、アプリケーション、またはクリエイティブワークフローにシームレスに統合します。生成された画像は自動的に適切なプロジェクトディレクトリに保存します。

機能

画像生成

• テキスト記述からフォトリアリスティックな画像を生成
• ウェブサイト向けのロゴ、イラスト、グラフィックを作成
• ヒーロー画像、背景、ビジュアルアセットを生成
• 複数のアスペクト比（1:1、4:3、16:9、9:16）に対応
• 1リクエストあたり1～4枚の画像を生成
• SynthIDウォーターマーク付きの高解像度出力

統合

• 画像をプロジェクトディレクトリに自動保存
• コンテンツに基づいた適切なファイル名を生成
• ウェブプロジェクト（HTML、Reactなど）用の画像アセットを作成
• 論理的なフォルダ構造で画像を整理

サポートするスタイル

• 写真（ポートレート、風景、商品撮影）
• イラスト（デジタルアート、スケッチ、絵画）
• ロゴとブランディング素材
• UI要素と背景
• 歴史的なアートスタイル（印象派、アールデコなど）

手順

ユーザーが画像付きのウェブサイト/プロジェクトをリクエストした場合

1. 画像の必要性を特定

   • プロジェクト要件を分析
   • 必要な画像（ヒーロー、ロゴ、アイコン、背景）を特定
   • Imagenを使用したAI生成画像を希望するかユーザーに確認

2. 画像生成の確認

   • 「GoogleのImagen AIモデルを使用してカスタム画像を生成しますか？」と提案
   • 同意が得られたら生成を開始
   • 拒否された場合は、プレースホルダー画像を使用するかスキップ

3. 画像を生成

   • プロジェクトのコンテキストに基づいた詳細で具体的なプロンプトを作成
   • 各ユースケースに適したアスペクト比を使用
   • generate_imageツールを使用して画像を生成

4. 保存と統合

   • 画像をプロジェクトディレクトリ（例：website-name/images/）に保存
   • 説明的なファイル名を使用（例：hero-background.png、logo.png）
   • 生成された画像を参照するようHTML/CSS/Reactコードを更新
   • コード内で画像パスを提供

直接の画像生成リクエスト

ユーザーが直接画像生成を依頼した場合：

1. 要件を理解

   • ユーザーリクエストから主題、スタイル、コンテキストを抽出
   • 適切なアスペクト比を決定
   • 曖昧な点を明確化

2. 詳細なプロンプトを作成

   • Imagenのベストプラクティスに従った包括的なプロンプトを作成
   • 主題、コンテキスト、スタイル、品質修飾子を含める
   • プロンプトは明確で説明的に保つ

3. 生成と保存

   • 作成したプロンプトでgenerate_imageツールを使用
   • 適切なディレクトリに保存
   • 保存された画像パスをユーザーに表示

Imagenプロンプトガイドライン

プロンプト構造

[スタイル] of [主題] [コンテキスト/背景] [追加の詳細]

写真プロンプト

• 「A photo of...」または「A photograph of...」で始める
• カメラの詳細を追加：「35mm portrait」、「wide angle 10mm」、「macro lens 60mm」
• 照明を含める：「golden hour」、「dramatic lighting」、「natural light」
• フィルムタイプを追加：「black and white film」、「film noir」、「polaroid」

イラストプロンプト

• アートスタイルを指定：「digital art」、「watercolor painting」、「pencil sketch」
• アートムーブメントを参照：「impressionist style」、「art deco」、「minimalist」
• 品質修飾子を追加：「highly detailed」、「professional」、「award-winning」

ロゴプロンプト

• 形式を使用：「A [スタイル] logo for a [業界] company on a solid color background. Include the text [名前].」
• スタイル：ミニマリスト、モダン、トラディショナル、幾何学、アブストラクト
• テキストは25文字以内に保つ

品質修飾子

より良い結果を得るために追加：

• 「highly detailed」
• 「professional」
• 「award-winning」
• 「high resolution」
• 「photorealistic」
• 「4K quality」

アスペクト比

ユースケースに基づいて選択：

• 1:1（正方形） - ソーシャルメディア、プロフィール画像、アイコン
• 4:3（フルスクリーン） - 一般的な写真、商品撮影
• 3:4（ポートレート） - 縦型レイアウト、モバイル画面
• 16:9（ワイドスクリーン） - ヒーロー画像、バナー、風景
• 9:16（ポートレート） - モバイルファーストデザイン、ストーリー

ツール：generate_image

重要：これはデモ用のシミュレーションツールです。実際の実装には以下が必要です：

1. Imagenアクセス権を持つGoogle Cloud APIキー
2. google.genai Pythonライブラリとの統合
3. 適切なAPI設定

使用法

generate_image(
    prompt="A modern minimalist logo for a tech startup on a solid blue background",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

パラメータ

• prompt（必須）：画像の詳細なテキスト記述
• aspect_ratio（オプション）：「1:1」、「4:3」、「3:4」、「16:9」、「9:16」（デフォルト：「1:1」）
• number_of_images（オプション）：1～4（デフォルト：1）
• output_dir（オプション）：画像を保存するディレクトリ（デフォルト：「generated_images」）
• filename（オプション）：カスタムファイル名（デフォルト：自動生成）

例

例1：ウェブサイトのヒーロー画像

ユーザー：「コーヒーショップのランディングページを作成して」

AI：「コーヒーショップのランディングページを作成します。GoogleのImagen AIを使用してカスタムヒーロー画像を生成しましょうか？」

ユーザー：「はい、お願いします」

AI：[プロンプトで画像を生成]
「A professional photograph of a cozy coffee shop interior, warm lighting, wooden tables, espresso machine in background, inviting atmosphere, 16:9 aspect ratio」

[coffee-shop/images/hero-background.jpg に保存]
[画像を使用するようHTMLを更新]

例2：ロゴ生成

ユーザー：「フィットネスアプリFitTrackのロゴを生成して」

AI：[プロンプトで生成]
「A modern minimalist logo for a fitness company on a solid color background. Include the text FitTrack. Geometric shapes, energetic, professional」

[generated_images/fittrack-logo.png に保存]

例3：複数アセット

ユーザー：「ポートフォリオウェブサイトを作成して、画像も生成して」

AI：「ポートフォリオウェブサイトを作成します。Imagen AIを使用してカスタム画像（ヒーロー背景、プロフィール写真プレースホルダー、プロジェクトサムネイル）を生成しましょうか？」

ユーザー：「はい、生成してください」

AI：[複数の画像を生成]
1. ヒーロー背景：「Abstract geometric pattern, modern, professional, muted colors, 16:9」
2. プロジェクトサムネイル1：「Minimalist tech illustration, clean lines, blue and white, 4:3」
3. プロジェクトサムネイル2：「Creative design mockup, modern interface, professional, 4:3」

[すべてをportfolio/images/に保存]
[画像参照を含むHTML/CSSを更新]

ベストプラクティス

1. 常に許可を求める - 画像を生成する前に、AI生成画像を希望するかユーザーに確認
2. コンテキストに応じたプロンプト - プロンプトをプロジェクトのスタイルと目的に合わせる
3. 適切なアスペクト比 - ユースケースに合った比率を選択
4. 説明的なファイル名 - 明確で意味のあるファイル名を使用（hero-bg.png、image1.pngではない）
5. 整理された構造 - 論理的なディレクトリ（images/、assets/など）に画像を保存
6. 品質優先 - プロフェッショナルな結果を得るために品質修飾子を使用
7. 必要に応じて反復 - ユーザーが満足しない場合は、プロンプトを調整して再生成

フロントエンドプロジェクトとの統合

このスキルでウェブサイトを構築する場合：

1. 最初に画像ディレクトリを作成
2. HTML/CSSを記述する前に画像を生成
3. コード内で相対パスを使用：<img src="images/hero.jpg">
4. 生成された画像を説明するaltテキストを追加
5. 複数サイズのレスポンシブ画像を検討

制限事項

• Imagenは英語のプロンプトのみ対応
• 画像内のテキストは25文字まで
• 生成された画像にはSynthIDウォーターマークが含まれる
• Google Cloud APIアクセスが必要
• APIティアに基づくレート制限あり

注意事項

このスキルは、以下と組み合わせると最適に機能します：

• frontend-designスキル（完全なウェブサイト作成）
• code-helperスキル（プロジェクトセットアップ）
• file-operationsスキル（アセット整理）