mcpField
S
seo-image-gen

seo-image-gen

github.com/sickn33营销与增长48.7k86 次安装1 天前更新
代码仓库

关于 seo-image-gen

seo-image-gen 是用于生成 SEO 图片素材的技能，适用于社交预览图、文章主图、产品图和信息图等发布流程。它按用途设定图像比例与分辨率，并通过 banana 扩展调用图像生成工具；扩展及相关参考文件需另行提供。

主要功能

  1. 01生成社交预览图与文章主图
  2. 02按图片用途设置比例和分辨率
  3. 03生成产品图、信息图及图标
  4. 04批量生成图片变体
  5. 05提供生成后的 SEO 检查建议

适用场景

  1. 01为页面生成 OG 或社交预览图
  2. 02制作博客文章主图或产品照片
  3. 03生成信息图、Schema 图片或图标
  4. 04根据图片审计结果规划素材生成

MCP 相关

技能通过 MCP 工具 set_aspect_ratio 设置图片比例，并调用 gemini_generate_image 生成图片。使用前需确认 banana 扩展及相关工具可用。

安装

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill seo-image-gen

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

详细介绍

支持材料的可用性

此目录副本包含下方的内联指导，但不包含以下支持路径。这些是外部前置条件，并非随附文件：

  • <support-root>/references/prompt-engineering.md
  • <support-root>/references/seo-image-presets.md
  • <support-root>/references/gemini-models.md
  • <support-root>/references/mcp-tools.md
  • <support-root>/references/post-processing.md
  • <support-root>/references/cost-tracking.md
  • <support-root>/references/presets.md

请从声明的上游来源或用户提供的该来源安装版本中获取所需材料。以该安装版本为基准解析每个路径，检查其内容，并核实适用的许可证和执行前置条件。在所需文件存在之前，不要运行相关命令，也不要声称已遵循所引用的流程。不要伪造缺失的脚本，也不要将名称相同但无关的文件视为等效文件。此处已完整说明的独立步骤，可在用户授权范围内执行；对于依赖其他材料的步骤，请报告其不可用。

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

通过 banana Creative Director 流程使用 Gemini 的图像生成功能，生成可投入生产的 SEO 用途图像。将 SEO 需求映射到优化后的领域模式、宽高比和分辨率默认值。

适用场景

  • 需要生成 OG 图像、主视觉图、结构化数据配图、信息图或类似 SEO 资源时使用。
  • 图像生成属于更广泛的 SEO 或发布工作流的一部分时使用。
  • 仅在所需的图像生成扩展可用时使用。

架构说明

此技能包含两个职责不同的组件：

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

前置条件

此处未随附下文列出的安装程序、Agent 和脚本。不要猜测路径或自动安装扩展；仅在获得设置授权后，使用经过检查的固定上游修订版本。使用前，必须根据实际提供方核实工具的可用性、模型 ID、费用和配额；下方的历史估算不构成计费保证。请尊重主机/用户选择的图像工具。获得生成授权并不代表获得发布授权，上传到提供方的用户所提供私有图像必须已获许可。

此技能要求安装 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>使用完整 Creative Director 流程生成自定义图像
/seo image-gen batch <description> [N]生成 N 个变体（默认：3）

SEO 图片使用场景

每种使用场景都对应预配置的 banana 参数：

使用场景宽高比分辨率域模式备注
OG/社交媒体预览图1200:630（如果不支持则裁剪/调整大小）1K产品或 UI/Web简洁、专业、适合添加文字
博客主视觉图16:92K电影或编辑风格戏剧化、有氛围、具备编辑级品质
Schema 图片4:31K产品简洁、描述性强，适用于 schema ImageObject
社交媒体方图1:11KUI/Web针对平台优化的方形图片
产品照片4:32K产品白色背景、影棚灯光
信息图2:34K信息图数据密集、纵向布局
网站图标/图标1:1512Logo极简、可缩放、易识别
Pinterest Pin2:32K编辑风格纵向长卡片

生成流程

对于每个生成请求：

  1. 识别使用场景：根据命令或上下文确定（og、hero、product 等）
  2. 应用 SEO 默认值：使用上方使用场景表中的设置
  3. 设置宽高比：通过 set_aspect_ratio MCP 工具设置
  4. 构建 Reasoning Brief：使用 banana 创意总监流程：
    • 加载 references/prompt-engineering.md，了解 6 个组成部分的系统
    • 应用域模式侧重点（主体 30%、风格 25%、上下文 15% 等）
    • 描述要具体且生动：说明相机能看到什么
  5. 生成图片：通过 gemini_generate_image MCP 工具生成
  6. 生成后的 SEO 检查清单（见下文）
检查预设

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

python3 ~/.claude/skills/seo-image-gen/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 ~/.claude/skills/seo-image-gen/scripts/cost_tracker.py log --model MODEL --resolution RES --prompt "brief"
  • 如果用户询问用量，运行 cost_tracker.py summary

历史参考费用（请先核实当前模型/定价）：

  • 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）遵循 Retry-After 并使用有界退避；配额取决于当前账号/模型
IMAGE_SAFETY改写提示词，参见 references/prompt-engineering.md 的 Safety 部分
MCP 不可用回退方案：python3 ~/.claude/skills/seo-image-gen/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 检查清单：alt 文本建议、文件命名、WebP 转换
  5. Schema 片段：适用时提供 ImageObject 或 og:image 标记

限制

  • 仅当任务明确符合上述范围时，才使用此技能。
  • 不要将输出视为环境特定验证、测试或专家审查的替代品。
  • 如果缺少必需的输入、权限、安全边界或成功标准，请暂停并请求澄清。

评论

支持 Markdown