skills.rest
bittlinkm
bittlinkmCOMMUNITY
Explore all skills by this author →
GitHub

image

Generates and optimizes marketing images using AI models, design tools, and web performance best practices.

Updated Aug 20, 2026
Search Tags:#image generation#og image#flux#ideogram#social media graphics#marketing visuals#webp optimization
One-click install
npx skills add https://github.com/bittlinkm/claude-setup --skill image-bittlinkm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/bittlinkm/claude-setup/tree/main/skills/image
Command: npx skills add https://github.com/bittlinkm/claude-setup --skill image-bittlinkm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating professional marketing visuals — blog heroes, social graphics, product mockups, banners, and OG images — requires choosing the right AI model, knowing platform-specific dimensions, and optimizing files for web performance, which is time-consuming and error-prone without guidance. ## Core Features & Use Cases - AI Image Generation Guidance: Compares Gemini, Flux, Ideogram, GPT Image, Midjourney, Recraft, and Stable Diffusion with decision trees for text rendering, brand consistency, editing, and cost. - Platform-Specific Workflows: Provides exact dimensions and workflows for blog heroes (1200x630), social platforms, profile banners, directory listings, and OG images. - Image Optimization: Covers WebP/AVIF formats, compression commands, lazy loading, and CDN strategies to protect page speed. - Use Case: You need a hero image for a blog post plus OG preview. The Skill recommends Flux or Gemini, provides a structured prompt, specifies 1200x630, and shows how to compress to WebP under 200KB. ## Quick Start Ask the assistant to create a hero image for your next blog post, specifying the topic and target platform.

Frequently Asked Questions about image

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.

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 in post-processing 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 with 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 fallback. 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 OG generation with Vercel OG (@vercel/og), Satori, or Cloudinary. Build one branded template, then dynamically inject each post's title and metadata to generate unique 1200x630 images at the edge.

What size should a Twitter/X header banner be?▼

Twitter/X headers are 1500x500 (3:1 ratio). Keep critical content centered because the avatar partially obscures the image, minimize text since banners display small on mobile, and test readability at actual display size.

Related Skills

Explore More Marketing & Sales Skills→
samibrahmisamibrahmi

branding-generator

Generate three brand directions with color palettes, typography pairings, and logo concepts.

Community
Intermediate
SalesTeamToolboxSalesTeamToolbox

marketing

Generate persuasive marketing copy using AIDA, PAS, and BAB frameworks.

Community
Basic
bolun-ben-shipbolun-ben-ship

seo-images

Audit website images for alt text, sizing, formats, responsiveness, and lazy loading.

Community
Intermediate
tapanshahtapanshah

ad-creative

Generate ad copy, headlines, and variations for paid campaigns.

Community
Advanced