Image Generation via MCP

When to use this skill

• Marketing assets: Hero images, banners, social media content
• UI/UX design: Placeholder images, icons, illustrations
• Presentations: Slide backgrounds, product visualizations
• Brand consistency: Generate images based on a style guide

Instructions

Step 1: Configure MCP Environment

# Check MCP server configuration
claude mcp list

# Check Gemini CLI availability
# gemini-cli must be installed

• Model name (gemini-2.5-flash, gemini-3-pro, etc.)
• API key reference (stored as an environment variable)
• Output directory

Step 2: Define the Prompt

**Subject**: [main subject]
**Style**: [style - minimal, illustration, photoreal, 3D, etc.]
**Lighting**: [lighting - natural, studio, golden hour, etc.]
**Mood**: [mood - calm, dynamic, professional, etc.]
**Composition**: [composition - centered, rule of thirds, etc.]
**Aspect Ratio**: [ratio - 16:9, 1:1, 9:16]
**Brand Colors**: [brand color constraints]

Step 3: Choose the Model

gemini-3-pro-image

gemini-2.5-flash-image

gemini-2.5-pro-image

Step 4: Generate and Review

# Generate 2-4 variants
ask-gemini "Create a serene mountain landscape at sunset,
  wide 16:9, minimal style, soft gradients in brand blue #2563EB"

# Iterate by changing a single variable
ask-gemini "Same prompt but with warm orange tones"

• Brand fit
• Composition clarity
• Ratio correctness
• Text readability (if text is included)

Step 5: Deliverables

• Final image files
• Prompt metadata record
• Model, ratio, usage notes

{
  "prompt": "serene mountain landscape at sunset...",
  "model": "gemini-3-pro-image",
  "aspect_ratio": "16:9",
  "style": "minimal",
  "brand_colors": ["#2563EB"],
  "output_file": "hero-image-v1.png",
  "timestamp": "2026-01-21T10:30:00Z"
}

Examples

Example 1: Hero Image

Create a serene mountain landscape at sunset,
wide 16:9, minimal style, soft gradients in brand blue #2563EB.
Focus on clean lines and modern aesthetic.

• 16:9 hero image
• Prompt parameters saved
• 2-3 variants for selection

Example 2: Product Thumbnail

Generate a 1:1 thumbnail of a futuristic dashboard UI
with clean interface, soft lighting, and professional feel.
Include subtle glow effects and dark theme.

• 1:1 square image
• Low visual noise
• App store ready

Example 3: Social Media Banner

Create a LinkedIn banner (1584x396) for a SaaS startup.
Modern gradient background with abstract geometric shapes.
Colors: #6366F1 to #8B5CF6.
Leave space for text overlay on the left side.

• LinkedIn-optimized dimensions
• Safe zone for text
• Brand-aligned colors

Best practices

1. Specify ratio early: Prevent unintended crops
2. Use style anchors: Maintain consistent aesthetics
3. Iterate with constraints: Change only one variable at a time
4. Track prompts: Ensure reproducibility
5. Batch similar requests: Create a consistent style set

Common pitfalls

• Vague prompts: Specify concrete style and composition
• Ignoring size constraints: Check target channel dimension requirements
• Overly complex scenes: Simplify for clarity

Troubleshooting

Issue: Outputs are inconsistent

Issue: Wrong aspect ratio

Issue: Brand mismatch

Output format

## Image Generation Report

### Request
- **Prompt**: [full prompt]
- **Model**: [model used]
- **Ratio**: [aspect ratio]

### Output Files
1. `filename-v1.png` - [description]
2. `filename-v2.png` - [variant description]

### Metadata
- Generated: [timestamp]
- Iterations: [count]
- Selected: [final choice]

### Usage Notes
[Any notes for implementation]

Multi-Agent Workflow

Validation & Retrospectives

• Round 1 (Orchestrator): Prompt completeness, ratio correctness
• Round 2 (Analyst): Style consistency, brand alignment
• Round 3 (Executor): Validate output filenames, delivery checklist

Agent Roles

Metadata

Version

• Current Version: 1.0.0
• Last Updated: 2026-01-21
• Compatible Platforms: Claude, ChatGPT, Gemini, Codex

Related Skills

• frontend-design
• presentation-builder
• video-production

Tags

#image-generation

#gemini

#mcp

#design

#creative

#ai-art