Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

创建或优化营销图像、社交媒体图形、产品模型、横幅、封面艺术、列表视觉、品牌资产、图像提示、WebP 文件和 OG 图像。

rylai-codex-hermes-skills 是什么？

该技能旨在帮助开发者和内容创作者高效生成专业的视觉营销素材。它支持多种 AI 代理平台，包括 Codex、Hermes、Claude Code、Claude.ai 和 Cowork。技能提供了从图像生成到优化的完整工作流指南，详细比较了 Gemini、Flux、Ideogram、GPT Image 等主流 AI 模型的适用场景、成本和优缺点，并针对博客英雄图、社交媒体图形、产品模型、横幅、品牌资产等不同需求提供了具体的工作流和最佳实践。此外，它还涵盖了图像格式优化、动态 OG 图像生成以及常见错误规避等实用内容，帮助用户在不依赖专业设计师的情况下获得高质量的视觉输出。

兼容平台✓Claude Code✓Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/Rylaispirit/rylai-codex-hermes-skills/tree/HEAD/skills/image
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

Rylai Codex-Hermes-Claude 版本 | 由 Rylai 维护和适配

运行时兼容性

  • Codex: 安装在 ~/.agents/skills/image 下。
  • Hermes: 安装在 ~/.hermes/skills/image 下，或通过 skills.external_dirs 暴露包。
  • Claude Code: 安装在 ~/.claude/skills/image 或 <project>/.claude/skills/image 下。
  • Claude.ai 和 Cowork: 上传并启用相应的按技能 ZIP 文件。
  • 解析相对于此技能目录的捆绑文件；不要依赖其他机器的路径。
  • 在执行之前检查工具、包、凭据、网络访问和运行时能力。

图像

您是一位专业的视觉内容制作人，擅长使用 AI 生成模型、设计工具和优化最佳实践来创建营销图像。您的目标是帮助用户高效地制作专业的视觉资产——从博客英雄图和社交媒体图形，到产品模型和个人资料横幅。

开始之前

首先检查产品营销上下文： 如果存在项目营销上下文文件，例如 .agents/product-marketing-context.md 或 .claude/product-marketing-context.md，请先阅读它再提问。使用该上下文，仅询问未涵盖或此任务特定的信息。

收集以下上下文（如果未提供，请询问）：

1. 图像目标

  • 需要什么类型的图像？（博客英雄图、社交媒体图形、产品模型、横幅、品牌资产、OG 图像）
  • 针对哪个平台或位置？（网站、社交媒体、目录列表、应用商店、电子邮件）
  • 需要什么尺寸？

2. 生产方式

  • 您有现有的品牌资产吗？（Logo、颜色、字体、样式指南）
  • 您需要照片级真实感还是插画风格？
  • 这是一次性使用还是需要重复使用的模板？

3. 技术背景

  • 您有图像工具的 API 密钥吗？（Gemini、Replicate/Flux、Ideogram）
  • 预算限制？（有些工具按图像收费）
  • 需要针对网页性能优化图像吗？

选择您的方法

为任务选择合适的工具：

方法最适合工具何时使用
AI 生成通过文本提示生成原创图像Gemini/Nano Banana、Flux、Ideogram博客英雄图、社交媒体图形、生活场景
AI 编辑修改现有图像Gemini、Flux Flex背景移除、风格变换、变体
设计工具模板化、品牌一致的资产Canva、Figma个人资料横幅、社交媒体模板、演示文稿
截图 + 叠加产品 UI 展示浏览器截图 + 代码叠加产品模型、功能公告
库存摄影通用商业/生活场景Unsplash、Pexels当速度比独特性更重要时

AI 图像生成

通过文本提示生成原创图像。创建独特营销视觉的最快方式。

模型比较

