Gemini Image Generator
Generate contextual images for web projects using the Gemini API. Produces hero backgrounds, OG cards, placeholder photos, textures, and style-matched variants.
Setup
API Key: Set GEMINI_API_KEY as an environment variable. Get a key from https://aistudio.google.com/apikey if you don't have one.
export GEMINI_API_KEY="your-key-here"
Workflow
Step 1: Understand What's Needed
Gather from the user or project context:
- What: hero background, product photo, texture, OG image, placeholder
- Style: warm/cool/minimal/luxurious/bold — check project's colour palette (input.css, tailwind config)
- Dimensions: hero (1920x1080), OG (1200x630), square (1024x1024), custom
- Count: single image or multiple variants to choose from
Step 2: Build the Prompt
Use concrete photography parameters, not abstract adjectives. Read references/prompting-guide.md for the full framework.
Quick rules:
- Narrate like directing a photographer
- Use camera specs: "85mm f/1.8", "wide angle 24mm"
- Use colour anchors from the project palette: "warm terracotta (#C66A52) and cream (#F5F0EB) tones"
- Use lighting descriptions: "golden-hour light from the left, 4500K"
- Always end with: "No text, no watermarks, no logos, no hands"
Step 3: Generate
python3 plugins/design-assets/skills/gemini-image-gen/scripts/generate-image.py \
--prompt "Soft-focus atmospheric background, warm gold and cream botanical elements, luxury spa aesthetic, wide landscape" \
--output public/images/hero.png \
--model gemini-2.5-flash-image
Multiple variants:
python3 .../generate-image.py --prompt "..." --output public/images/hero.png --count 3
# Produces hero-1.png, hero-2.png, hero-3.png
Style matching from a reference image:
python3 .../generate-image.py \
--prompt "Same warm lighting and colour palette, but showing a massage treatment room" \
--reference public/images/existing-hero.jpg \
--output public/images/services-bg.png \
--model gemini-3-pro-image-preview
Step 4: Post-Process (Optional)
Use the image-processing skill for resizing, format conversion, or optimisation:
python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \
optimise public/images/hero.png --output public/images/hero.webp --width 1920
Step 5: Present to User
Show the generated images for review. Read the image files to display them inline if possible, otherwise describe what was generated and let the user open them.
Presets
Starting prompts — enhance with project-specific context (colours, mood, subject):
| Preset |
Base Prompt |
hero-background |
"Wide atmospheric background, soft-focus, [colour tones], [mood], landscape 1920x1080" |
og-image |
"Clean branded card background, [brand colours], subtle gradient, 1200x630" |
placeholder-photo |
"Professional stock-style photo of [subject], natural lighting, warm tones" |
texture-pattern |
"Subtle repeating texture, [material], seamless tile, muted [colour]" |
product-shot |
"Product photography, [item] on [surface], soft studio lighting, clean background" |
Model Selection
| Use case |
Model |
Cost |
| Drafts, quick placeholders |
gemini-2.5-flash-image |
Free (~500/day) |
| Final client assets |
gemini-3-pro-image-preview |
~$0.04/image |
| Style-matched variants |
gemini-3-pro-image-preview + --reference |
~$0.04/image |
Verify current model IDs if errors occur — they change frequently.
Reference Files
| When |
Read |
| Building effective prompts |
references/prompting-guide.md |
1---2name: gemini-image-gen3description: Generate images using Google's Gemini API — hero backgrounds, OG images, placeholder photos, textures, and style-matched variants. Uses free-tier models for drafts, paid for finals. No dependencies beyond Python 3. Trigger with 'generate image', 'gemini image', 'make a hero background', 'create placeholder photo', 'generate OG image', 'AI image', or 'need an image for'.4---56# Gemini Image Generator78Generate contextual images for web projects using the Gemini API. Produces hero backgrounds, OG cards, placeholder photos, textures, and style-matched variants.910## Setup1112**API Key**: Set `GEMINI_API_KEY` as an environment variable. Get a key from https://aistudio.google.com/apikey if you don't have one.1314```bash15export GEMINI_API_KEY="your-key-here"16```1718## Workflow1920### Step 1: Understand What's Needed2122Gather from the user or project context:23- **What**: hero background, product photo, texture, OG image, placeholder24- **Style**: warm/cool/minimal/luxurious/bold — check project's colour palette (input.css, tailwind config)25- **Dimensions**: hero (1920x1080), OG (1200x630), square (1024x1024), custom26- **Count**: single image or multiple variants to choose from2728### Step 2: Build the Prompt2930Use concrete photography parameters, not abstract adjectives. Read [references/prompting-guide.md](references/prompting-guide.md) for the full framework.3132**Quick rules**:33- Narrate like directing a photographer34- Use camera specs: "85mm f/1.8", "wide angle 24mm"35- Use colour anchors from the project palette: "warm terracotta (#C66A52) and cream (#F5F0EB) tones"36- Use lighting descriptions: "golden-hour light from the left, 4500K"37- Always end with: "No text, no watermarks, no logos, no hands"3839### Step 3: Generate4041```bash42python3 plugins/design-assets/skills/gemini-image-gen/scripts/generate-image.py \43 --prompt "Soft-focus atmospheric background, warm gold and cream botanical elements, luxury spa aesthetic, wide landscape" \44 --output public/images/hero.png \45 --model gemini-2.5-flash-image46```4748Multiple variants:4950```bash51python3 .../generate-image.py --prompt "..." --output public/images/hero.png --count 352# Produces hero-1.png, hero-2.png, hero-3.png53```5455Style matching from a reference image:5657```bash58python3 .../generate-image.py \59 --prompt "Same warm lighting and colour palette, but showing a massage treatment room" \60 --reference public/images/existing-hero.jpg \61 --output public/images/services-bg.png \62 --model gemini-3-pro-image-preview63```6465### Step 4: Post-Process (Optional)6667Use the **image-processing** skill for resizing, format conversion, or optimisation:6869```bash70python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \71 optimise public/images/hero.png --output public/images/hero.webp --width 192072```7374### Step 5: Present to User7576Show the generated images for review. Read the image files to display them inline if possible, otherwise describe what was generated and let the user open them.7778## Presets7980Starting prompts — enhance with project-specific context (colours, mood, subject):8182| Preset | Base Prompt |83|--------|-------------|84| `hero-background` | "Wide atmospheric background, soft-focus, [colour tones], [mood], landscape 1920x1080" |85| `og-image` | "Clean branded card background, [brand colours], subtle gradient, 1200x630" |86| `placeholder-photo` | "Professional stock-style photo of [subject], natural lighting, warm tones" |87| `texture-pattern` | "Subtle repeating texture, [material], seamless tile, muted [colour]" |88| `product-shot` | "Product photography, [item] on [surface], soft studio lighting, clean background" |8990## Model Selection9192| Use case | Model | Cost |93|----------|-------|------|94| Drafts, quick placeholders | `gemini-2.5-flash-image` | Free (~500/day) |95| Final client assets | `gemini-3-pro-image-preview` | ~$0.04/image |96| Style-matched variants | `gemini-3-pro-image-preview` + `--reference` | ~$0.04/image |9798Verify current model IDs if errors occur — they change frequently.99100## Reference Files101102| When | Read |103|------|------|104| Building effective prompts | [references/prompting-guide.md](references/prompting-guide.md) |
asymmetric-al