dancolta

Gen Images Skill — Development skill for Claude Code

Development community

Context-aware image generation skill for Claude Code — analyzes website brand identity and generates on-brand images via Gemini MCP.

How to install Gen Images Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open dancolta/gen-images-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Gen Images Skill does

Context-aware image generation skill for Claude Code — analyzes website brand identity and generates on-brand images via Gemini MCP.

Alternatives in Development

Imagegen — Generate and edit images using OpenAI's Image API for projects 14.6k ★
Media — Understand an audio / video / image file — Antigravity (agy/Gemini) transcribes and analyzes it, returning a t 284 ★
Nano Banana Image Generation — Generate professional images via the Gemini CLI's nanobanana extension 261 ★

README

gen-images

Context-Aware Website Image Generation Skill for Claude Code

A Claude Code skill that detects missing or placeholder images in a website project,
analyzes the site's visual identity, and generates on-brand images via the Gemini image generation MCP.
Every image is tailored to match the site's colors, typography, layout, and brand tone — not generic stock-photo filler.

What It Does

After building a website, this skill:

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

Two Modes

Mode	Command	What it does
generate	`/gen-images generate`	Full automated pipeline — generates images via MCP and updates source files
prompt	`/gen-images prompt`	Outputs optimized prompts + Style Anchor for manual use in Gemini

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: