Back to Details

seo-image-gen

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SEO Image Gen: AI Image Generation for SEO Assets (Extension)

SEO图像生成：面向SEO资产的AI图像生成工具（扩展）

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.
借助Gemini的图像生成能力，通过banana创意总监工作流生成可直接用于生产环境的SEO场景图像。该工具可将SEO需求映射为优化后的领域模式、宽高比和默认分辨率。

Architecture Note

架构说明

This extension is built on Claude Banana, the standalone AI image generation skill for Claude Code.
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)
本扩展基于Claude Banana构建，这是一款面向Claude Code的独立AI图像生成技能。
该技能包含两个功能不同的组件：
  • SKILL.md（即本文档）：处理交互式
    /seo image-gen
    命令以生成图像
  • Agent（
    agents/seo-image-gen.md
    ）：仅用于审计的分析模块，在执行
    /seo audit
    时启动，用于评估现有OG/社交图像并生成制作计划（绝不会自动生成图像）

Prerequisites

前置条件

This skill requires the banana extension to be installed:
bash
./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.
使用本技能需安装banana扩展：
bash
./extensions/banana/install.sh
可用性检查：在使用任何图像生成工具前，需通过检查
gemini_generate_image
或
set_aspect_ratio
工具是否可用，来验证MCP服务器是否已连接。若工具不可用，需告知用户扩展未安装并提供安装说明。

Quick Reference

快速参考

CommandWhat 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-gen og <description>
生成OG/社交预览图（适配1200x630尺寸）
/seo image-gen hero <description>
生成博客首图（宽屏、富有视觉冲击力）
/seo image-gen product <description>
生成产品摄影图（简洁、白色背景）
/seo image-gen infographic <description>
生成信息图（竖版、数据密集型）
/seo image-gen custom <description>
通过完整创意总监工作流生成自定义图像
/seo image-gen batch <description> [N]
生成N张变体图（默认3张）

SEO Image Use Cases

SEO图像使用场景

Each use case maps to pre-configured banana parameters:
Use CaseAspect RatioResolutionDomain ModeNotes
OG/Social Preview
16:9
1K
Product or UI/WebClean, professional, text-friendly
Blog Hero
16:9
2K
Cinema or EditorialDramatic, atmospheric, editorial quality
Schema Image
4:3
1K
ProductClean, descriptive, schema ImageObject
Social Square
1:1
1K
UI/WebPlatform-optimized square
Product Photo
4:3
2K
ProductWhite background, studio lighting
Infographic
2:3
4K
InfographicData-heavy, vertical layout
Favicon/Icon
1:1
512
LogoMinimal, scalable, recognizable
Pinterest Pin
2:3
2K
EditorialTall vertical card
每个场景都对应预配置的banana参数：
使用场景宽高比分辨率领域模式说明
OG/社交预览图
16:9
1K
产品或UI/网页简洁专业、适配文本展示
博客首图
16:9
2K
影视或编辑风格视觉冲击力强、氛围感足、达到编辑级质量
Schema图片
4:3
1K
产品简洁直观、符合Schema ImageObject规范
社交平台方形图
1:1
1K
UI/网页适配平台的方形尺寸
产品摄影图
4:3
2K
产品白色背景、影棚级打光
信息图
2:3
4K
信息图数据密集、竖版布局
网站图标/Favicon
1:1
512
Logo极简风格、可缩放、辨识度高
Pinterest帖子图
2:3
2K
编辑风格竖版长卡片布局

Generation Pipeline

生成流程

For every generation request:
  1. Identify use case from command or context (og, hero, product, etc.)
  2. Apply SEO defaults from the use cases table above
  3. Set aspect ratio via 
    set_aspect_ratio
    MCP tool
  4. 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
  5. Generate via 
    gemini_generate_image
    MCP tool
  6. Post-generation SEO checklist (see below)
针对每一个生成请求：
  1. 识别使用场景：从命令或上下文判断（如og、hero、product等）
  2. 应用SEO默认配置：参考上述使用场景表格中的参数
  3. 设置宽高比：通过
    set_aspect_ratio
    MCP工具完成
  4. 构建推理提示词：使用banana创意总监工作流：
    • 加载
      references/prompt-engineering.md
      中的6组件系统
    • 侧重领域模式（主体30%、风格25%、上下文15%等）
    • 描述需具体且有画面感：明确说明镜头所呈现的内容
  5. 生成图像：通过
    gemini_generate_image
    MCP工具执行
  6. 生成后SEO检查清单（见下文）

Check for Presets

预设配置检查

If the user mentions a brand or has SEO presets configured:
bash
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.
若用户提及品牌或已配置SEO预设：
bash
python3 ~/.claude/skills/seo-image-gen/scripts/presets.py list
加载匹配的预设并设为默认值。同时可查看
references/seo-image-presets.md
获取SEO专属预设模板。

Post-Generation SEO Checklist

生成后SEO检查清单

