Comprehensive Image Generation

A Claude Code skill for generating, editing, and managing images within development projects. Covers AI-powered image generation for website assets, game sprites, UI mockups, product visuals, logos, and any visual content needed during development — all triggered directly from your code workflow.

When to Use This Skill

Choose Comprehensive Imagegen when:

• You need to generate images for a project (hero images, product photos, icons)
• You want to create placeholder visuals for prototypes and mockups
• You need AI-generated assets for games (sprites, backgrounds, textures)
• You want to generate social media images or marketing visuals
• You need to batch-generate variations of images for A/B testing

Consider alternatives when:

• You need to edit existing images manually (use an image editor skill)
• You want 3D rendering (use a 3D workspace skill)
• You need design system components (use a UI design system skill)

Quick Start

Copy
# Install the skill
claude install comprehensive-imagegen

# Generate a hero image
claude "Generate a hero image for a developer tools landing page: dark gradient background with floating code snippets and glowing nodes"

# Create game assets
claude "Generate a set of 4 pixel art character sprites: idle, walk, jump, attack. 64x64 pixels, fantasy RPG style"

# Generate product mockups
claude "Create a product mockup showing our app on a MacBook Pro, iPhone, and iPad in a clean workspace setting"

Core Concepts

Image Generation Models

Model	Best For	Quality	Speed
Flux Dev	General purpose, versatile	High	Medium
SDXL	Detailed, artistic images	High	Slow
Flux Schnell	Quick drafts and iterations	Medium	Fast
Midjourney-style	Artistic, stylized images	Very High	Slow
Stable Diffusion	Controllable, fine-tuned results	Medium-High	Medium

Prompt Engineering for Images

Effective Prompt Structure:
[Subject] + [Style] + [Lighting] + [Composition] + [Quality modifiers]

Example:
"A modern office workspace with dual monitors showing code,
 soft natural lighting from a window, slightly overhead angle,
 clean and minimal style, photorealistic, high resolution"

Tips:
  → Be specific about style: "flat illustration" vs "photorealistic"
  → Specify lighting: "golden hour," "studio lighting," "neon glow"
  → Include composition: "centered," "rule of thirds," "bird's eye view"
  → Add quality tags: "high quality," "detailed," "professional"
  → Use negative prompts to exclude: "no text, no watermarks"

Asset Pipeline Integration

Use Case	Format	Resolution	Notes
Hero/Banner	JPG/WebP	1920×1080	Compress to <200KB for web
Icons	PNG (transparent)	64×64 to 512×512	Multiple sizes for different contexts
Social Media	PNG/JPG	Platform-specific	1200×630 (OG), 1080×1080 (Instagram)
Game Sprites	PNG (transparent)	Power-of-2 sizes	Sprite sheet for animations
Thumbnails	WebP	400×300	Heavily compressed for grids

Configuration

Parameter	Type	Default	Description
model	string	"flux-dev"	Generation model to use
width	number	1024	Output width in pixels
height	number	1024	Output height in pixels
style	string	"photorealistic"	Style preset: photorealistic, illustration, pixel_art, watercolor
output_dir	string	"./assets"	Directory to save generated images
format	string	"png"	Output format: png, jpg, webp

Best Practices

1. Iterate from rough to refined — Start with a quick model (Flux Schnell) to test compositions and concepts. Once you have the right direction, switch to a high-quality model for the final version. Don't burn time on slow models for exploration.

2. Write specific prompts, not generic ones — "A website hero image" generates generic results. "A dark gradient hero with floating 3D geometric shapes and subtle code patterns, developer tools aesthetic, teal and purple accent colors" generates what you actually want.

3. Use negative prompts — Always specify what you don't want: "no text, no watermarks, no borders, no hands, no distorted faces." This significantly improves output quality by constraining the generation.

4. Generate multiple samples — Generate 3-4 variations per prompt and pick the best. AI image generation has inherent randomness, and the first result is rarely the best. Use different seeds for variety.

5. Optimize for web delivery — Generated images are often unnecessarily large. Compress JPGs to 80% quality, use WebP where supported, and serve responsive sizes with srcset. A 5MB hero image will tank your page speed.

Common Issues

Generated images have text artifacts — AI models often produce garbled text. Avoid including text in your prompt unless using a model specifically designed for text rendering. Add any text as an overlay in your HTML/CSS instead.

Inconsistent style across multiple generations — Use the same model, seed (if supported), and style keywords for related images. Create a "style guide prompt" that you prepend to all generations for visual consistency.

Images look AI-generated — Use high-quality models, avoid over-saturated prompts, and post-process with subtle adjustments (slight desaturation, noise addition, color grading). Stock photo-style prompts often produce more natural results than overly creative ones.