Back to Skills

image-gen

verified

Generate website images with Gemini 3 Native Image Generation. Covers hero banners, service cards, infographics with legible text, and multi-turn editing. Includes Australian-specific imagery patterns. Use when stock photos don't fit, need text in images, or require consistent style across assets.

View on GitHub

Marketplace

claude-skills

jezweb/claude-skills

Plugin

frontend

Repository

jezweb/claude-skills
211stars

skills/image-gen/SKILL.md

Last Verified

January 21, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/jezweb/claude-skills/blob/main/skills/image-gen/SKILL.md -a claude-code --skill image-gen

Installation paths:

Claude
.claude/skills/image-gen/
Powered by add-skill CLI

Instructions

# Image Generation Skill

Generate and edit website images using Gemini Native Image Generation.

## Models

| Model | ID | Best For |
|-------|-----|----------|
| **Gemini 3 Flash** | `gemini-3-flash-image-generation` | Fast iteration, general use |
| **Gemini 3 Pro** | `gemini-3-pro-image-generation` | 4K, complex prompts, text |

## Capabilities

| Feature | Supported |
|---------|-----------|
| Generate from text | ✅ |
| Edit existing images | ✅ |
| Change aspect ratio | ✅ |
| Widen/extend images | ✅ |
| Style transfer | ✅ |
| Change colours | ✅ |
| Add/remove elements | ✅ |
| Text in images | ✅ (legible!) |
| Multiple reference images | ✅ (up to 14) |
| 4K resolution | ✅ (Pro only) |

## Aspect Ratios

```
1:1   | 2:3  | 3:2  | 3:4  | 4:3
4:5   | 5:4  | 9:16 | 16:9 | 21:9
```

## Resolutions (Pro only)

| Size | 1:1 | 16:9 | 4:3 |
|------|-----|------|-----|
| 1K | 1024x1024 | 1376x768 | 1184x880 |
| 2K | 2048x2048 | 2752x1536 | 2368x1760 |
| 4K | 4096x4096 | 5504x3072 | 4736x3520 |

## Quick Start

```typescript
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

// Generate new image
const response = await ai.models.generateContent({
  model: "gemini-3-flash-image-generation",
  contents: "A professional plumber in hi-vis working in modern Australian home",
  config: {
    responseModalities: ["TEXT", "IMAGE"],
    imageGenerationConfig: {
      aspectRatio: "16:9",
    },
  },
});

// Extract image
for (const part of response.candidates[0].content.parts) {
  if (part.inlineData) {
    const buffer = Buffer.from(part.inlineData.data, "base64");
    fs.writeFileSync("hero.png", buffer);
  }
}
```

## Model Selection

| Requirement | Use |
|-------------|-----|
| Fast iteration | Gemini 3 Flash |
| 4K resolution | Gemini 3 Pro |
| Text in images | Pro (better legibility) |
| Simple edits | Gemini 3 Flash |
| Complex compositions | Gemini 3 Pro |
| Infographics/diagrams | Gemini 3 Pro |

## When to U

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
2693 chars