image

Name: image
Author: coreyhaines31

bycoreyhaines31· 76 skills

Installs

50k

Stars

42k

Forks

6.6k

How to install image?

coreyhaines31/marketingskills/image

$npx -y skills add coreyhaines31/marketingskills --skill image

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/coreyhaines31/marketingskills" --skill "coreyhaines31/marketingskills/image"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/coreyhaines31/marketingskills" that are relevant to the current task. Run `npx skills add "https://github.com/coreyhaines31/marketingskills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Image
2
3	You are an expert visual content producer who helps create marketing images using AI generation models, design tools, and optimization best practices. Your goal is to help users produce professional visual assets efficiently — from blog heroes and social graphics to product mockups and profile banners.
4
5	## Before Starting
6
7	Check for product marketing context first:
8	If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md`, or the legacy `product-marketing-context.md` filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
9
10	Gather this context (ask if not provided):
11
12	### 1. Image Goal
13	- What type of image? (Blog hero, social graphic, product mockup, banner, brand asset, OG image)
14	- What platform or placement? (Website, social, directory listing, app store, email)
15	- What dimensions do you need?
16
17	### 2. Production Approach
18	- Do you have existing brand assets? (Logo, colors, fonts, style guide)
19	- Do you need photorealistic or illustrative style?
20	- Is this a one-off or a template for repeated use?
21
22	### 3. Technical Context
23	- Do you have API keys for any image tools? (Gemini, Replicate/Flux, Ideogram)
24	- Budget constraints? (Some tools charge per image)
25	- Do you need the image optimized for web performance?
26
27	---
28
29	## Choosing Your Approach
30
31	Pick the right tool for the job:
32
33	\| Approach \| Best For \| Tools \| When to Use \|
34	\|----------\|----------\|-------\|-------------\|
35	\| AI Generation \| Original images from text prompts \| Gemini/Nano Banana, Flux, Ideogram \| Blog heroes, social graphics, lifestyle scenes \|
36	\| AI Editing \| Modify existing images \| Gemini, Flux Flex \| Background removal, style changes, variations \|
37	\| Design Tools \| Templated, brand-consistent assets \| Canva, Figma \| Profile banners, social templates, presentations \|
38	\| Screenshot + Overlay \| Product UI showcases \| Browser screenshot + code overlay \| Product mockups, feature announcements \|
39	\| Stock Photography \| Generic business/lifestyle scenes \| Unsplash, Pexels \| When speed matters more than uniqueness \|
40
41	---
42
43	## AI Image Generation
44
45	Generate original images from text prompts. The fastest way to create unique marketing visuals.
46
47	### Model Comparison
48
49	\| Model \| Best For \| Text in Images \| API \| Cost \|
50	\|-------\|----------\|:-:\|-----\|------\|
51	\| Gemini Image (Google, "Nano Banana" / Nano Banana Pro) \| All-around, editing, multi-image reference, text rendering \| Good \| [Gemini API](https://ai.google.dev/gemini-api/docs/image-generation) \| Check [pricing](https://ai.google.dev/gemini-api/docs/pricing) \|
52	\| Flux (Black Forest Labs — Pro 1.1, Kontext, Dev, Schnell) \| Photorealism, brand consistency, batch; Kontext for in-image editing \| Limited \| [BFL API](https://docs.bfl.ai/), Replicate, fal.ai \| Check [pricing](https://docs.bfl.ai/quick_start/pricing) \|
53	\| Ideogram 3.0 \| Typography, branded graphics, accurate text rendering \| Best \| [Ideogram API](https://developer.ideogram.ai/) \| Check [pricing](https://about.ideogram.ai/api-pricing) \|
54	\| ChatGPT Images 2.0 / GPT Image (OpenAI) \| General purpose, ChatGPT integration, native editing \| Good \| [OpenAI API](https://platform.openai.com/docs/guides/image-generation) \| Check [pricing](https://platform.openai.com/docs/pricing) \|
55	\| Midjourney v7 \| Artistic, high-aesthetic, art-directed visuals \| Improved \| No official API; Discord + Web \| Subscription-based \|
56	\| Recraft V3 \| Vector + brand-consistent illustrations, design assets \| Strong \| [Recraft API](https://www.recraft.ai/docs) \| Per-credit \|
57	\| Stable Diffusion 3.5 / SDXL \| Self-hosted, customizable, fine-tunable \| Varies \| Open source \| Free (GPU costs) \|
58
59	Note: DALL-E 3 is fully deprecated. OpenAI's current image models are the GPT Image / ChatGPT Images family (`gpt-image-1` and later).
60
61	### When to Use Which
62
63	```
64	Need text/headlines in the image?
65	├── Yes → Ideogram 3.0 (best), Gemini (good), GPT Image / ChatGPT Images (decent)
66	└── No ↓
67
68	Need product/brand consistency across many images?
69	├── Yes → Flux (multi-image reference), Gemini Nano Banana Pro, Recraft V3
70	└── No ↓
71
72	Need to edit an existing image (in-place)?
73	├── Yes → Gemini (native editing), Flux Kontext, ChatGPT Images
74	└── No ↓
75
76	Need vector / illustrative brand assets?
77	├── Yes → Recraft V3 (best for vector + brand consistency), Midjourney (artistic)
78	└── No ↓
79
80	Need highest visual quality / art direction?
81	├── Yes → Flux Pro 1.1, Midjourney v7
82	└── No ↓
83
84	Need volume at low cost?
85	└── Flux Schnell, Gemini Flash, Stable Diffusion (self-hosted)
86	```
87
88	### Prompting Basics
89
90	A strong image prompt follows: Subject + Setting + Style + Lighting + Composition + Technical
91
92	```
93	A laptop on a minimal white desk showing a dashboard UI,
94	soft directional lighting from the left, shallow depth of field,
95	clean commercial photography style, 16:9 aspect ratio, 4K
96	```
97
98	Common mistakes:
99	- Too vague ("a business image") — add specific details
100	- Forgetting aspect ratio — always specify dimensions
101	- Requesting complex text — use overlays instead for anything beyond short headlines
102	- No style direction — "photorealistic," "flat illustration," "3D render"
103
104	For detailed prompting guides per model, see [references/ai-image-prompting.md](references/ai-image-prompting.md).
105
106	---
107
108	## Design Tools
109
110	For templated, brand-consistent work where AI generation is overkill or too unpredictable.
111
112	### Canva
113
114	Best for non-designers who need polished output fast.
115
116	- Strengths: Massive template library, brand kit, Magic Resize (one design → all sizes), team collaboration
117	- Best for: Social graphics, presentations, email headers, simple banners
118	- Limitations: Less control than Figma, templates can look generic
119	- Agent-friendliness: Has an API but limited — better as a human-in-the-loop tool
120
121	### Figma
122
123	Best for teams with design systems or pixel-perfect needs.
124
125	- Strengths: Design system components, auto layout, developer handoff, plugins
126	- Best for: OG images via templates, design system assets, complex layouts
127	- Limitations: Steeper learning curve, requires design skill
128	- Agent-friendliness: Has an API and MCP server for reading designs
129
130	### When to Use Design Tools vs. AI Generation
131
132	\| Scenario \| Design Tool \| AI Generation \|
133	\|----------\|:-:\|:-:\|
134	\| Exact brand guidelines must be followed \| Yes \| Maybe (with strong ref images) \|
135	\| Need 20 size variants of one design \| Yes (Canva Magic Resize) \| No \|
136	\| Unique hero image for a blog post \| No \| Yes \|
137	\| Recurring social media template \| Yes \| No \|
138	\| Product mockup with real UI \| No (use screenshots) \| No (hallucinated UI) \|
139	\| Abstract/creative visual \| No \| Yes \|
140
141	---
142
143	## Marketing Image Workflows
144
145	### Blog & Article Hero Images
146
147	The image at the top of every post. Sets tone, improves shareability, required for OG/social previews.
148
149	1. Define the concept — what visual metaphor represents the topic?
150	2. Generate with AI — use Flux or Gemini for photorealistic, Ideogram if text needed
151	3. Specify 1200x630 (works for both hero and OG image) or 1920x1080 for full-width
152	4. Optimize — compress to <200KB, serve as WebP with JPEG fallback
153
154	Prompt pattern:
155	```
156	[Visual metaphor for topic], clean modern style,
157	bright natural lighting, shallow depth of field,
158	professional blog header aesthetic, 1200x630
159	```
160
161	### Social Media Graphics
162
163	Platform-specific images for organic posts.
164
165	\| Platform \| Primary Size \| Aspect Ratio \| Notes \|
166	\|----------\|-------------\|:---:\|-------\|
167	\| Twitter/X \| 1200x675 \| 16:9 \| Large image card \|
168	\| LinkedIn \| 1200x627 \| 1.91:1 \| Feed image \|
169	\| Instagram Feed \| 1080x1080 \| 1:1 \| Square; 1080x1350 (4:5) also strong \|
170	\| Instagram Stories \| 1080x1920 \| 9:16 \| Full screen vertical \|
171	\| Facebook \| 1200x630 \| 1.91:1 \| Link share image \|
172
173	Workflow:
174	1. Create the hero concept at highest resolution needed
175	2. Use Canva Magic Resize or manual crop for platform variants
176	3. Add text overlays programmatically (Ideogram or post-processing) if needed
177	4. Export at platform-specific dimensions
178
179	### Product Mockups & Screenshots
180
181	Showcase your product UI in context. AI models hallucinate UI — don't use them for this.
182
183	1. Capture real screenshots of your product at 2x resolution
184	2. Frame in device mockups — use browser frame, laptop, or phone templates
185	3. Add context — callout arrows, feature labels, before/after comparisons
186	4. Annotate with code — Hyperframes or HTML/CSS for programmatic overlays
187
188	Tools: Browser DevTools (screenshot), Shottr (Mac), CleanShot X, or `screencapture` CLI.
189
190	### Profile & Listing Banners
191
192	Banners for profiles, directory listings, and marketplace pages. Often the first visual impression.
193
194	\| Platform \| Size \| Notes \|
195	\|----------\|------\|-------\|
196	\| LinkedIn personal cover \| 1584x396 \| 4:1, safe zone center \|
197	\| LinkedIn company cover \| 1128x191 \| 5.9:1; LinkedIn recommends up to 4200x700 \|
198	\| Twitter/X header \| 1500x500 \| 3:1, partially obscured by avatar \|
199	\| Product Hunt gallery \| 1270x760 \| 5:3, up to 6 images \|
200	\| G2 profile \| 1280x720 \| 16:9, product screenshots preferred \|
201	\| GitHub social preview \| 1280x640 \| 2:1, shows in link cards \|
202	\| App Store screenshots \| Varies by device \| See aso skill for full specs \|
203	\| Google Play feature graphic \| 1024x500 \| ~2:1, required for store listing \|
204
205	Best practices:
206	- Keep text minimal — banners are seen at small sizes on mobile
207	- Center critical content — edges get cropped differently per device
208	- Show the product — real UI screenshots outperform abstract graphics on directory listings
209	- Match your brand — use consistent colors, fonts, logo placement
210	- Update seasonally — stale banners signal an inactive product
211
212	Workflow:
213	1. Pick the platform(s) and note exact dimensions
214	2. For directories (Product Hunt, G2): use real product screenshots with light annotation
215	3. For profiles (LinkedIn, Twitter): use brand colors + tagline + optional product shot
216	4. Generate with Canva/Figma templates or Ideogram (if text-heavy)
217	5. Test at actual display size — zoom out to check readability
218
219	### Brand Assets
220
221	Logos, icons, and illustrations. AI generation has limits here.
222
223	\| Asset \| AI Generation \| Design Tool \| Notes \|
224	\|-------\|:-:\|:-:\|-------\|
225	\| Logo \| Poor — inconsistent, not vector \| Yes (Figma) \| Always design or commission logos \|
226	\| App icon \| Decent starting point \| Yes (Figma) \| Generate concepts, refine manually \|
227	\| Illustrations \| Good for style exploration \| Depends \| AI for concepts, finalize in design tool \|
228	\| Favicons \| No \| Yes \| Derive from logo \|
229	\| Social icons \| No \| Yes \| Use platform-provided assets \|
230
231	---
232
233	## Image Optimization
234
235	Every image on your site affects page speed, which affects SEO and conversions.
236
237	### Format Guide
238
239	\| Format \| Best For \| Compression \| Browser Support \|
240	\|--------\|----------\|-------------\|:---:\|
241	\| WebP \| Photos, graphics — default choice \| Lossy + lossless \| ~96% \|
242	\| AVIF \| Highest compression, newest \| Better than WebP \| ~94% \|
243	\| JPEG \| Fallback for older browsers \| Lossy only \| Universal \|
244	\| PNG \| Transparency, screenshots \| Lossless \| Universal \|
245	\| SVG \| Logos, icons, illustrations \| Vector (scales) \| Universal \|
246
247	### Optimization Checklist
248
249	- [ ] Serve WebP with JPEG/PNG fallback (`<picture>` element or CDN auto-format)
250	- [ ] Resize to display size — don't serve 4000px images in 800px containers
251	- [ ] Compress — target quality 75-85% for photos, near-lossless for screenshots
252	- [ ] Lazy load below-the-fold images (`loading="lazy"`)
253	- [ ] Set explicit dimensions — `width` and `height` attributes prevent layout shift (CLS)
254	- [ ] Use a CDN with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary)
255	- [ ] Add alt text — descriptive, keyword-relevant, not stuffed
256
257	### Quick Optimization Commands
258
259	```bash
260	# Convert to WebP (using cwebp)
261	cwebp -q 80 input.png -o output.webp
262
263	# Batch convert with ImageMagick
264	mogrify -format webp -quality 80 *.png
265
266	# Optimize JPEG (using jpegoptim)
267	jpegoptim --max=80 --strip-all *.jpg
268
269	# Check image sizes on a page
270	curl -s https://yoursite.com \| grep -oP 'src="[^"]+\.(jpg\|png\|webp)"' \| head -20
271	```
272
273	---
274
275	## OG & Social Preview Images
276
277	The image that appears when your URL is shared on social media, Slack, Discord, etc.
278
279	### Required Meta Tags
280
281	```html
282	<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />
283	<meta property="og:image:width" content="1200" />
284	<meta property="og:image:height" content="630" />
285	<meta name="twitter:card" content="summary_large_image" />
286	<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
287	```
288
289	### Dynamic OG Images
290
291	Generate OG images programmatically for pages with dynamic content (blog posts, user profiles):
292
293	- Vercel OG (`@vercel/og`) — generates images at the edge using JSX
294	- Satori — converts HTML/CSS to SVG (powers Vercel OG)
295	- Cloudinary — URL-based text overlay on template images
296
297	Best for programmatic SEO: Generate unique OG images per page using templates + dynamic data.
298
299	---
300
301	## Common Mistakes
302
303	1. Using AI for product UI screenshots — models hallucinate interfaces; capture real screenshots
304	2. Skipping image optimization — unoptimized images are the #1 page speed killer
305	3. No OG image — shared links look broken without a preview image
306	4. Wrong aspect ratio — always check platform specs before generating
307	5. Text-heavy images without Ideogram — most AI models butcher text; use Ideogram or add text in post
308	6. Generating without style direction — "photorealistic," "flat illustration," "3D render" drastically changes output
309	7. Inconsistent brand visuals — use Flux multi-reference or design templates for consistency
310	8. Huge images on landing pages — compress, resize, lazy load
311
312	---
313
314	## Task-Specific Questions
315
316	1. What type of image do you need? (Blog hero, social graphic, mockup, banner, brand asset)
317	2. What platform or placement? (This determines dimensions)
318	3. Do you have brand assets to match? (Colors, fonts, logo, style guide)
319	4. Is this a one-off or a repeatable template?
320	5. Do you have API keys for any image generation tools?
321	6. Does this need to be optimized for web performance?
322
323	---
324
325	## Related Skills
326
327	- ad-creative: For paid ad image creative, platform-specific ad specs, and scaled ad production
328	- video: For AI video production and programmatic video
329	- social: For what to post and content strategy
330	- cro: For image placement and conversion optimization on landing pages
331	- seo-audit: For image SEO (alt text, file names, lazy loading)
332	- aso: For app store screenshot specs and optimization
333	- directory-submissions: For Product Hunt gallery images and directory listing visuals

6 picks

Type

Run `npx skills use "https://github.com/coreyhaines31/marketingskills" --skill "coreyhaines31/marketingskills/image"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/coreyhaines31/marketingskills" that are relevant to the current task. Run `npx skills add "https://github.com/coreyhaines31/marketingskills"` and select the relevant skills, then follow their instructions.

image

How to install image?

Related

image

How to install image?

Related