SuperCharged-Claude-Code-Upgrade/skills/wordpress-ai/image-generation.md

name, description

name	description
wordpress-ai-image-generation	Generate AI images for WordPress content using WordPress AI plugin capabilities

WordPress AI: Image Generation

When to Use

Use this skill when you need to:

• Create featured images for posts
• Generate custom graphics
• Produce visual content from text prompts
• Design headers, banners, or thumbnails

How It Works

The WordPress AI plugin generates images by:

1. Processing your text prompt
2. Sending to AI image model (DALL-E, Stable Diffusion, etc.)
3. Returning generated image as media library upload
4. Optional: Auto-generating alt text

Prompt Engineering

Effective Prompts

Create detailed, specific prompts including:

Subject (Main focus)

• "modern SaaS dashboard interface"
• "elegant product showcase"
• "professional team collaboration"

Style (Visual aesthetic)

• "minimalist design"
• "isometric 3D illustration"
• "flat vector art"
• "photorealistic"
• "watercolor painting"

Colors (Color scheme)

• "blue and white gradient"
• "warm sunset tones"
• "dark mode aesthetic"
• "pastel soft colors"

Composition (Layout)

• "centered subject"
• "rule of thirds"
• "symmetrical layout"
• "negative space"

Mood (Emotional tone)

• "professional and trustworthy"
• "playful and energetic"
• "calm and peaceful"
• "innovative and futuristic"

Prompt Formula

[Subject] in [Style] with [Colors], [Composition], [Mood] mood

Example: "Modern SaaS dashboard interface in flat vector art with blue and white gradient, centered subject, professional and trustworthy mood"

Use Cases

Featured Images

Generate featured images that:

• Represent article topic
• Match brand colors
• Include readable text overlay space
• Work at multiple sizes

Prompts by Category:

Technology:

• "Futuristic AI chip design in neon blue and purple, isometric view, dark background"
• "Clean code editor interface with syntax highlighting, minimalist, flat design"

Business:

• "Professional handshake illustration, modern flat style, blue corporate colors"
• "Growth chart with upward trend, isometric 3D, green success colors"

Creative:

• "Abstract geometric shapes with gradient overlays, modern art style"
• "Creative workspace with laptop and coffee, watercolor illustration"

Social Media

Generate platform-optimized images:

• Twitter: 1200x675px, landscape
• Instagram: 1080x1080px, square
• LinkedIn: 1200x627px, landscape

Headers/Banners

Generate wide format images:

• Blog header: 1200x400px
• Hero banner: 1920x600px
• Newsletter header: 600x200px

Integration with WordPress

Basic Usage

// Generate and attach to post
$image_id = ai_generate_image( array(
    'prompt' => 'Modern SaaS dashboard with blue gradient',
    'post_id' => $post_id,
    'size' => 'large',
) );

if ( ! is_wp_error( $image_id ) ) {
    set_post_thumbnail( $post_id, $image_id );
}

With Alt Text

$result = ai_generate_image( array(
    'prompt' => 'Woman typing on laptop in modern office',
    'generate_alt_text' => true,
    'alt_text_prompt' => 'Describe this image in detail for accessibility',
) );

Batch Generation

$prompts = array(
    'Dashboard analytics interface',
    'Mobile app onboarding screen',
    'Team collaboration illustration',
);

foreach ( $prompts as $prompt ) {
    ai_generate_image( array( 'prompt' => $prompt ) );
}

Best Practices

✅ Do:

• Be specific and detailed
• Include style preferences
• Specify dimensions/aspect ratio
• Test multiple variations
• Add alt text for accessibility
• Match brand guidelines

❌ Don't:

• Use vague descriptions
• Request copyrighted characters/logos
• Generate misleading content
• Forget to test at different sizes
• Ignore accessibility

Quality Checklist

Before delivering images:

• Matches prompt requirements
• Appropriate resolution
• Works at multiple sizes
• Has alt text or description
• Matches brand/style guidelines
• No offensive or problematic content
• Properly formatted file type

Common Prompt Patterns

SaaS/Tech

• "Clean interface design with [color] accent, minimalist, [device] mockup"
• "Isometric server/cloud illustration, [color] palette, 3D render style"

E-commerce

• "Product photography of [item], white background, studio lighting"
• "Lifestyle shot of [product] in use, natural lighting, [setting]"

Editorial

• "Editorial illustration for [topic], [style] art, [mood] mood"
• "Infographic-style design showing [concept], vector format"

Abstract

• "Abstract geometric composition with [adjective] shapes, [color] gradients"
• "Gradient background with subtle texture, [color] to [color] fade"