skills.rest
Yvesdefaria
YvesdefariaCOMMUNITY
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 3, 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/Yvesdefaria/GymLab --skill image-yvesdefaria
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/Yvesdefaria/GymLab/tree/main/.opencode/skills/marketingskills/skills/image
Command: npx skills add https://github.com/Yvesdefaria/GymLab --skill image-yvesdefaria

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 without expert 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 format selection, compression commands (cwebp, mogrify), lazy loading, and dynamic OG image generation via Vercel OG, Satori, or Cloudinary. - Use Case: A SaaS founder needs a Twitter/X header banner. The skill specifies 1500x500 dimensions, warns about avatar overlap, recommends Canva or Figma for brand consistency, and suggests Ideogram if text rendering is needed. ## 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?▼

Define a visual metaphor for your topic, then generate with Flux or Gemini for photorealistic styles or Ideogram if text is needed. Specify 1200x630 dimensions so the image works for both the hero and OG preview, then compress to under 200KB as WebP.

Which AI image model is best for text in images?▼

Ideogram 3.0 has the best text rendering accuracy of any model, making it ideal for headlines and branded graphics. Gemini and GPT Image handle short text decently, but keep requests to 3-5 words maximum for reliability.

Can AI generate screenshots of my product UI?▼

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

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 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 generate unique 1200x630 images per page.

What are the correct social media image dimensions?▼

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

Related Skills

Explore More Marketing & Sales Skills→
samibrahmisamibrahmi

branding-generator

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

Community
Intermediate
jeremybrasherjeremybrasher

google-analytics

Analyze GA4 traffic, engagement, and conversions through NotFair MCP.

Community
Basic
PostalocityPostalocity
1

seo-images

Audits images for SEO and performance, including alt text, formats, and lazy loading.

Official
Intermediate
EstomEstom

figma-implement-design

Translate Figma designs into frontend code with visual parity.

Community
Advanced