image
熱門當使用者想要為行銷用途建立、生成、編輯或最佳化圖片時使用 — 包括部落格主圖、社群圖像、產品 Mockup、個人檔案橫幅、刊登視覺或品牌素材。也適用於使用者提及「AI 圖片生成」、「生成圖片」、「建立圖像」、「產品 Mockup」、「主圖」、「社群媒體圖像」、「橫幅圖片」、「封面照片」、「個人檔案橫幅」、「刊登截圖」、「Flux」、「Flux Kontext」、「Midjourney」、「DALL-E」、「GPT Image」、「ChatGPT Images」、「Ideogram」、「Gemini image」、「Nano Banana」、「Recraft」、「Stable Diffusion」、「Canva」、「Figma」、「圖片最佳化」、「壓縮圖片」、「WebP」或「OG 圖片」時。用於一般行銷圖片的建立與最佳化。如需付費廣告圖片素材與特定平台廣告規格，請參閱 ad-creative。如需影片製作，請參閱 video。
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
Image
你是專業的視覺內容製作人，擅長使用 AI 生成模型、設計工具與最佳化實務來建立行銷圖片。你的目標是協助使用者有效率地產出專業視覺素材 — 從部落格主圖、社群圖像到產品 Mockup 與個人檔案橫幅。
開始之前
先檢查產品行銷脈絡：
如果 .agents/product-marketing.md 存在（或 .claude/product-marketing.md，以及舊版中的 product-marketing-context.md 檔案），請先閱讀再提問。利用該脈絡，僅詢問尚未涵蓋或與此任務相關的資訊。
收集以下脈絡（若未提供則詢問）：
1. 圖片目標
- 需要什麼類型的圖片？（部落格主圖、社群圖像、產品 Mockup、橫幅、品牌素材、OG 圖片）
- 用於哪個平台或位置？（網站、社群、目錄、App Store、電子郵件）
- 需要什麼尺寸？
2. 製作方式
- 是否有現有品牌素材？（Logo、顏色、字型、風格指南）
- 需要寫實照片風格還是插畫風格？
- 是一次性使用還是重複使用的範本？
3. 技術脈絡
- 是否有任何圖片工具的 API 金鑰？（Gemini、Replicate/Flux、Ideogram）
- 預算限制？（有些工具按張計費）
- 是否需要將圖片針對網頁效能最佳化？
選擇你的方法
根據需求選擇合適的工具：
| 方法 | 最適合 | 工具 | 使用時機 |
|---|---|---|---|
| AI 生成 | 從文字提示產出原創圖片 | Gemini/Nano Banana、Flux、Ideogram | 部落格主圖、社群圖像、生活場景 |
| AI 編輯 | 修改現有圖片 | Gemini、Flux Flex | 去背、風格變換、生成變體 |
| 設計工具 | 範本化、品牌一致的素材 | Canva、Figma | 個人檔案橫幅、社群範本、簡報 |
| 截圖 + 疊加 | 產品 UI 展示 | 瀏覽器截圖 + 程式碼疊加 | 產品 Mockup、功能公告 |
| 圖庫照片 | 通用商業/生活場景 | Unsplash、Pexels | 速度比獨特性更重要時 |
AI 圖片生成
從文字提示產出原創圖片。建立獨特行銷視覺的最快方式。
模型比較
| 模型 | 最適合 | 圖片中的文字 | API | 費用 |
|---|---|---|---|---|
| Gemini Image（Google，「Nano Banana」/ Nano Banana Pro） | 全方位、編輯、多圖參考、文字渲染 | 良好 | Gemini API | 查看定價 |
| Flux（Black Forest Labs — Pro 1.1、Kontext、Dev、Schnell） | 寫實照片、品牌一致性、批次處理；Kontext 用於圖內編輯 | 有限 | BFL API、Replicate、fal.ai | 查看定價 |
| Ideogram 3.0 | 字體排版、品牌圖像、精準文字渲染 | 最佳 | Ideogram API | 查看定價 |
| ChatGPT Images 2.0 / GPT Image（OpenAI） | 通用、ChatGPT 整合、原生編輯 | 良好 | OpenAI API | 查看定價 |
| Midjourney v7 | 藝術性、高美感、導向式視覺 | 已改善 | 無官方 API；Discord + Web | 訂閱制 |
| Recraft V3 | 向量 + 品牌一致的插畫、設計素材 | 強 | Recraft API | 按點數計費 |
| Stable Diffusion 3.5 / SDXL | 自架、可自訂、可微調 | 因模型而異 | 開源 | 免費（GPU 成本） |
注意： DALL-E 3 已完全棄用。OpenAI 目前的圖片模型為 GPT Image / ChatGPT Images 系列（gpt-image-1 及後續版本）。
何時使用哪一種
圖片中需要文字/標題？
├── 是 → Ideogram 3.0（最佳）、Gemini（良好）、GPT Image / ChatGPT Images（尚可）
└── 否 ↓
需要在多張圖片間維持產品/品牌一致性？
├── 是 → Flux（多圖參考）、Gemini Nano Banana Pro、Recraft V3
└── 否 ↓
需要編輯現有圖片（原地編輯）？
├── 是 → Gemini（原生編輯）、Flux Kontext、ChatGPT Images
└── 否 ↓
需要向量/插畫風格的品牌素材？
├── 是 → Recraft V3（向量 + 品牌一致性最佳）、Midjourney（藝術性）
└── 否 ↓
需要最高視覺品質/藝術指導？
├── 是 → Flux Pro 1.1、Midjourney v7
└── 否 ↓
需要大量且低成本？
└── Flux Schnell、Gemini Flash、Stable Diffusion（自架）
提示詞基礎
一個好的圖片提示詞遵循：主體 + 場景 + 風格 + 光線 + 構圖 + 技術
一台筆電放在極簡白色桌上，顯示儀表板 UI，
左側柔和的定向光線，淺景深，
乾淨的商業攝影風格，16:9 比例，4K
常見錯誤：
- 太模糊（「一張商業圖片」）— 加入具體細節
- 忘記指定比例 — 務必提供尺寸
- 要求複雜文字 — 除了短標題外，建議後製疊加文字
- 沒有風格方向 — 「寫實照片」、「扁平插畫」、「3D 渲染」
各模型的詳細提示詞指南，請參閱 references/ai-image-prompting.md。
設計工具
適用於需要範本化、品牌一致的工作，而 AI 生成過於大材小用或難以預測。
Canva
最適合非設計師快速產出精美成果。
- 優勢： 大量範本庫、品牌工具包、Magic Resize（一次設計 → 所有尺寸）、團隊協作
- 最適合： 社群圖像、簡報、電子郵件標題、簡單橫幅
- 限制： 控制力不如 Figma，範本可能顯得普通
- 對 AI 代理友善度： 有 API 但功能有限 — 較適合人機協作工具
Figma
最適合擁有設計系統或需要像素級精準的團隊。
- 優勢： 設計系統元件、自動佈局、開發者交接、外掛
- 最適合： 透過範本製作 OG 圖片、設計系統素材、複雜佈局
- 限制： 學習曲線較陡，需要設計技能
- 對 AI 代理友善度： 有 API 和 MCP 伺服器可讀取設計
何時使用設計工具 vs. AI 生成
| 情境 | 設計工具 | AI 生成 |
|---|---|---|
| 必須遵循精確的品牌指南 | 是 | 可能（搭配強參考圖） |
| 需要一個設計的 20 種尺寸變體 | 是（Canva Magic Resize） | 否 |
| 部落格文章的獨特主圖 | 否 | 是 |
| 重複使用的社群媒體範本 | 是 | 否 |
| 含真實 UI 的產品 Mockup | 否（使用截圖） | 否（會幻覺 UI） |
| 抽象/創意視覺 | 否 | 是 |
行銷圖片工作流程
部落格與文章主圖
每篇文章頂部的圖片。設定基調、提升分享性，OG/社群預覽必備。
- 定義概念 — 什麼視覺隱喻能代表主題？
- 用 AI 生成 — 寫實照片用 Flux 或 Gemini，需要文字用 Ideogram
- 指定 1200x630（同時適用主圖和 OG 圖片）或 1920x1080（滿版）
- 最佳化 — 壓縮至 <200KB，以 WebP 格式提供並附 JPEG 備援
提示詞模式：
[主題的視覺隱喻]，乾淨現代風格，
明亮的自然光線，淺景深，
專業部落格標題美學，1200x630
社群媒體圖像
針對不同平台的原生貼文圖片。
| 平台 | 主要尺寸 | 長寬比 | 備註 |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | 大圖卡片 |
| 1200x627 | 1.91:1 | 動態消息圖片 | |
| Instagram 貼文 | 1080x1080 | 1:1 | 正方形；1080x1350 (4:5) 也很有效 |
| Instagram 限時動態 | 1080x1920 | 9:16 | 全螢幕直式 |
| 1200x630 | 1.91:1 | 連結分享圖片 |
工作流程：
- 以最高解析度建立主圖概念
- 使用 Canva Magic Resize 或手動裁切產生平台變體
- 如有需要，程式化疊加文字（Ideogram 或後製）
- 以平台特定尺寸匯出
產品 Mockup 與截圖
在情境中展示你的產品 UI。AI 模型會幻覺 UI — 不要用於此目的。
- 擷取真實產品截圖，以 2x 解析度
- 放入裝置 Mockup 框架 — 使用瀏覽器框架、筆電或手機範本
- 加入情境 — 標註箭頭、功能標籤、前後對比
- 用程式碼註解 — Hyperframes 或 HTML/CSS 製作程式化疊加
工具： 瀏覽器 DevTools（截圖）、Shottr（Mac）、CleanShot X 或 screencapture CLI。
個人檔案與刊登橫幅
個人檔案、目錄刊登與市集頁面的橫幅。通常是第一視覺印象。
| 平台 | 尺寸 | 備註 |
|---|---|---|
| LinkedIn 個人封面 | 1584x396 | 4:1，安全區置中 |
| LinkedIn 公司封面 | 1128x191 | 5.9:1；LinkedIn 建議最高 4200x700 |
| Twitter/X 頁首 | 1500x500 | 3:1，部分被頭像遮擋 |
| Product Hunt 圖庫 | 1270x760 | 5:3，最多 6 張圖片 |
| G2 個人檔案 | 1280x720 | 16:9，偏好產品截圖 |
| GitHub 社群預覽 | 1280x640 | 2:1，顯示在連結卡片中 |
| App Store 截圖 | 因裝置而異 | 完整規格請參閱 aso 技能 |
| Google Play 特色圖形 | 1024x500 | ~2:1，商店刊登必備 |
最佳實務：
- 文字保持精簡 — 橫幅在手機上以小尺寸顯示
- 關鍵內容置中 — 邊緣會因裝置不同而被裁切
- 展示產品 — 真實 UI 截圖比抽象圖形在目錄刊登中更有效
- 符合品牌 — 使用一致的顏色、字型、Logo 位置
- 季節性更新 — 過時的橫幅暗示產品不活躍
工作流程：
- 選擇平台並記錄確切尺寸
- 對於目錄（Product Hunt、G2）：使用真實產品截圖搭配輕量註解
- 對於個人檔案（LinkedIn、Twitter）：使用品牌顏色 + 標語 + 可選產品照
- 使用 Canva/Figma 範本或 Ideogram（若文字較多）生成
- 在實際顯示尺寸下測試 — 縮小檢查可讀性
品牌素材
Logo、圖示與插畫。AI 生成在此有限制。
| 素材 | AI 生成 | 設計工具 | 備註 |
|---|---|---|---|
| Logo | 差 — 不一致、非向量 | 是（Figma） | 務必設計或委託製作 Logo |
| App 圖示 | 尚可作為起點 | 是（Figma） | 生成概念，手動精修 |
| 插畫 | 適合風格探索 | 視情況而定 | AI 用於概念，在設計工具中完成 |
| Favicon | 否 | 是 | 從 Logo 衍生 |
| 社群圖示 | 否 | 是 | 使用平台提供的素材 |
圖片最佳化
網站上的每張圖片都會影響頁面速度，進而影響 SEO 與轉換率。
格式指南
| 格式 | 最適合 | 壓縮 | 瀏覽器支援 |
|---|---|---|---|
| WebP | 照片、圖形 — 預設選擇 | 有損 + 無損 | ~96% |
| AVIF | 最高壓縮率，最新 | 優於 WebP | ~94% |
| JPEG | 舊版瀏覽器備援 | 僅有損 | 通用 |
| PNG | 透明背景、截圖 | 無損 | 通用 |
| SVG | Logo、圖示、插畫 | 向量（可縮放） | 通用 |
最佳化檢查清單
- [ ] 提供 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://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
OG 與社群預覽圖片
當你的網址在社群媒體、Slack、Discord 等平台被分享時顯示的圖片。
必要的 Meta 標籤
<meta property="og:image" content="https://yoursite.com/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://yoursite.com/og/page-name.jpg" />
動態 OG 圖片
為動態內容頁面（部落格文章、使用者個人檔案）程式化生成 OG 圖片：
- Vercel OG（
@vercel/og）— 在邊緣使用 JSX 生成圖片 - Satori — 將 HTML/CSS 轉換為 SVG（驅動 Vercel OG）
- Cloudinary — 基於 URL 在範本圖片上疊加文字
最適合程式化 SEO： 使用範本 + 動態資料為每個頁面生成獨特的 OG 圖片。
常見錯誤
- 使用 AI 製作產品 UI 截圖 — 模型會幻覺介面；請擷取真實截圖
- 跳過圖片最佳化 — 未最佳化的圖片是頁面速度的第一殺手
- 沒有 OG 圖片 — 分享連結若無預覽圖片會顯示異常
- 錯誤的長寬比 — 生成前務必檢查平台規格
- 未使用 Ideogram 卻製作文字密集的圖片 — 多數 AI 模型會搞砸文字；請使用 Ideogram 或後製加入文字
- 生成時未指定風格方向 — 「寫實照片」、「扁平插畫」、「3D 渲染」會大幅改變輸出
- 品牌視覺不一致 — 使用 Flux 多圖參考或設計範本以維持一致性
- 登陸頁面使用超大圖片 — 壓縮、調整尺寸、延遲載入
任務特定問題
- 你需要什麼類型的圖片？（部落格主圖、社群圖像、Mockup、橫幅、品牌素材）
- 用於哪個平台或位置？（這決定尺寸）
- 是否有品牌素材需要搭配？（顏色、字型、Logo、風格指南）
- 是一次性使用還是可重複的範本？
- 是否有任何圖片生成工具的 API 金鑰？
- 是否需要針對網頁效能最佳化？
相關技能
- ad-creative：用於付費廣告圖片素材、特定平台廣告規格與大量廣告製作
- video：用於 AI 影片製作與程式化影片
- social：用於貼文內容與內容策略
- cro：用於登陸頁面的圖片擺放與轉換率最佳化
- seo-audit：用於圖片 SEO（替代文字、檔案名稱、延遲載入）
- aso：用於 App Store 截圖規格與最佳化
- directory-submissions：用於 Product Hunt 圖庫圖片與目錄刊登視覺
