Communitygithub.com

Rylaispirit/rylai-codex-hermes-skills

建立或最佳化行銷圖片、社交圖形、產品模型、橫幅、封面藝術、列表視覺、品牌資產、圖片提示、WebP 檔案和 OG 圖片。

rylai-codex-hermes-skills 是什麼？

這項技能將您的 AI 代理轉變為專業的視覺內容製作人，專精於行銷圖片建立和最佳化。它支援多種平台，包括 Claude Code、Codex、Hermes、Claude.ai 及 Cowork，可跨這些工具安裝或啟用。此技能提供了一個完整的框架，用於製作不同類型的視覺資產，例如部落格主圖、社交圖形、產品模型、橫幅及品牌資產。它指導使用者完成從收集專案行銷背景到選擇適當工具（AI 生成 vs. 設計工具 vs. 螢幕截圖疊加）的流程，並針對每個平台提供詳細的尺寸規格。該技能還涵蓋了 AI 影像生成模型（如 Gemini、Flux、Ideogram）的比較、提示策略、設計工具（Canva、Figma）的應用、工作流程以及影像最佳化技術，包括轉換為 WebP 和建立動態 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. 產製方式

  • 你有現有的品牌資產嗎？（標誌、顏色、字體、風格指南）
  • 你需要寫實照片風格還是插圖風格？
  • 這是一次性的使用還是需要重複使用的範本？

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 Feed1080x10801:1正方形；1080x1350 (4:5) 也很有效
Instagram Stories1080x19209:16全螢幕垂直
Facebook1200x6301.91:1連結分享圖片

工作流程：

  1. 以最高所需解析度建立主圖概念
  2. 使用 Canva Magic Resize 或手動裁切製作平台變化版
  3. 如有需要，以程式方式添加文字疊加（Ideogram 或後製）
  4. 以平台特定尺寸匯出

產品模型與螢幕截圖

在情境中展示您的產品 UI。AI 模型會幻覺 UI——請勿用於此目的。

  1. 捕獲真實螢幕截圖，以 2 倍解析度拍攝您的產品
  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 截圖優於抽象圖形
  • 符合品牌調性——使用一致的顏色、字體、標誌位置
  • 季節性更新——過時的橫幅表示產品不活躍

工作流程：

  1. 選擇平台並記下確切尺寸
  2. 對於目錄（Product Hunt、G2）：使用帶有簡單標註的真實產品截圖
  3. 對於個人資料（LinkedIn、Twitter）：使用品牌顏色 + 標語 + 可選的產品圖片
  4. 使用 Canva/Figma 範本或 Ideogram（如果文字較多）生成
  5. 以實際顯示尺寸測試——縮小以檢查可讀性

品牌資產

標誌、圖示和插圖。AI 生成在此有其限制。

資產AI 生成設計工具備註
標誌差——不一致，非向量是 (Figma)始終設計或委託標誌
應用程式圖示不錯的起點是 (Figma)生成概念，手動完善
插圖適合風格探索視情況而定AI 用於概念，在設計工具中完成
Favicon否是從標誌衍生
社交圖示否是使用平台提供的資產

圖片最佳化

網站上的每張圖片都會影響頁面載入速度，進而影響 SEO 和轉換率。

格式指南

格式最適合壓縮瀏覽器支援
WebP照片、圖形——預設選擇有損 + 無損~96%
AVIF最高壓縮率，最新格式優於 WebP~94%
JPEG舊版瀏覽器的備援僅有損通用
PNG透明度、螢幕截圖無損通用
SVG標誌、圖示、插圖向量（可縮放）通用

最佳化檢查清單

  • 提供 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 標籤

<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. 你有需要符合的品牌資產嗎？（顏色、字體、標誌、風格指南）
  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