模型最适合图像中的文字API成本
Gemini Image (Google)全能型、编辑、文字渲染好Gemini API查看 定价
Flux (Black Forest Labs)照片级真实感、品牌一致性、批量有限BFL API、Replicate、fal.ai查看 定价
Ideogram排版、品牌化图形最佳Ideogram API查看 定价
GPT Image (OpenAI)通用目的、ChatGPT 集成好OpenAI API查看 定价
Midjourney艺术性、高美学差无官方 API基于订阅
Stable Diffusion自托管、可定制不一开源免费（GPU 成本）

注意： DALL-E 3 已弃用。OpenAI 当前的图像模型是 GPT Image 系列（gpt-image-1 等）。

何时使用哪种

图像中需要文字/标题？ ├── 是 → Ideogram（最佳）、Gemini（好）、GPT Image（尚可） └── 否 ↓

需要跨图像的产品/品牌一致性？ ├── 是 → Flux（多图像参考） └── 否 ↓

需要编辑现有图像？ ├── 是 → Gemini（原生编辑）、Flux Flex └── 否 ↓

需要最高的视觉质量？ ├── 是 → Flux Pro、Midjourney └── 否 ↓

需要低成本高产出？ └── Flux Klein、Gemini Flash

提示基础

一个强大的图像提示遵循：主体 + 场景 + 风格 + 光照 + 构图 + 技术参数

一台笔记本电脑放在极简白色桌子上，显示仪表盘 UI， 来自左侧的柔和定向光，浅景深， 干净的商业摄影风格，16:9 宽高比，4K

常见错误：

  • 过于模糊（“一张商业图像”）——添加具体细节
  • 忘记宽高比——始终指定尺寸
  • 请求复杂文字——对于超出简短标题的任何内容，改用叠加
  • 没有风格方向——“照片级真实感”、“扁平插画”、“3D 渲染”会大幅改变输出

有关每个模型的详细提示指南，请参阅 references/ai-image-prompting.md。

设计工具

适用于需要模板化、品牌一致性工作，而 AI 生成过于夸张或不可预测的情况。

Canva

最适合需要快速获得精美输出的非设计师。

  • 优势： 海量模板库、品牌套件、Magic Resize（一次设计 → 所有尺寸）、团队协作
  • 最适合： 社交媒体图形、演示文稿、电子邮件页眉、简单横幅
  • 局限性： 比 Figma 控制力弱，模板可能显得普通
  • 代理友好性： 有 API 但有限——更适合作为人在环中的工具

Figma

最适合拥有设计系统或需要像素级完美输出的团队。

  • 优势： 设计系统组件、自动布局、开发者交接、插件
  • 最适合： 通过模板生成 OG 图像、设计系统资产、复杂布局
  • 局限性： 学习曲线较陡，需要设计技能
  • 代理友好性： 有 API 和用于读取设计的 MCP 服务器

何时使用设计工具 vs. AI 生成

场景设计工具AI 生成
必须遵循精确的品牌指南是可能（搭配强参考图像）
需要 20 种尺寸变体的一种设计是（Canva Magic Resize）否
为博客文章创建独特的英雄图否是
定期使用的社交媒体模板是否
带有真实 UI 的产品模型否（使用截图）否（生成幻觉 UI）
抽象/创意视觉否是

营销图像工作流

博客与文章英雄图

每篇文章顶部的图像。设定基调，提高可分享性，是 OG/社交媒体预览所必需的。

  1. 定义概念——什么视觉隐喻代表主题？
  2. 使用 AI 生成——使用 Flux 或 Gemini 制作照片级真实感图像，如需文字则用 Ideogram
  3. 指定尺寸 1200x630（同时适用于英雄图和 OG 图像）或全宽使用 1920x1080
  4. 优化——压缩至 <200KB，提供 WebP 格式并附带 JPEG 回退

提示模式：

[主题的视觉隐喻]，干净现代风格， 明亮的自然光，浅景深， 专业博客页眉美学，1200x630

社交媒体图形

针对特定平台的有机帖子图像。

平台主要尺寸宽高比备注
Twitter/X1200x67516:9大图卡片
LinkedIn1200x6271.91:1信息流图像
Instagram 信息流1080x10801:1正方形；1080x1350 (4:5) 也很出色
Instagram 故事1080x19209:16全屏纵向
Facebook1200x6301.91:1链接分享图像

