skills.rest
MohmmedKudmani
MohmmedKudmaniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

image

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

Updated Jun 3, 2026
Search Tags:#image generation#ai prompting#og image#social media graphics#marketing visuals#product mockup#webp optimization
One-click install
npx skills add https://github.com/MohmmedKudmani/mk-ai-os --skill image-mohmmedkudmani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/MohmmedKudmani/mk-ai-os/tree/main/.opencode/skills/marketing/content-copy/image
Command: npx skills add https://github.com/MohmmedKudmani/mk-ai-os --skill image-mohmmedkudmani

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating marketing visuals like blog heroes, social graphics, product mockups, and banners requires choosing the right tool, writing effective prompts, matching platform dimensions, and optimizing files for web performance, which is time-consuming without guidance. ## Core Features & Use Cases - AI Image Generation Guidance: Compares models like Gemini, Flux, Ideogram, GPT Image, Midjourney, and Recraft with decision trees for text rendering, brand consistency, editing, and cost. - Platform-Specific Workflows: Provides exact dimensions and workflows for blog heroes, social media graphics, profile banners, directory listings, and OG images. - Image Optimization: Covers WebP/AVIF formats, compression commands, lazy loading, and dynamic OG image generation with Vercel OG or Cloudinary. - Use Case: You need a hero image for a blog post plus variants for Twitter, LinkedIn, and Instagram. The Skill recommends a generation model, provides a structured prompt, lists each platform's dimensions, and suggests Canva Magic Resize for the variants. ## Quick Start Ask the assistant to create a 1200x630 blog hero image for your next post and generate platform-specific social media variants from it.

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 the Subject + Setting + Style + Lighting + Composition + Technical pattern, specify 1200x630 dimensions, 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 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 annotations.

What image format should I use on my website?▼

Use WebP as the default with JPEG or PNG fallback via the picture element or a CDN. AVIF offers higher compression, PNG suits transparency and screenshots, and SVG is best for logos and icons.

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

Use programmatic generation with Vercel OG (@vercel/og), Satori, or Cloudinary text overlays. Build one branded template at 1200x630, then inject post metadata dynamically and reference it in og:image and twitter:image meta tags.

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 one master at the highest resolution, then resize with Canva Magic Resize.

Related Skills

Explore More Marketing & Sales Skills→
SoufianouassifSoufianouassif

branding-generator

Generate three brand directions with color palettes, typography, and SVG logos.

Community
Advanced
zm2231zm2231

analytics-optimization

Track content performance and integrate GA4, social, and email analytics into unified dashboards.

Community
Advanced
Vincri126Vincri126

seo-images

Audit web page images for alt text, formats, lazy loading, and responsive delivery.

Community
Advanced
EstomEstom

figma-implement-design

Translate Figma designs into frontend code with visual parity.

Community
Advanced