marketing-image-production

Generate and optimize marketing images using AI models, design tools, and web performance best practices.

Updated May 11, 2026
One-click install
npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill marketing-image-production-cloudofgeorge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: marketing-image-production
Source: https://github.com/cloudofgeorge/AI-hands-Engineer/tree/main/skills/marketing/skills/marketing-image-production
Command: npx skills add https://github.com/cloudofgeorge/AI-hands-Engineer --skill marketing-image-production-cloudofgeorge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating marketing visuals — blog heroes, social graphics, product mockups, banners, and OG images — requires choosing the right AI model or design tool, writing effective prompts, matching platform dimensions, and optimizing files for web performance. This Skill consolidates that entire workflow into one operational guide. ## Core Features & Use Cases - AI Model Selection: Compares Gemini/Nano Banana, Flux, Ideogram, GPT Image, Midjourney, Recraft, and Stable Diffusion with a decision tree for text rendering, brand consistency, editing, and cost. - Platform-Specific Workflows: Provides exact dimensions and production steps for blog heroes, social graphics (Twitter/X, LinkedIn, Instagram, Facebook), profile banners, directory listings, and OG images. - Image Optimization: Covers WebP/AVIF format selection, compression commands (cwebp, ImageMagick), lazy loading, and dynamic OG image generation with Vercel OG, Satori, or Cloudinary. - Use Case: You need a hero image for a blog post plus five social variants. The Skill guides you to generate the concept with Flux or Gemini at 1200x630, resize via Canva Magic Resize, and compress to WebP under 200KB. ## Quick Start Ask the agent to create a 1200x630 blog hero image for your topic, including a ready-to-use AI generation prompt and optimization steps.

Frequently Asked Questions about marketing-image-production

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a blog hero image with AI?

Use Flux or Gemini for photorealistic heroes, or Ideogram if the image needs text. Write a prompt following Subject + Setting + Style + Lighting + Composition + Technical specs, generate at 1200x630, then compress to WebP under 200KB with a JPEG fallback.

Which AI image model is best for text in images?

Ideogram 3.0 has the best text rendering accuracy for headlines and taglines. Gemini and GPT Image handle short text decently, but keep requests to 3-5 words and add longer text via post-processing overlays instead.

Can AI generate screenshots of my product UI?

No — AI models hallucinate interfaces, so generated UI will not match your real product. Capture real screenshots at 2x resolution using browser DevTools, Shottr, or CleanShot X, then frame them in device mockups with annotations.

What image format should I use on my website?

WebP is the default choice for photos and graphics with roughly 96% browser support, served with JPEG or PNG fallbacks. Use AVIF for higher compression, PNG for transparency and screenshots, and SVG for logos and icons.

How do I create OG images for every blog post automatically?

Use programmatic generation with Vercel OG (@vercel/og), which builds images at the edge from JSX templates, or Satori for HTML-to-SVG conversion. Build one branded template, then inject post metadata to produce unique 1200x630 images per page.

What are the correct social media image dimensions?

Twitter/X uses 1200x675, LinkedIn 1200x627, Instagram feed 1080x1080 (or 1080x1350), Stories 1080x1920, and Facebook 1200x630. Create the master at the highest resolution, then use Canva Magic Resize for platform variants.