Image Generation via MCP

AI image generation skill via MCP. Use Gemini models or compatible services to generate high-quality images for marketing, UI, and presentations.

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

Required setup:

• 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

Write a structured 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

Model Use case Notes gemini-3-pro-image High quality Complex compositions, detail gemini-2.5-flash-image Fast iteration Prototyping, testing gemini-2.5-pro-image Balanced Quality/speed balance

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"

Review checklist:

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

Step 5: Deliverables

Final 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

Prompt:

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.

Expected output:

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

Example 2: Product Thumbnail

Prompt:

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.

Expected output:

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

Example 3: Social Media Banner

Prompt:

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.

Expected output:

• 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

Cause: Missing stable style constraints Solution: Add style references and a fixed palette

Issue: Wrong aspect ratio

Cause: Ratio not specified or an unsupported ratio Solution: Provide an exact ratio and regenerate

Issue: Brand mismatch

Cause: Color codes not specified Solution: Specify brand colors via HEX codes

---

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

Agent Role Claude Prompt structuring, quality verification Gemini Run image generation Codex File management, batch processing

---

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

GitHub Owner

Owner: supercent-io

Files

frontend-design

• View: https://github.com/supercent-io/skills-template/blob/HEAD/.agent-skills/image-generation/../../frontend/design-system/SKILL.md

presentation-builder

• View: https://github.com/supercent-io/skills-template/blob/HEAD/.agent-skills/image-generation/../../documentation/presentation-builder/SKILL.md

video-production

• View: https://github.com/supercent-io/skills-template/blob/HEAD/.agent-skills/image-generation/../video-production/SKILL.md