image-generation

Original：🇺🇸 English
Not Translated

Generate high-quality images via MCP (Gemini models or compatible services) using structured prompts, ratios, and validation for marketing, UI, or presentations.

2installs
Sourceakillness/skills-template
Added on

NPX Install

npx skill4agent add akillness/skills-template image-generation

SKILL.md Content

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

bash
# 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:
markdown
**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

ModelUse caseNotes
gemini-3-pro-image
High qualityComplex compositions, detail
gemini-2.5-flash-image
Fast iterationPrototyping, testing
gemini-2.5-pro-image
BalancedQuality/speed balance

Step 4: Generate and Review

bash
# 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
json
{
  "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

markdown
## 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

AgentRole
ClaudePrompt structuring, quality verification
GeminiRun image generation
CodexFile 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