muhdaliyan/zeer

Goal

Generate professional, high-quality images using Google's Imagen 4 models and integrate them seamlessly into web projects, applications, or creative workflows. Automatically save generated images to the appropriate project directory.

Capabilities

Image Generation

• Generate photorealistic images from text descriptions
• Create logos, illustrations, and graphics for websites
• Generate hero images, backgrounds, and visual assets
• Support for multiple aspect ratios (1:1, 4:3, 16:9, 9:16)
• Generate 1-4 images per request
• High-resolution output with SynthID watermark

Integration

• Automatically save images to project directories
• Generate appropriate filenames based on content
• Create image assets for web projects (HTML, React, etc.)
• Organize images in logical folder structures

Supported Styles

• Photography (portraits, landscapes, product shots)
• Illustrations (digital art, sketches, paintings)
• Logos and branding materials
• UI elements and backgrounds
• Historical art styles (impressionism, art deco, etc.)

Procedure

When User Requests Website/Project with Images

1. Identify Image Needs

   • Analyze the project requirements
   • Determine what images are needed (hero, logo, icons, backgrounds)
   • Ask user if they want AI-generated images using Imagen

2. Confirm Image Generation

   • Present the option: "Would you like me to generate custom images using Google's Imagen AI model?"
   • If user agrees, proceed with generation
   • If user declines, use placeholder images or skip

3. Generate Images

   • Create detailed, specific prompts based on project context
   • Use appropriate aspect ratios for each use case
   • Generate images using the generate_image tool

4. Save and Integrate

   • Save images to project directory (e.g., website-name/images/)
   • Use descriptive filenames (e.g., hero-background.png, logo.png)
   • Update HTML/CSS/React code to reference the generated images
   • Provide image paths in the code

Direct Image Generation Requests

When user directly asks to generate an image:

1. Understand Requirements

   • Extract subject, style, and context from user request
   • Determine appropriate aspect ratio
   • Clarify any ambiguous details

2. Create Detailed Prompt

   • Build a comprehensive prompt following Imagen best practices
   • Include subject, context, style, and quality modifiers
   • Keep prompts clear and descriptive

3. Generate and Save

   • Use generate_image tool with the crafted prompt
   • Save to appropriate directory
   • Display the saved image path to user

Imagen Prompt Guidelines

Prompt Structure

[Style] of [Subject] [Context/Background] [Additional Details]

Photography Prompts

• Start with "A photo of..." or "A photograph of..."
• Add camera details: "35mm portrait", "wide angle 10mm", "macro lens 60mm"
• Include lighting: "golden hour", "dramatic lighting", "natural light"
• Add film types: "black and white film", "film noir", "polaroid"

Illustration Prompts

• Specify art style: "digital art", "watercolor painting", "pencil sketch"
• Reference art movements: "impressionist style", "art deco", "minimalist"
• Add quality modifiers: "highly detailed", "professional", "award-winning"

Logo Prompts

• Use format: "A [style] logo for a [industry] company on a solid color background. Include the text [name]."
• Styles: minimalist, modern, traditional, geometric, abstract
• Keep text under 25 characters

Quality Modifiers

Add these for better results:

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

Aspect Ratios

Choose based on use case:

• 1:1 (Square) - Social media, profile images, icons
• 4:3 (Fullscreen) - General photography, product shots
• 3:4 (Portrait) - Vertical layouts, mobile screens
• 16:9 (Widescreen) - Hero images, banners, landscapes
• 9:16 (Portrait) - Mobile-first designs, stories

Tool: generate_image

IMPORTANT: This is a SIMULATED tool for demonstration. The actual implementation requires:

1. Google Cloud API key with Imagen access
2. Integration with google.genai Python library
3. Proper API configuration

Usage

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"
)

Parameters

• prompt (required): Detailed text description of the image
• aspect_ratio (optional): "1:1", "4:3", "3:4", "16:9", "9:16" (default: "1:1")
• number_of_images (optional): 1-4 (default: 1)
• output_dir (optional): Directory to save images (default: "generated_images")
• filename (optional): Custom filename (default: auto-generated)

Examples

Example 1: Website Hero Image

User: "Create a landing page for a coffee shop"

AI: "I'll create a landing page for your coffee shop. Would you like me to generate a custom hero image using Google's Imagen AI?"

User: "Yes please"

AI: [Generates image with prompt]
"A professional photograph of a cozy coffee shop interior, warm lighting, wooden tables, espresso machine in background, inviting atmosphere, 16:9 aspect ratio"

[Saves to coffee-shop/images/hero-background.jpg]
[Updates HTML to use the image]

Example 2: Logo Generation

User: "Generate a logo for my fitness app called FitTrack"

AI: [Generates with prompt]
"A modern minimalist logo for a fitness company on a solid color background. Include the text FitTrack. Geometric shapes, energetic, professional"

[Saves to generated_images/fittrack-logo.png]

Example 3: Multiple Assets

User: "Build a portfolio website and generate images for it"

AI: "I'll create your portfolio website. Would you like me to generate custom images (hero background, profile photo placeholder, project thumbnails) using Imagen AI?"

User: "Yes, generate them"

AI: [Generates multiple images]
1. Hero background: "Abstract geometric pattern, modern, professional, muted colors, 16:9"
2. Project thumbnail 1: "Minimalist tech illustration, clean lines, blue and white, 4:3"
3. Project thumbnail 2: "Creative design mockup, modern interface, professional, 4:3"

[Saves all to portfolio/images/]
[Updates HTML/CSS with image references]

Best Practices

1. Always Ask Permission - Before generating images, ask if user wants AI-generated images
2. Context-Aware Prompts - Tailor prompts to match the project's style and purpose
3. Appropriate Aspect Ratios - Choose ratios that fit the use case
4. Descriptive Filenames - Use clear, semantic filenames (hero-bg.png, not image1.png)
5. Organized Structure - Save images in logical directories (images/, assets/, etc.)
6. Quality First - Use quality modifiers for professional results
7. Iterate if Needed - If user isn't satisfied, refine the prompt and regenerate

Integration with Frontend Projects

When building websites with this skill:

1. Create images directory first
2. Generate images before writing HTML/CSS
3. Use relative paths in code: <img src="images/hero.jpg">
4. Add alt text describing the generated image
5. Consider responsive images with multiple sizes

Limitations

• Imagen supports English prompts only
• Text in images limited to 25 characters
• Generated images include SynthID watermark
• Requires Google Cloud API access
• Rate limits apply based on API tier

Notes

This skill works best when combined with:

• frontend-design skill for complete website creation
• code-helper skill for project setup
• file-operations skill for organizing assets