image

Generate, edit, and optimize marketing images using AI models and design tools.

1|Updated Feb 1, 2025
One-click install
npx skills add https://github.com/TiagoDanin/TiagoDanin.github.io --skill image-tiagodanin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/TiagoDanin/TiagoDanin.github.io/tree/main/.claude/skills/seo/image
Command: npx skills add https://github.com/TiagoDanin/TiagoDanin.github.io --skill image-tiagodanin

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, writing effective prompts, matching platform dimensions, and optimizing files for web performance, which is time-consuming without structured guidance. ## Core Features & Use Cases - AI Model Selection: Compares Gemini/Nano Banana, Flux, Ideogram, GPT Image, Midjourney, Recraft, and Stable Diffusion by text rendering, editing capability, API access, and cost, with a decision tree for picking the right one. - Platform-Specific Workflows: Provides exact dimensions and workflows for blog heroes (1200x630), social graphics (Instagram, LinkedIn, Twitter/X), profile banners, Product Hunt galleries, and GitHub social previews. - Image Optimization: Covers WebP/AVIF conversion, compression targets, lazy loading, and OG meta tags, with CLI commands using cwebp, ImageMagick, and jpegoptim. - Use Case: You need a hero image for a new blog post plus an OG image for social sharing. The skill guides you to generate a 1200x630 visual with Flux or Gemini, then compress it under 200KB as WebP with proper meta tags. ## Quick Start Generate a 1200x630 blog hero image about API monitoring in a clean photorealistic style and optimize it for web delivery.

Frequently Asked Questions about image

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

FAQPage Schema
How do I generate marketing images with AI models?

Write a prompt combining subject, setting, style, lighting, composition, and dimensions, then generate with a model like Gemini, Flux, or Ideogram. Always specify the aspect ratio and target size, such as 1200x630 for blog heroes.

Which AI image model is best for text in images?

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

Can AI generate product screenshots and UI mockups?

No, AI models hallucinate interfaces and should not be used for product UI. Capture real screenshots at 2x resolution with browser DevTools or CleanShot X, then frame them in device mockups with annotations.

What size should an OG image be for social sharing?

The standard OG image size is 1200x630 pixels, which works for Twitter/X, Facebook, LinkedIn, and Slack previews. Pair it with og:image meta tags and twitter:card set to summary_large_image.

How do I optimize images for web performance?

Convert images to WebP at 75-85% quality using cwebp or ImageMagick, resize to actual display dimensions, add width and height attributes, and lazy load below-the-fold images. Serve via a CDN with auto-format when possible.

When should I use Canva or Figma instead of AI generation?

Use design tools when exact brand guidelines must be followed, when resizing one design into many platform variants, or for recurring templates. Use AI generation for unique hero images and abstract creative visuals.