mcpField
S
seo-image-gen

seo-image-gen

github.com/infrasity-labs创意与媒体15087 次安装18 周前更新
代码仓库

关于 seo-image-gen

seo-image-gen 是一项通过 Gemini 和 banana Creative Director 流程生成 SEO 图片的技能。它为社交预览图、博客主视觉、产品照片和信息图等提供预设；另含仅用于审计并规划图片生成的 Agent。

主要功能

  1. 01SEO 图片预设
  2. 02宽高比和分辨率默认值
  3. 03Gemini 图片生成工具
  4. 04批量生成图片变体
  5. 05生成后的 SEO 检查清单
  6. 06仅用于审计的图片规划 Agent

适用场景

  1. 01制作 OG 和社交预览图
  2. 02生成博客主视觉或产品图片
  3. 03制作信息图和图标
  4. 04规划替换效果欠佳的网站图片

MCP 相关

该技能使用 banana MCP 服务的 `set_aspect_ratio` 和 `gemini_generate_image` 工具来设置参数并生成图片。生成前会检查服务是否已连接。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill seo-image-gen

安装后在 Claude Code 中输入/seo-image-gen确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
cost-tracking.md
gemini-models.md
mcp-tools.md
post-processing.md
presets.md
prompt-engineering.md
seo-image-presets.md
scripts/
batch.py
cost_tracker.py
edit.py
generate.py
presets.py
setup_mcp.py
validate_setup.py

详细介绍

SEO Image Gen：用于 SEO 资源的 AI 图像生成（扩展）

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

架构说明

此扩展基于适用于 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:91KProduct 或 UI/Web简洁、专业、适合添加文字
博客主视觉图16:92KCinema 或 Editorial富有戏剧性、氛围感，具备编辑级品质
Schema 图像4:31KProduct简洁、描述性强，适用于 schema ImageObject
社交媒体方图1:11KUI/Web针对平台优化的方图
产品照片4:32KProduct白色背景、影棚灯光
信息图2:34KInfographic数据丰富、纵向布局
Favicon/图标1:1512Logo简约、可缩放、易识别
Pinterest Pin2:32KEditorial高纵向卡片

生成工作流

每次生成请求都要：

  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 预设：

python3 scripts/presets.py list

加载匹配的预设并将其用作默认值。另请查看 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" />

成本意识

图像生成需要付费。请保持透明：

  • 生成前显示预估费用（尤其是批量生成时）
  • 记录每次生成：python3 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/张

模型路由

场景模型原因
OG 图像、社交媒体预览图gemini-3.1-flash-image-preview @ 1K速度快、成本效益高
主视觉图、产品照片gemini-3.1-flash-image-preview @ 2K兼顾质量与细节
含文字的信息图gemini-3.1-flash-image-preview @ 2K, thinking: high文字渲染效果更好
快速草稿gemini-2.5-flash-image @ 512快速迭代

错误处理

错误解决方法
MCP 未配置运行 ./extensions/banana/install.sh
API 密钥无效在 https://aistudio.google.com/apikey 获取新密钥
请求频率受限（429）等待 60 秒后重试。免费套餐：约 10 RPM / 约 500 RPD
IMAGE_SAFETY改写提示词，参见 references/prompt-engineering.md 的 Safety 部分
MCP 不可用回退方案：python3 scripts/generate.py --prompt "..." --aspect-ratio "16:9"
扩展未安装显示安装说明：./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/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 标记

评论

支持 Markdown