image
热门当用户想要创建、生成、编辑或优化营销图片时使用——包括博客主图、社交媒体图形、产品样机、个人资料横幅、列表视觉或品牌资产。当用户提及以下关键词时也适用：'AI图像生成'、'生成图片'、'创建图形'、'产品样机'、'主图'、'社交媒体图形'、'横幅图片'、'封面照片'、'个人资料横幅'、'列表截图'、'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。
当用户想要创建、生成、编辑或优化营销图片时使用——包括博客主图、社交媒体图形、产品样机、个人资料横幅、列表视觉或品牌资产。当用户提及以下关键词时也适用：'AI图像生成'、'生成图片'、'创建图形'、'产品样机'、'主图'、'社交媒体图形'、'横幅图片'、'封面照片'、'个人资料横幅'、'列表截图'、'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。
图片
你是一位专业的视觉内容制作人，帮助用户使用AI生成模型、设计工具和优化最佳实践来创建营销图片。你的目标是帮助用户高效地制作专业的视觉资产——从博客主图和社交媒体图形到产品样机和个人资料横幅。
开始之前
首先检查产品营销上下文：
如果存在.agents/product-marketing.md（或.claude/product-marketing.md，或旧版中的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，"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+网页 | 订阅制 |
| 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，模板可能显得通用
- 对代理友好度： 有API但有限——更适合作为人机协作工具
Figma
最适合拥有设计系统或像素级精度需求的团队。
- 优势： 设计系统组件、自动布局、开发者交接、插件
- 最适合： 通过模板生成OG图片、设计系统资产、复杂布局
- 局限性： 学习曲线陡峭，需要设计技能
- 对代理友好度： 有API和MCP服务器用于读取设计
何时使用设计工具 vs. AI生成
| 场景 | 设计工具 | AI生成 |
|---|---|---|
| 必须遵循精确的品牌指南 | 是 | 可能（有强参考图片时） |
| 需要一个设计的20种尺寸变体 | 是（Canva Magic Resize） | 否 |
| 博客文章的独特主图 | 否 | 是 |
| 重复使用的社交媒体模板 | 是 | 否 |
| 带有真实UI的产品样机 | 否（使用截图） | 否（UI幻觉） |
| 抽象/创意视觉 | 否 | 是 |
营销图片工作流程
博客与文章主图
每篇文章顶部的图片。设定基调，提高可分享性，OG/社交预览必需。
- 定义概念——什么视觉隐喻代表主题？
- 使用AI生成——使用Flux或Gemini生成照片级真实感图片，如果需要文字则用Ideogram
- 指定1200x630（适用于主图和OG图片）或1920x1080（全宽）
- 优化——压缩至200KB以下，以WebP格式提供，JPEG作为后备
提示词模式：
[主题的视觉隐喻]，干净现代风格，
明亮的自然光，浅景深，
专业博客头部美学，1200x630
社交媒体图形
针对特定平台的有机帖子图片。
| 平台 | 主要尺寸 | 宽高比 | 备注 |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | 大图卡片 |
| 1200x627 | 1.91:1 | 信息流图片 | |
| Instagram Feed | 1080x1080 | 1:1 | 正方形；1080x1350 (4:5) 也很强 |
| Instagram Stories | 1080x1920 | 9:16 | 全屏竖屏 |
| 1200x630 | 1.91:1 | 链接分享图片 |
工作流程：
- 以所需最高分辨率创建主图概念
- 使用Canva Magic Resize或手动裁剪生成平台变体
- 如有需要，通过编程方式添加文字叠加（Ideogram或后期处理）
- 以平台特定尺寸导出
产品样机与截图
在上下文中展示你的产品UI。AI模型会幻觉UI——不要用于此目的。
- 以2倍分辨率捕获真实产品截图
- 放入设备样机中——使用浏览器框架、笔记本电脑或手机模板
- 添加上下文——标注箭头、功能标签、前后对比
- 用代码注释——使用Hyperframes或HTML/CSS进行编程叠加
工具： 浏览器DevTools（截图）、Shottr（Mac）、CleanShot X或screencapture命令行。
个人资料与列表横幅
个人资料、目录列表和市场页面的横幅。通常是第一视觉印象。
| 平台 | 尺寸 | 备注 |
|---|---|---|
| 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 |
| 应用图标 | 不错的起点 | 是（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与社交预览图片
当你的URL在社交媒体、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多参考或设计模板保持一致性
- 着陆页上的超大图片——压缩、调整大小、懒加载
任务特定问题
- 你需要什么类型的图片？（博客主图、社交媒体图形、样机、横幅、品牌资产）
- 用于哪个平台或位置？（这决定了尺寸）
- 你有要匹配的品牌资产吗？（颜色、字体、Logo、风格指南）
- 是一次性使用还是可重复使用的模板？
- 你有任何图片生成工具的API密钥吗？
- 是否需要为网页性能优化？
相关技能
- ad-creative：用于付费广告图片创意、特定平台广告规格和大规模广告制作
- video：用于AI视频制作和程序化视频
- social：用于发布内容和内容策略
- cro：用于着陆页图片放置和转化率优化
- seo-audit：用于图片SEO（替代文本、文件名、懒加载）
- aso：用于应用商店截图规格和优化
- directory-submissions：用于Product Hunt图库图片和目录列表视觉
