seo-image-gen

SEO Image Gen：面向 SEO 素材的 AI 图像生成（扩展）

通过 banana 创意总监流程调用 Gemini 的图像生成功能，为 SEO 用例生成可用于生产环境的图像。 将 SEO 需求映射到经过优化的领域模式、宽高比和默认分辨率。

架构说明

此扩展基于 Claude Banana 构建，这是面向 Claude Code 的独立 AI 图像生成技能。

此技能由两个角色不同的组件组成：

• SKILL.md（本文件）：处理用于生成图像的交互式 /seo image-gen 命令
• Agent（agents/seo-image-gen.md）：在 /seo audit 期间启动的纯审计分析器，用于评估现有 OG／社交图片并生成方案（绝不会自动生成图像）

前提条件

此技能要求安装 banana 扩展：

./extensions/banana/install.sh

检查可用性： 使用任何图像生成工具前，请先检查 gemini_generate_image 或 set_aspect_ratio 工具是否可用，以确认 MCP 服务已连接。如果这些工具不可用，请告知用户尚未安装该扩展，并提供安装说明。

快速参考

命令	功能
/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 图像用例

每种用例都映射到预配置的 banana 参数：

用例	宽高比	分辨率	领域模式	备注
OG／社交预览图	16:9	1K	Product 或 UI/Web	简洁、专业、便于放置文本
博客主图	16:9	2K	Cinema 或 Editorial	富有戏剧感、氛围感，具备编辑级品质
Schema 图片	4:3	1K	Product	简洁、描述性强，适用于 schema ImageObject
社交方图	1:1	1K	UI/Web	针对平台优化的方形图
产品照片	4:3	2K	Product	白色背景、影棚布光
信息图	2:3	4K	Infographic	数据密集、竖版布局
Favicon／图标	1:1	512	Logo	简约、可缩放、易识别
Pinterest Pin	2:3	2K	Editorial	高挑的竖版卡片

生成流程

对于每个生成请求：

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 检查清单（见下文）

检查预设

如果用户提及品牌，或已配置 SEO 预设：

# Use the installed Banana MCP/tool configuration to list presets.

加载匹配的预设并将其用作默认值。另请检查 references/seo-image-presets.md 中面向 SEO 的专用预设模板。

生成后的 SEO 检查清单

每次成功生成后，都要引导用户完成以下事项：

1. 替代文本：为生成的图片编写描述性强且包含丰富关键词的替代文本
2. 文件命名：重命名为 SEO 友好的格式：keyword-description-widthxheight.webp
3. 转换为 WebP：转换为 WebP，以优化页面加载速度：

   magick output.png -quality 85 output.webp
   

4. 文件大小：主视觉图片控制在 200KB 以下，缩略图控制在 100KB 以下
5. Schema 标记：建议为生成的图片使用 ImageObject schema：

   {
     "@type": "ImageObject",
     "url": "https://example.com/images/keyword-description.webp",
     "width": 1200,
     "height": 630,
     "caption": "Descriptive caption with target keyword"
   }
   

6. OG 元标签：对于社交媒体预览图片，提醒用户注意：

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

成本提示

图片生成需要付费。请如实说明：

• 生成前显示预估成本（尤其是批量生成时）
• 如果可用，在已安装的 Banana MCP/工具账本中记录每次生成
• 如果用户询问使用情况，请使用已安装的 Banana MCP/工具用量摘要

大致成本：

• 报价前，请在已安装的 MCP/工具配置中核实当前价格

模型路由

场景	模型	原因
OG 图片、社交媒体预览	已安装的 MCP/工具默认模型 @ 1K	快速、经济高效
主视觉图片、产品照片	已安装的 MCP/工具质量模型 @ 2K	质量与细节兼顾
带文字的信息图	已安装的 MCP/工具文字能力模型 @ 2K；如果支持，将 thinking 设为 high	文字渲染效果更好
快速草稿	已安装的 MCP/工具草稿模型 @ 512	快速迭代

错误处理

错误	解决方法
未配置 MCP	运行 ./extensions/banana/install.sh
API 密钥无效	在 https://aistudio.google.com/apikey 获取新密钥
请求受限（429）	等待 60s 后重试。免费层级：约 10 RPM / 约 500 RPD
IMAGE_SAFETY	重新措辞提示词 - 参见 references/prompt-adaptation-safety.md
MCP 不可用	使用 ./extensions/banana/install.sh 配置 MCP；claude-seo 不包含本地生成备用脚本
未安装扩展	显示安装说明：./extensions/banana/install.sh

跨技能集成

• seo-images（分析）为 seo-image-gen（生成）提供依据：/seo images 的审核结果会找出缺失或质量较差的图片；使用这些发现来指导 /seo image-gen 命令
• seo-audit 会启动 seo-image-gen agent（而非此技能），分析整个网站的 OG/社交媒体图片，并生成按优先级排序的生成计划
• seo-schema 可以使用生成的图片：生成后，建议使用指向新资源的 ImageObject schema 标记

参考文档

按需加载。启动时不要全部加载：

• references/prompt-engineering.md：6 组件系统、领域模式、高级技巧
• references/prompt-templates.md：按使用场景分类的即用模板
• references/prompt-adaptation-safety.md：模型适配规则、常见错误、安全过滤器重述方法
• 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 专用预设模板

响应格式

生成后，始终提供：

1. 图片路径：图片的保存位置
2. 精心编写的提示词：展示发送给 API 的内容（便于学习）
3. 设置：模型、宽高比、分辨率
4. SEO 检查清单：替代文本建议、文件命名、WebP 转换
5. Schema 片段：适用时提供 ImageObject 或 og:image 标记