SEO Image Gen: AI Image Generation for SEO Assets (Extension)
Generate production-ready images for SEO use cases using Gemini's image generation
via the banana Creative Director pipeline. Maps SEO needs to optimized domain modes,
aspect ratios, and resolution defaults.
When to Use
- Use when generating OG images, hero images, schema visuals, infographics, or similar SEO assets.
- Use when image generation is part of a broader SEO or publishing workflow.
- Use only when the required image-generation extension is available.
Architecture Note
This skill has two components with distinct roles:
- SKILL.md (this file): Handles interactive
/seo image-gen commands for generating images
- Agent (
agents/seo-image-gen.md): Audit-only analyst spawned during /seo audit to assess existing OG/social images and produce a generation plan (never auto-generates)
Prerequisites
This skill requires the banana extension to be installed:
./extensions/banana/install.sh
Check availability: Before using any image generation tool, verify the MCP server
is connected by checking if gemini_generate_image or set_aspect_ratio tools are
available. If tools are not available, inform the user the extension is not installed
and provide install instructions.
Quick Reference
| Command |
What it does |
/seo image-gen og <description> |
Generate OG/social preview image (1200x630 feel) |
/seo image-gen hero <description> |
Blog hero image (widescreen, dramatic) |
/seo image-gen product <description> |
Product photography (clean, white BG) |
/seo image-gen infographic <description> |
Infographic visual (vertical, data-heavy) |
/seo image-gen custom <description> |
Custom image with full Creative Director pipeline |
/seo image-gen batch <description> [N] |
Generate N variations (default: 3) |
SEO Image Use Cases
Each use case maps to pre-configured banana parameters:
| Use Case |
Aspect Ratio |
Resolution |
Domain Mode |
Notes |
| OG/Social Preview |
16:9 |
1K |
Product or UI/Web |
Clean, professional, text-friendly |
| Blog Hero |
16:9 |
2K |
Cinema or Editorial |
Dramatic, atmospheric, editorial quality |
| Schema Image |
4:3 |
1K |
Product |
Clean, descriptive, schema ImageObject |
| Social Square |
1:1 |
1K |
UI/Web |
Platform-optimized square |
| Product Photo |
4:3 |
2K |
Product |
White background, studio lighting |
| Infographic |
2:3 |
4K |
Infographic |
Data-heavy, vertical layout |
| Favicon/Icon |
1:1 |
512 |
Logo |
Minimal, scalable, recognizable |
| Pinterest Pin |
2:3 |
2K |
Editorial |
Tall vertical card |
Generation Pipeline
For every generation request:
- Identify use case from command or context (og, hero, product, etc.)
- Apply SEO defaults from the use cases table above
- Set aspect ratio via
set_aspect_ratio MCP tool
- Construct Reasoning Brief using the banana Creative Director pipeline:
- Load
references/prompt-engineering.md for the 6-component system
- Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.)
- Be SPECIFIC and VISCERAL: describe what the camera sees
- Generate via
gemini_generate_image MCP tool
- Post-generation SEO checklist (see below)
Check for Presets
If the user mentions a brand or has SEO presets configured:
python3 ~/.claude/skills/seo-image-gen/scripts/presets.py list
Load matching preset and apply as defaults. Also check references/seo-image-presets.md
for SEO-specific preset templates.
Post-Generation SEO Checklist
After every successful generation, guide the user on:
- Alt text:Write descriptive, keyword-rich alt text for the generated image
- File naming:Rename to SEO-friendly format:
keyword-description-widthxheight.webp
- WebP conversion:Convert to WebP for optimal page speed:
magick output.png -quality 85 output.webp
- File size:Target under 200KB for hero images, under 100KB for thumbnails
- Schema markup:Suggest
ImageObject schema for the generated image:{
"@type": "ImageObject",
"url": "https://example.com/images/keyword-description.webp",
"width": 1200,
"height": 630,
"caption": "Descriptive caption with target keyword"
}
- OG meta tags:For social preview images, remind about:
<meta property="og:image" content="https://example.com/images/og-image.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text" />
Cost Awareness
Image generation costs money. Be transparent:
- Show estimated cost before generating (especially for batch)
- Log every generation:
python3 ~/.claude/skills/seo-image-gen/scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
- Run
cost_tracker.py summary if user asks about usage
Approximate costs (gemini-3.1-flash):
- 512: ~$0.02/image
- 1K resolution: ~$0.04/image
- 2K resolution: ~$0.08/image
- 4K resolution: ~$0.16/image
Model Routing
| Scenario |
Model |
Why |
| OG images, social previews |
gemini-3.1-flash-image-preview @ 1K |
Fast, cost-effective |
| Hero images, product photos |
gemini-3.1-flash-image-preview @ 2K |
Quality + detail |
| Infographics with text |
gemini-3.1-flash-image-preview @ 2K, thinking: high |
Better text rendering |
| Quick drafts |
gemini-2.5-flash-image @ 512 |
Rapid iteration |
Error Handling
| Error |
Resolution |
| MCP not configured |
Run ./extensions/banana/install.sh |
| API key invalid |
New key at https://aistudio.google.com/apikey |
| Rate limited (429) |
Wait 60s, retry. Free tier: ~10 RPM / ~500 RPD |
IMAGE_SAFETY |
Rephrase prompt - see references/prompt-engineering.md Safety section |
| MCP unavailable |
Fall back: python3 ~/.claude/skills/seo-image-gen/scripts/generate.py --prompt "..." --aspect-ratio "16:9" |
| Extension not installed |
Show install instructions: ./extensions/banana/install.sh |
Cross-Skill Integration
- seo-images (analysis) feeds into seo-image-gen (generation): audit results from
/seo images identify missing or low-quality images; use those findings to drive /seo image-gen commands
- seo-audit spawns the seo-image-gen agent (not this skill) to analyze OG/social images across the site and produce a prioritized generation plan
- seo-schema can consume generated images: after generation, suggest
ImageObject schema markup pointing to the new assets
Reference Documentation
Load on-demand. Do NOT load all at startup:
references/prompt-engineering.md:6-component system, domain modes, templates
references/gemini-models.md:Model specs, rate limits, capabilities
references/mcp-tools.md:MCP tool parameters and responses
references/post-processing.md:ImageMagick/FFmpeg pipeline recipes
references/cost-tracking.md:Pricing, usage tracking
references/presets.md:Brand preset management
references/seo-image-presets.md:SEO-specific preset templates
Response Format
After generating, always provide:
- Image path:where it was saved
- Crafted prompt:show what was sent to the API (educational)
- Settings:model, aspect ratio, resolution
- SEO checklist:alt text suggestion, file naming, WebP conversion
- Schema snippet:ImageObject or og:image markup if applicable
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Source: sickn33/agentic-awesome-skills → skills/seo-image-gen/SKILL.md
Also appears in: sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/seo-image-gen/SKILL.md
1---2name: seo-image-gen3description: Generate SEO-focused images such as OG cards, hero images, schema assets, product visuals, and infographics. Use when image generation is part of an SEO workflow or content publishing task.4---5
6
7# SEO Image Gen: AI Image Generation for SEO Assets (Extension)
8
9Generate production-ready images for SEO use cases using Gemini's image generation
10via the banana Creative Director pipeline. Maps SEO needs to optimized domain modes,
11aspect ratios, and resolution defaults.
12
13## When to Use
14- Use when generating OG images, hero images, schema visuals, infographics, or similar SEO assets.
15- Use when image generation is part of a broader SEO or publishing workflow.
16- Use only when the required image-generation extension is available.
17
18## Architecture Note
19
20This skill has two components with distinct roles:
21- **SKILL.md** (this file): Handles interactive `/seo image-gen` commands for generating images
22- **Agent** (`agents/seo-image-gen.md`): Audit-only analyst spawned during `/seo audit` to assess existing OG/social images and produce a generation plan (never auto-generates)
23
24## Prerequisites
25
26This skill requires the banana extension to be installed:
27```bash
28./extensions/banana/install.sh
29```
30
31**Check availability:** Before using any image generation tool, verify the MCP server
32is connected by checking if `gemini_generate_image` or `set_aspect_ratio` tools are
33available. If tools are not available, inform the user the extension is not installed
34and provide install instructions.
35
36## Quick Reference
37
38| Command | What it does |
39|---------|-------------|
40| `/seo image-gen og <description>` | Generate OG/social preview image (1200x630 feel) |
41| `/seo image-gen hero <description>` | Blog hero image (widescreen, dramatic) |
42| `/seo image-gen product <description>` | Product photography (clean, white BG) |
43| `/seo image-gen infographic <description>` | Infographic visual (vertical, data-heavy) |
44| `/seo image-gen custom <description>` | Custom image with full Creative Director pipeline |
45| `/seo image-gen batch <description> [N]` | Generate N variations (default: 3) |
46
47## SEO Image Use Cases
48
49Each use case maps to pre-configured banana parameters:
50
51| Use Case | Aspect Ratio | Resolution | Domain Mode | Notes |
52|----------|-------------|------------|-------------|-------|
53| **OG/Social Preview** | `16:9` | `1K` | Product or UI/Web | Clean, professional, text-friendly |
54| **Blog Hero** | `16:9` | `2K` | Cinema or Editorial | Dramatic, atmospheric, editorial quality |
55| **Schema Image** | `4:3` | `1K` | Product | Clean, descriptive, schema ImageObject |
56| **Social Square** | `1:1` | `1K` | UI/Web | Platform-optimized square |
57| **Product Photo** | `4:3` | `2K` | Product | White background, studio lighting |
58| **Infographic** | `2:3` | `4K` | Infographic | Data-heavy, vertical layout |
59| **Favicon/Icon** | `1:1` | `512` | Logo | Minimal, scalable, recognizable |
60| **Pinterest Pin** | `2:3` | `2K` | Editorial | Tall vertical card |
61
62## Generation Pipeline
63
64For every generation request:
65
661. **Identify use case** from command or context (og, hero, product, etc.)
672. **Apply SEO defaults** from the use cases table above
683. **Set aspect ratio** via `set_aspect_ratio` MCP tool
694. **Construct Reasoning Brief** using the banana Creative Director pipeline:
70 - Load `references/prompt-engineering.md` for the 6-component system
71 - Apply domain mode emphasis (Subject 30%, Style 25%, Context 15%, etc.)
72 - Be SPECIFIC and VISCERAL: describe what the camera sees
735. **Generate** via `gemini_generate_image` MCP tool
746. **Post-generation SEO checklist** (see below)
75
76### Check for Presets
77
78If the user mentions a brand or has SEO presets configured:
79```bash
80python3 ~/.claude/skills/seo-image-gen/scripts/presets.py list
81```
82Load matching preset and apply as defaults. Also check `references/seo-image-presets.md`
83for SEO-specific preset templates.
84
85## Post-Generation SEO Checklist
86
87After every successful generation, guide the user on:
88
891. **Alt text**:Write descriptive, keyword-rich alt text for the generated image
902. **File naming**:Rename to SEO-friendly format: `keyword-description-widthxheight.webp`
913. **WebP conversion**:Convert to WebP for optimal page speed:
92 ```bash
93 magick output.png -quality 85 output.webp
94 ```
954. **File size**:Target under 200KB for hero images, under 100KB for thumbnails
965. **Schema markup**:Suggest `ImageObject` schema for the generated image:
97 ```json
98 {
99 "@type": "ImageObject",
100 "url": "https://example.com/images/keyword-description.webp",
101 "width": 1200,
102 "height": 630,
103 "caption": "Descriptive caption with target keyword"
104 }
105 ```
1066. **OG meta tags**:For social preview images, remind about:
107 ```html
108 <meta property="og:image" content="https://example.com/images/og-image.webp" />
109 <meta property="og:image:width" content="1200" />
110 <meta property="og:image:height" content="630" />
111 <meta property="og:image:alt" content="Descriptive alt text" />
112 ```
113
114## Cost Awareness
115
116Image generation costs money. Be transparent:
117- Show estimated cost before generating (especially for batch)
118- Log every generation: `python3 ~/.claude/skills/seo-image-gen/scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"`
119- Run `cost_tracker.py summary` if user asks about usage
120
121Approximate costs (gemini-3.1-flash):
122- 512: ~$0.02/image
123- 1K resolution: ~$0.04/image
124- 2K resolution: ~$0.08/image
125- 4K resolution: ~$0.16/image
126
127## Model Routing
128
129| Scenario | Model | Why |
130|----------|-------|-----|
131| OG images, social previews | `gemini-3.1-flash-image-preview` @ 1K | Fast, cost-effective |
132| Hero images, product photos | `gemini-3.1-flash-image-preview` @ 2K | Quality + detail |
133| Infographics with text | `gemini-3.1-flash-image-preview` @ 2K, thinking: high | Better text rendering |
134| Quick drafts | `gemini-2.5-flash-image` @ 512 | Rapid iteration |
135
136## Error Handling
137
138| Error | Resolution |
139|-------|-----------|
140| MCP not configured | Run `./extensions/banana/install.sh` |
141| API key invalid | New key at https://aistudio.google.com/apikey |
142| Rate limited (429) | Wait 60s, retry. Free tier: ~10 RPM / ~500 RPD |
143| `IMAGE_SAFETY` | Rephrase prompt - see `references/prompt-engineering.md` Safety section |
144| MCP unavailable | Fall back: `python3 ~/.claude/skills/seo-image-gen/scripts/generate.py --prompt "..." --aspect-ratio "16:9"` |
145| Extension not installed | Show install instructions: `./extensions/banana/install.sh` |
146
147## Cross-Skill Integration
148
149- **seo-images** (analysis) feeds into **seo-image-gen** (generation): audit results from `/seo images` identify missing or low-quality images; use those findings to drive `/seo image-gen` commands
150- **seo-audit** spawns the seo-image-gen **agent** (not this skill) to analyze OG/social images across the site and produce a prioritized generation plan
151- **seo-schema** can consume generated images: after generation, suggest `ImageObject` schema markup pointing to the new assets
152
153## Reference Documentation
154
155Load on-demand. Do NOT load all at startup:
156- `references/prompt-engineering.md`:6-component system, domain modes, templates
157- `references/gemini-models.md`:Model specs, rate limits, capabilities
158- `references/mcp-tools.md`:MCP tool parameters and responses
159- `references/post-processing.md`:ImageMagick/FFmpeg pipeline recipes
160- `references/cost-tracking.md`:Pricing, usage tracking
161- `references/presets.md`:Brand preset management
162- `references/seo-image-presets.md`:SEO-specific preset templates
163
164## Response Format
165
166After generating, always provide:
1671. **Image path**:where it was saved
1682. **Crafted prompt**:show what was sent to the API (educational)
1693. **Settings**:model, aspect ratio, resolution
1704. **SEO checklist**:alt text suggestion, file naming, WebP conversion
1715. **Schema snippet**:ImageObject or og:image markup if applicable
172
173## Limitations
174- Use this skill only when the task clearly matches the scope described above.
175- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
176- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
177
178---
179
180**Source:** [`sickn33/agentic-awesome-skills`](https://github.com/sickn33/agentic-awesome-skills) → `skills/seo-image-gen/SKILL.md`
181
182**Also appears in:** `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/seo-image-gen/SKILL.md`