image

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

Updated May 13, 2026
One-click install
npx skills add https://github.com/MarcoBolsa/motor-cotacoes --skill image-marcobolsa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/MarcoBolsa/motor-cotacoes/tree/main/.claude/skills/marketingskills/image
Command: npx skills add https://github.com/MarcoBolsa/motor-cotacoes --skill image-marcobolsa

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 tools, correct platform dimensions, and proper optimization, which is time-consuming and error-prone without guidance. ## Core Features & Use Cases - AI Image Generation Guidance: Compares Gemini, Flux, Ideogram, GPT Image, and Midjourney with decision trees for text rendering, brand consistency, editing, and cost. - Platform-Specific Workflows: Provides exact dimensions and best practices for blog heroes, social media graphics, 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: A SaaS founder needs a Twitter/X header and five social variants of a hero image — the Skill specifies 1500x500 for the header, recommends Canva Magic Resize for variants, and warns against using AI to fake product UI screenshots. ## Quick Start Ask the assistant to create a 1200x630 blog hero image for your next post, including a generation prompt and WebP optimization steps.

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 has the best text rendering of any model, making it ideal for headlines and taglines in social graphics. Gemini and GPT Image handle short text decently, while Midjourney remains unreliable for text.

Can AI generate screenshots of my product's dashboard?▼

No — AI models hallucinate interfaces, so the result will not match your real UI. 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 fallbacks. Use SVG for logos and icons, and AVIF when you need the highest compression.

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

Use programmatic generation with Vercel OG (@vercel/og), Satori, or Cloudinary URL-based overlays. Build one branded template, then inject post metadata like title and author to produce a unique 1200x630 image per page.

What are the correct social media image sizes?▼

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