After every successful generation, guide the user on:
  1. Alt text:Write descriptive, keyword-rich alt text for the generated image
  2. File naming:Rename to SEO-friendly format: 
    keyword-description-widthxheight.webp
  3. WebP conversion:Convert to WebP for optimal page speed:
    bash
    magick output.png -quality 85 output.webp
  4. File size:Target under 200KB for hero images, under 100KB for thumbnails
  5. Schema markup:Suggest 
    ImageObject
    schema for the generated image:
    json
    {
  "@type": "ImageObject",
  "url": "https://example.com/images/keyword-description.webp",
  "width": 1200,
  "height": 630,
  "caption": "Descriptive caption with target keyword"
}
  6. OG meta tags:For social preview images, remind about:
    html
    <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" />
每次成功生成图像后，需引导用户完成以下操作：
  1. 替代文本（Alt text）：撰写包含关键词、描述准确的替代文本
  2. 文件命名：重命名为SEO友好格式：
    关键词-描述-宽x高.webp
  3. WebP格式转换：转换为WebP格式以优化页面加载速度：
    bash
    magick output.png -quality 85 output.webp
  4. 文件大小：首图目标大小控制在200KB以内，缩略图控制在100KB以内
  5. Schema标记：建议为生成的图像添加
    ImageObject
    Schema标记：
    json
    {
  "@type": "ImageObject",
  "url": "https://example.com/images/keyword-description.webp",
  "width": 1200,
  "height": 630,
  "caption": "包含目标关键词的描述性说明"
}
  6. OG元标签：针对社交预览图，提醒添加以下标签：
    html
    <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="描述性替代文本" />

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
图像生成会产生费用，需保持透明：
  • 生成前显示预估成本（批量生成时尤其重要）
  • 记录每一次生成操作：
    python3 ~/.claude/skills/seo-image-gen/scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
  • 若用户询问使用情况，可运行
    cost_tracker.py summary
    查看汇总
大致成本（基于gemini-3.1-flash）：
  • 512分辨率：约$0.02/张
  • 1K分辨率：约$0.04/张
  • 2K分辨率：约$0.08/张
  • 4K分辨率：约$0.16/张

Model Routing

模型路由策略

ScenarioModelWhy
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
场景模型原因
OG图、社交预览图
gemini-3.1-flash-image-preview
@ 1K		速度快、性价比高
首图、产品摄影图
gemini-3.1-flash-image-preview
@ 2K		兼顾质量与细节
含文本的信息图
gemini-3.1-flash-image-preview
@ 2K，思考模式：高		文本渲染效果更好
快速草稿
gemini-2.5-flash-image
@ 512		迭代速度快

Error Handling

错误处理

ErrorResolution
MCP not configuredRun 
./extensions/banana/install.sh
API key invalidNew 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 unavailableFall back: 
python3 ~/.claude/skills/seo-image-gen/scripts/generate.py --prompt "..." --aspect-ratio "16:9"
Extension not installedShow install instructions: 
./extensions/banana/install.sh
错误类型解决方法
MCP未配置运行
./extensions/banana/install.sh
API密钥无效前往https://aistudio.google.com/apikey获取新密钥
请求受限（429错误）等待60秒后重试。免费额度限制：约10次/分钟 / 500次/天
IMAGE_SAFETY
错误		重新表述提示词 - 参考
references/prompt-engineering.md
中的安全规范部分
MCP不可用备用方案：
python3 ~/.claude/skills/seo-image-gen/scripts/generate.py --prompt "..." --aspect-ratio "16:9"
扩展未安装展示安装说明：
./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
  • seo-images（分析模块）为seo-image-gen（生成模块）提供输入：
    /seo images
    的审计结果可识别缺失或低质量图像，进而驱动
    /seo image-gen
    命令的执行
  • seo-audit会启动seo-image-gen的agent（非本技能），用于分析全站的OG/社交图像并生成优先级明确的制作计划
  • seo-schema可调用生成的图像：生成完成后，可建议添加指向新资产的
    ImageObject
    Schema标记

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
按需加载，请勿在启动时全部加载：
  • references/prompt-engineering.md
    ：6组件系统、领域模式、模板
  • references/gemini-models.md
    ：模型规格、速率限制、功能特性
  • references/mcp-tools.md
    ：MCP工具参数与响应格式
  • references/post-processing.md
    ：ImageMagick/FFmpeg工作流方案
  • references/cost-tracking.md
    ：定价、使用量追踪
  • references/presets.md
    ：品牌预设管理
  • references/seo-image-presets.md
    ：SEO专属预设模板

Response Format

响应格式

After generating, always provide:
  1. Image path:where it was saved
  2. Crafted prompt:show what was sent to the API (educational)
  3. Settings:model, aspect ratio, resolution
  4. SEO checklist:alt text suggestion, file naming, WebP conversion
  5. Schema snippet:ImageObject or og:image markup if applicable
生成完成后，需始终提供以下内容：
  1. 图像路径：保存位置
  2. 最终提示词：展示发送至API的提示词（用于教学参考）
  3. 配置信息：使用的模型、宽高比、分辨率
  4. SEO检查清单：替代文本建议、文件命名、WebP转换提示
  5. Schema代码片段：适用时提供ImageObject或og:image标记代码