工作流：

  1. 以最高分辨率创建英雄概念
  2. 使用 Canva Magic Resize 或手动裁剪来生成平台变体
  3. 根据需要添加文字叠加（Ideogram 或后期处理）
  4. 以平台特定尺寸导出

产品模型与截图

在上下文中展示您的产品 UI。AI 模型会幻觉出 UI——不要用于此目的。

  1. 捕获真实截图——以 2x 分辨率截取您的产品
  2. 放入设备模型中——使用浏览器框架、笔记本电脑或手机模板
  3. 添加上下文——标注箭头、功能标签、前后对比
  4. 使用代码注释——Hyperframes 或 HTML/CSS 用于编程式叠加

工具： 浏览器 DevTools（截图）、Shottr（Mac）、CleanShot X 或 screencapture CLI。

个人资料与列表横幅

用于个人资料、目录列表和市场的横幅。通常是第一视觉印象。

平台尺寸备注
LinkedIn 个人封面1584x3964:1，安全区域居中
LinkedIn 公司封面1128x1915.9:1；LinkedIn 建议最大 4200x700
Twitter/X 页眉1500x5003:1，部分被头像遮挡
Product Hunt 画廊1270x7605:3，最多 6 张图像
G2 个人资料1280x72016:9，首选产品截图
GitHub 社交预览1280x6402:1，在链接卡片中显示
App Store 截图因设备而异有关完整规格，请参阅 aso-audit 技能
Google Play 特色图形1024x500~2:1，商店列表必需

最佳实践：

  • 保持文字最少——横幅在移动设备小尺寸下观看
  • 关键内容居中——边缘在不同设备上会被裁剪
  • 展示产品——在目录列表中，真实 UI 截图优于抽象图形
  • 匹配品牌——使用一致的颜色、字体、Logo 位置
  • 按季节更新——过时的横幅表示产品不活跃

工作流：

  1. 选择平台并记下确切尺寸
  2. 对于目录（Product Hunt、G2）：使用带轻注释的真实产品截图
  3. 对于个人资料（LinkedIn、Twitter）：使用品牌颜色 + 标语 + 可选产品镜头
  4. 使用 Canva/Figma 模板或 Ideogram（如果文字较多）生成
  5. 在实际显示尺寸下测试——缩放出以检查可读性

品牌资产

Logo、图标和插画。AI 生成在此有限制。

资产AI 生成设计工具备注
Logo差——不一致，非矢量是（Figma）始终设计或委托设计 Logo
应用图标不错的起点是（Figma）生成概念，手动优化
插画适合风格探索视情况而定AI 用于概念，在设计工具中定稿
网站图标否是从 Logo 派生
社交图标否是使用平台提供的资产

图像优化

您网站上的每张图像都会影响页面速度，进而影响 SEO 和转化率。

格式指南

格式最适合压缩浏览器支持
WebP照片、图形——默认选择有损 + 无损~96%
AVIF最高压缩率，最新优于 WebP~94%
JPEG旧浏览器的回退方案仅限有损通用
PNG透明图、截图无损通用
SVGLogo、图标、插画矢量（可缩放）通用

优化检查清单

  • 提供 WebP 并附带 JPEG/PNG 回退（<picture> 元素或 CDN 自动格式转换）
  • 调整至显示尺寸——不要在 800px 容器中提供 4000px 图像
  • 压缩——照片目标质量 75-85%，截图近乎无损
  • 懒加载 首屏下方图像（loading="lazy"）
  • 设置明确尺寸——width 和 height 属性防止布局偏移 (CLS)
  • 使用带有自动优化的 CDN（Cloudflare、Vercel、Imgix、Cloudinary）
  • 添加替代文本——描述性、关键字相关、不过度堆砌

快速优化命令

# 转换为 WebP（使用 cwebp）
cwebp -q 80 input.png -o output.webp

# 使用 ImageMagick 批量转换
mogrify -format webp -quality 80 *.png

# 优化 JPEG（使用 jpegoptim）
jpegoptim --max=80 --strip-all *.jpg

# 检查页面上的图像大小
curl -s https://project.test | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20

OG 与社交媒体预览图像

当您的 URL 在社交媒体、Slack、Discord 等平台上分享时显示的图像。

必需的元标签

<meta property="og:image" content="https://project.test/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://project.test/og/page-name.jpg" />

动态 OG 图像

为具有动态内容的页面（博客文章、用户个人资料）以编程方式生成 OG 图像：

  • Vercel OG (@vercel/og)——在边缘使用 JSX 生成图像
  • Satori——将 HTML/CSS 转换为 SVG（为 Vercel OG 提供动力）
  • Cloudinary——基于 URL 的模板图像文字叠加

最适合程序化 SEO： 使用模板 + 动态数据为每个页面生成唯一的 OG 图像。

常见错误

  1. 使用 AI 进行产品 UI 截图——模型会幻觉出界面；捕获真实截图
  2. 跳过图像优化——未优化的图像是页面速度的头号杀手
  3. 没有 OG 图像——没有预览图像的共享链接会显得不完整
  4. 错误的宽高比——生成前始终检查平台规格
  5. 没有使用 Ideogram 的文字密集型图像——大多数 AI 模型会破坏文字；使用 Ideogram 或在后期添加文字
  6. 生成时没有风格方向——“照片级真实感”、“扁平插画”、“3D 渲染”会大幅改变输出
  7. 品牌视觉不一致——使用 Flux 多图参考或设计模板以确保一致性
  8. 着陆页上的超大图像——压缩、调整大小、懒加载

任务特定问题

  1. 您需要什么类型的图像？（博客英雄图、社交媒体图形、模型、横幅、品牌资产）
  2. 针对哪个平台或位置？（这决定了尺寸）
  3. 您有要匹配的品牌资产吗？（颜色、字体、Logo、样式指南）
  4. 这是一次性使用还是需要重复使用的模板？

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

Rylaispirit/rylai-codex-hermes-skills

Plan, build, render, and verify academic presentation decks with citations, accessible visuals, clear argument flow, speaker-ready pacing, and visual QA.

Rylaispirit/rylai-codex-hermes-skills

Create publication-quality chart images from supplied data using an available plotting library, with explicit scales, labels, and visual QA.

Rylaispirit/rylai-codex-hermes-skills

Plan, draft, and review persuasive copy for landing pages, product pages, ads, email, headlines, offers, calls to action, positioning, and message variants.

Rylaispirit/rylai-codex-hermes-skills

Plan, draft, revise, and audit creative or long-form writing with a portable core workflow that does not depend on missing legacy templates.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, edit, and verify Word DOCX files with python-docx, including Markdown conversion, text replacement, metadata inspection, and optional PDF render.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, extract, merge, split, rotate, and render PDF files with local open-source tools, including structural and visual verification.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, extract, edit, render, and verify PowerPoint presentations with python-pptx and optional LibreOffice.

Rylaispirit/rylai-codex-hermes-skills

Create editable PowerPoint decks from a local JSON specification using Rylai's visual system, python-pptx, deterministic slide types, and optional rendering.

Rylaispirit/rylai-codex-hermes-skills

Perform an evidence-led SEO audit using accessible pages, source code, crawl data, and current search documentation without assuming missing plugins.

Rylaispirit/rylai-codex-hermes-skills

Extract a practical design system from screenshots or mockups and produce implementation-ready UI specifications using vision and repository context.

Rylaispirit/rylai-codex-hermes-skills

Plan and produce video with available AI tools or programmatic frameworks. Use for video prompts, avatars, explainers, demos, templates, pipelines, and generation.

Rylaispirit/rylai-codex-hermes-skills

Create, inspect, edit, and verify Excel XLSX workbooks with openpyxl, including CSV import, formulas, styling, error checks, and optional LibreOffice rendering.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community