skills.rest
barkleesanders
barkleesandersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

image

Generate and optimize marketing images for web performance and social sharing.

5|Updated Mar 27, 2026
Search Tags:#image generation#image optimization#brand assets#product mockups#marketing graphics#social media images#og images
One-click install
npx skills add https://github.com/barkleesanders/claude-code-starter --skill image-barkleesanders
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/barkleesanders/claude-code-starter/tree/main/skills/image
Command: npx skills add https://github.com/barkleesanders/claude-code-starter --skill image-barkleesanders

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the hassle of creating mismatched, unoptimized, or platform-incompatible marketing images that damage brand consistency, slow down page load times, and reduce social sharing engagement.

Core Features & Use Cases

  • AI Image Generation: Create original marketing visuals (blog heroes, social graphics, product mockups) using top models like Flux, Ideogram, and Gemini, with guidance on prompt writing and model selection.
  • Platform-Specific Optimization: Resize, compress, and format images for web performance, including WebP conversion, lazy loading setup, and OG meta tag implementation for social previews.
  • Brand-Consistent Asset Creation: Use design tools (Canva, Figma) to build templated, on-brand graphics like profile banners, social templates, and brand assets that match your style guide.
  • Use Case Example: If you need a 1200x630 blog hero image for a new product launch, this Skill guides you through generating a matching visual, optimizing it to under 200KB, and adding the correct meta tags so it displays properly when shared on LinkedIn and Twitter.

Quick Start

Use the image skill to generate a 1200x630 blog hero image for a SaaS analytics product post, optimize it to under 200KB WebP, and add the correct OG meta tags for social sharing.

Frequently Asked Questions about image

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

FAQPage Schema
How do I create a blog hero image optimized for web performance and social sharing?▼

To create a blog hero image, you can use AI models like Flux or Gemini to generate a 1200x630 visual, compress it to under 200KB in WebP format, and implement OG meta tags for proper social media previews.

What is the best way to generate product mockups and marketing graphics?▼

Generating product mockups and marketing graphics is best achieved by using AI image generation models like Ideogram or Gemini, guided by prompt writing techniques to produce original, brand-aligned visual assets.

How do I compress images for SEO and ensure they display correctly on social media?▼

Compressing images for SEO involves converting files to WebP format and setting up lazy loading, while implementing correct OG meta tags ensures your marketing graphics display properly as social previews on platforms like LinkedIn.

Can I use Canva and Figma to build brand-consistent profile banners and social templates?▼

Yes, you can use design tools like Canva and Figma to build templated, on-brand graphics, including profile banners and social templates that match your specific style guide for consistent marketing assets.

Does AI image generation work with WebP conversion for fast-loading marketing visuals?▼

AI image generation works with WebP conversion by first creating original marketing visuals using models like Flux or Ideogram, followed by resizing and compression steps to deliver production-ready, fast-loading assets.

Related Skills

Explore More Marketing & Sales Skills→
bahayonghangbahayonghang
16

gemini-image

Generate images from text prompts or reference images via the Gemini API.

Community
Basic
tassiovaletassiovale
13

web-asset-generator

Generate favicons, app icons, and social media meta images with HTML tags.

Community
Intermediate
pablitonogpablitonog
1

canva

Integrates with the Canva API to create, search, and export visual assets programmatically.

Community
Intermediate
fianchettogiannifianchettogianni

image

Generate platform-specific marketing visuals with exact dimensions and optimization guidance.

Community
Intermediate