Image Generator

<!-- Original source: Sandhya Simhan's blog repo Generalized for claude-code-quickstart SDK -->

Image Generator

Generates professional branded images using Google Gemini's image generation API. Automatically reads brand guidelines from the target project to ensure visual consistency.

How It Works

1. Brand Discovery: Looks for brand guidelines in the project (see Brand Configuration below)
2. Format Selection: User chooses image format (LinkedIn, Medium, Square, Vertical)
3. Prompt Crafting: Combines user request + brand guidelines + format specs
4. Generation: Calls Gemini API to generate the image
5. Output: Saves to configured output directory

Brand Configuration

The skill looks for brand guidelines in this order:

1. BRAND.md in project root
2. .claude/​BRAND.md
3. docs/​BRAND.md

If no brand file exists, the skill will prompt you to create one (see BRAND_TEMPLATE.md).

Minimal BRAND.md Example

# Brand Guidelines

## Colors
- **Primary:** #0078AA (Teal)
- **Background:** #F4F1EB (Off-white)
- **Accent:** #F69F22 (Yellow)

## Style
- Modern minimalist
- Hand-drawn/​illustrated feel
- Generous whitespace

## Tone
- Professional but friendly
- Approachable, not corporate

Image Formats

See IMAGE_FORMATS.md for detailed layout tips.

Instructions

When the user requests an image:

1. Find Brand Guidelines

Read BRAND.md (or alternative locations) to understand:
- Color palette (primary, accent, neutral colors)
- Visual style (minimalist, illustrated, corporate, etc.)
- Emotional tone (friendly, professional, playful, etc.)
- Design elements to include/​avoid

If no brand file exists, ask if they want to create one or proceed with defaults.

2. Determine Format & Output

• Ask which format they need (or default to LinkedIn 1200×630)
• Determine output directory:
  • Default: assets/​images/ or _assets/​images/
  • Use existing image directory if one exists
  • Or ask user preference

3. Gather Requirements

• Blog post topic/​title
• Key themes or concepts to visualize
• Specific elements to include
• Level of detail (high-level concept vs detailed)

4. Craft Brand-Aligned Prompt

Build a detailed prompt that includes:

• Exact dimensions for the chosen format
• Background color from brand guidelines
• Primary and accent colors from brand palette
• Visual style from brand guidelines
• Composition appropriate for the format
• Emotional tone matching brand voice

Prompt Template:

Create a [style] image ([dimensions]) for [topic].

Background: Use [background color] as the background.

Visual style: [brand style description]. Use [primary color] as the
primary anchor color with subtle accents of [accent colors]. Include
[design elements from brand].

Composition: [format-specific layout guidance].

Mood: [brand emotional tone]. [Additional mood guidance].

5. Generate Image

Run the generator script:

python [skill-path]/​generate_image.py \
  --prompt "your detailed prompt" \
  --output "filename.png" \
  --output-dir "assets/​images" \
  --image-type linkedin

6. Provide Output

• Show the generated image path
• Provide markdown snippet: ![Alt text](path/​to/​image.png)
• Offer to regenerate with adjustments
• Offer additional formats if needed

Setup Requirements

1. Google Gemini API Key

export GEMINI_API_KEY="your-api-key-here"

Get a key at: https://aistudio.google.com/apikey

2. Python Dependencies

pip install google-genai pillow

3. Output Directory

The skill will create the output directory if it doesn't exist.

Tips for Great Images

Format-Specific:

• LinkedIn: Horizontal flow, leave left/​right third for text
• Medium: Wide cinematic feel, text at top/​bottom
• Square: Centered, icon-like clarity, standalone
• Vertical: Top-to-bottom flow, can show progression

General:

• Clarity over complexity
• Generous whitespace
• Intentional color use (don't use all accent colors at once)
• Match the brand's visual metaphor style

Example Session

User: "Generate a header for my post about API design patterns"

Skill:

1. Reads BRAND.md → finds teal primary, illustrated style
2. Asks: "Which format? LinkedIn (default), Medium, Square, or Vertical?"
3. User: "LinkedIn"
4. Asks: "Key visual metaphor? (e.g., building blocks, pipelines, contracts)"
5. User: "Building blocks connecting"
6. Crafts prompt with brand colors + dimensions + metaphor
7. Generates image → saves to assets/​images/​api-design-linkedin.png
8. Returns: ![API Design Patterns](assets/​images/​api-design-linkedin.png)