dancolta/gen-images-skill

---

What It Does

After building a website, this skill:

1. Scans the codebase for missing images, placeholder src values, and gray skeleton divs
2. Audits existing images for style consistency with the brand
3. Extracts the site’s visual identity (brand colors, fonts, UI style, tone) from Tailwind config, CSS variables, and copy
4. Builds per-slot image generation prompts using a structured formula: Subject + Art Style + Color Palette + Mood + Technical Specs + Negative Constraints
5. Generates on-brand images directly or outputs a prompt list for manual Gemini use

---

Two Modes

Run /gen-images with no argument to be prompted for which mode you want.

The skill also auto-triggers when you say things like “generate an image for the hero section” or “I need an image for the about page” — no explicit command needed.

---

4-Layer Pipeline

Layer 1 — Design Context Extraction
  → Reads tailwind.config, globals.css, layout.tsx, page copy
  → Builds a design_profile: colors, fonts, tone, UI style, existing images

Layer 2 — Image Slot Detection & Classification
  → Scans all .tsx/.jsx/.html/.vue/.svelte files
  → Detects: empty src, placeholder URLs, skeleton divs
  → Audits: existing images for style mismatches
  → Classifies each slot: type, aspect ratio, content hint, text overlay needs

Layer 3 — Prompt Construction
  → Builds per-slot prompts using brand-matched style directives
  → Embeds Style Anchor in every prompt for cross-session consistency
  → Applies conditional negative constraints (no text-in-image, no stock poses, etc.)

Layer 4 — Generate, Evaluate, Iterate (generate mode only)
  → Generates sequentially (style reference chain)
  → Evaluates against 6 quality criteria
  → Edits (not re-generates) for minor issues
  → Saves with descriptive filenames and updates source code

---

Consistency in Prompt Mode

When using prompt mode, the output includes a Style Anchor — a shared paragraph that describes the visual system across all images. It is embedded in every individual prompt.

Important: Generate all prompts in the same Gemini session. Generating in separate sessions without the Style Anchor will cause visual style drift and inconsistent results across images.

---

Installation

1. Install the skill

Copy the skill file to your Claude skills directory:

cp gen-images.md ~/.claude/skills/gen-images.md

Verify it appears in Claude Code:

/skills

2. Set up the Gemini MCP (required for generate mode)

The skill uses the nano-banana-2 MCP server for image generation via the Gemini API.

Step 1 — Get a Gemini API key

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click Create API key
4. Copy the key

Step 2 — Install the nano-banana-2 MCP server

npm install -g @nano-banana/mcp-server

Or with npx (no install needed):

npx @nano-banana/mcp-server

Step 3 — Configure Claude Code

Add the MCP server to your Claude Code configuration. Edit ~/.claude/claude_desktop_config.json:

{
  "mcpServers": {
    "nano-banana-2": {
      "command": "npx",
      "args": ["-y", "@nano-banana/mcp-server"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Replace your-api-key-here with the key from Step 1.

Step 4 — Verify configuration

Restart Claude Code, then run:

/gen-images generate

The skill runs a config check on startup. If the key is valid and the MCP is connected, it will proceed to scan your project. If not, it will tell you exactly what’s wrong.

---

Usage Examples

# Generate images for all missing slots in the current project
/gen-images generate

# Get optimized prompts to paste into Gemini manually
/gen-images prompt

# Auto-trigger — generate a specific image
"generate an image for the hero section"
"I need a background image for the pricing page"
"create a team photo placeholder for the about section"

---

Output

generate mode

## Image Generation Complete
Generated 4 of 5 images. 1 flagged for review.

| Slot          | File                          | Status  | Notes                    |
|---------------|-------------------------------|---------|--------------------------|
| hero-main     | /public/images/hero-main.png  | Done    |                          |
| feature-api   | /public/images/feature-api.png| Done    |                          |
| team-ceo      | /public/images/team-ceo.png   | Flagged | Skin tone after 2 passes |

Source files updated: Hero.tsx, FeatureCard.tsx, TeamSection.tsx

prompt mode

## Style Anchor
> All images in this set: flat vector illustration style with clean geometric
> shapes, anchored to deep navy (#1a1a2e) and warm amber (#e8a838) on white.
> Mood: confident, quietly modern, product-focused.

---
## Image Prompts

### 1. Hero Banner — `hero-main`
**File to create:** public/images/hero-main.png
**Prompt:** All images in this set: [style anchor]. A developer reviewing
analytics on a large monitor at a standing desk... [full prompt]

---

Requirements

• Claude Code CLI
• nano-banana-2 MCP server (for generate mode only)
• Gemini API key from Google AI Studio
• A web project with a recognizable visual identity (Tailwind, CSS variables, or similar)

---

Notes

• The skill never overwrites existing real images without your confirmation
• Files are always saved inside the project directory — never to ~/ or /Downloads/
• Images with text baked in are only generated if you explicitly request it
• If no brand styles are found, the skill asks before generating anything

---

Made by NodeSparks — custom AI tools & automations that replace the SaaS subscriptions eating your team’s time.