generate-image

name	generate-image
description	Generate images using Gemini via scripts/generate-image.js. Creates technical diagrams, architecture visuals, blog headers, and branded graphics. Use when the user asks to "create an image", "generate a diagram", "make a visual", or "create a graphic". Triggers on "generate image", "create image", "make diagram", "create visual", "architecture diagram".

Image Generation Skill

Generate images using Gemini's image model via scripts/generate-image.js. Specializes in technical architecture diagrams, pipeline visuals, blog headers, and branded project graphics.

Usage

# Generate a new image
node scripts/generate-image.js "<prompt>" "<output-path>" [--aspect-ratio 16:9]

# Edit an existing image
node scripts/generate-image.js "<edit prompt>" "<output-path>" --input <source-image> [--aspect-ratio 16:9]

Requires GEMINI_API_KEY in .env.

Image Editing

Pass --input / -i with a path to an existing image to edit it instead of generating from scratch. The prompt should describe only the desired change — Gemini will preserve the rest of the image.

Good edit prompts:

• "Change the background color to blue"
• "Add a crown to the lobster"
• "Remove the text in the bottom right corner"
• "Make the arrows thicker and brighter"

Bad edit prompts (too vague or re-describe the whole image):

• "A diagram with boxes and arrows" — this regenerates rather than edits
• "Make it better" — too vague for targeted edits

Aspect Ratios

Ratio	Use Case
16:9	Architecture diagrams, pipeline flows, blog banners
1:1	Logos, icons, social media avatars
4:3	Documentation images, screenshots
9:16	Mobile/story format
3:4	Portrait format
4:1	Ultra-wide panoramic banners
1:4	Tall vertical infographics
8:1	Extreme panoramic strips
1:8	Extreme vertical strips

Default to 16:9 for technical diagrams. Ask the user if unclear.

Project Visual Style

All project diagrams use a whiteboard sketch style — hand-drawn feel with colorful markers on a white/off-white background, like a real brainstorming session.

Background

• White or off-white background like a real whiteboard
• Subtle marker texture / dry-erase feel

Color Palette (marker colors)

Color	Role
Blue	Messaging channels, data sources, entry points
Orange / Red	Orchestration, danger, warnings, attack flows
Purple	AI/agent components, processing, databases
Green	Containers, active processes, security, safe elements
Red	Destructive operations, vulnerabilities, blocked items
Yellow	API endpoints, web services, highlights
Cyan / Teal	Indexes, search, semantic operations
Black	Text, arrows, annotations, connections

Drawing Style

• Hand-sketched boxes with slightly imperfect lines and rounded corners
• Hand-drawn arrows with slight curves and imperfections
• Text that looks like handwritten marker in different colors
• Small doodles, asterisks, underlines, and emphasis marks
• Exclamation marks or stars next to key features
• Lock icons near security features
• Cloud shapes around AI components
• Annotations that look like whiteboard notes with arrows
• Circled keywords and underlined important terms

Layout

• Left-to-right or top-to-bottom flow
• Clear stage/step numbering when applicable
• Annotations and callout notes in margins (like a real whiteboard)
• Title in large bold marker text at the top

Whiteboard Background

All whiteboard-style diagrams use a pre-made background image as the canvas. The background is bundled with this skill at multiple locations — use the first one that exists:

1. ~/.claude/skills/generate-image/whiteboard-background.png (container agents)
2. docs/whiteboard-background.png (host/project root)

Before generating, resolve the path:

WB=$(test -f ~/.claude/skills/generate-image/whiteboard-background.png && echo ~/.claude/skills/generate-image/whiteboard-background.png || echo docs/whiteboard-background.png)

Then use --input "$WB" for all whiteboard diagrams.

Prompt Construction

When the user asks for a diagram, build the prompt by combining:

1. Style preamble (always include):

   Draw a hand-sketched technical diagram on this whiteboard using colorful markers. Use a hand-sketched marker style with slightly imperfect lines, hand-drawn arrows with natural curves, and handwritten-looking text in colorful markers. Add small doodles, asterisks, underlines, and emphasis marks like a real whiteboard brainstorming session. Include annotations with arrows, circled keywords, and exclamation marks near key features. Keep the whiteboard background texture visible.
   

2. Color assignments — map each component type to the marker palette above based on its role

3. Content — the specific boxes, labels, arrows, and relationships the user wants

4. Layout instruction:

   Keep it readable but energetic — like a whiteboard sketch from a team planning session. Use hand-drawn arrows between stages. Add small annotation notes in the margins for key insights.
   

Example: Architecture Diagram

node scripts/generate-image.js "Draw a hand-sketched technical diagram on this whiteboard using colorful markers. Use a hand-sketched marker style with slightly imperfect lines, hand-drawn arrows with natural curves, and handwritten-looking text in colorful markers. Add small doodles, asterisks, underlines, and emphasis marks like a real whiteboard brainstorming session.

Color markers: blue for channels, orange for orchestration, purple for AI components, green for containers.

Title at top: 'System Architecture'

[... specific boxes, connections, labels ...]

Keep it readable but energetic — like a whiteboard sketch from a team planning session. Keep the whiteboard background texture visible." "docs/system-architecture-TIMESTAMP.png" --input docs/whiteboard-background.png --aspect-ratio 16:9

Output Location

CRITICAL: Never overwrite existing images. Always append a timestamp to the filename so previous versions are preserved.

Naming format: docs/<name>-<YYYYMMDD-HHMM>.png

Examples:

• docs/data-to-wisdom-pipeline-20260221-1430.png

• docs/openclaw-vs-bastionclaw-security-20260221-1445.png

• Architecture diagrams: docs/<name>-<timestamp>.png

• Blog images: user-specified path with timestamp

• Default: output-<timestamp>.png in project root

When the user picks a final version to use in docs, symlink or copy it to the clean name (e.g., docs/data-to-wisdom-pipeline.png).

Process

Generating a New Image

1. Understand what the user wants to visualize
2. Construct the prompt using the style guide above
3. Choose appropriate aspect ratio (default 16:9 for diagrams)
4. Generate output path with timestamp: docs/<name>-$(date +%Y%m%d-%H%M).png
5. For whiteboard-style diagrams, use --input docs/whiteboard-background.png to draw on the consistent background: node scripts/generate-image.js "<prompt>" "<path>" --input docs/whiteboard-background.png -ar <ratio> For non-whiteboard images (thumbnails, photos, etc.), generate without --input: node scripts/generate-image.js "<prompt>" "<path>" -ar <ratio>
6. Read the generated image to verify quality
7. If the user wants it linked in docs, update the relevant .md file

Editing an Existing Image

1. Identify the source image to edit (use the most recent timestamped version)
2. Write a focused prompt describing only the change (not the whole image)
3. Generate a new output path with timestamp (never overwrite the source)
4. Run node scripts/generate-image.js "<edit prompt>" "<path>" --input <source-image>
5. Read the edited image to verify the change was applied
6. If unsatisfied, iterate with a more specific prompt