autoimage-claude

Auto-generate brand-aligned images for frontend projects, directly from Claude Code. A plugin marketplace by Desima-AP.

Stop hand-crafting prompts for every missing <img> and CSS background-image. This plugin watches your frontend code as you edit, catches placeholder URLs, empty src="", broken local imports, and TODO comments about images, then — when you ask — generates real, on-brand assets, post-processes them to exact target dimensions, and wires them into the source files.

Works with JSX, TSX, HTML, CSS, SCSS, Vue, Svelte, Astro, MDX. Picks palette and mood from tailwind.config.* / package.json / README.md / your main layout automatically.

The banner above was generated by this plugin, calling the autoimage pipeline against an empty project — one prompt, one provider (gpt-image-1.5, auto-fallback from gpt-image-2 while org verification is pending), post-processed to 1920×1080 and a 1280×640 social-preview variant. $0.025 round-trip.

Install

/plugin marketplace add github:Desima-AP/autoimage-claude
/plugin install autoimage@desima-plugins

Then restart or /reload-plugins. Confirm with /help — you should see autoimage:auto-image among the skills and the three slash commands below.

Requirements

• Python ≥ 3.9 with Pillow (pip install Pillow)
• At least one API key: OPENAI_API_KEY and/or GEMINI_API_KEY (both is best). See how to get them.
• Optional: rembg for transparent-PNG output when using Gemini (OpenAI does it natively).

Verify setup:

python3 ~/.claude/plugins/cache/desima-plugins/autoimage/<version>/scripts/setup.py

What it does

Once installed, you work normally. The plugin runs in two modes:

Background (automatic, scan-only). Every time you Edit / Write / MultiEdit a frontend file, a PostToolUse hook scans it for:

• empty src="", src='', src={""}
• known placeholder services — picsum.photos, via.placeholder.com, placehold.co, dummyimage.com, placekitten, source.unsplash.com, loremflickr, fakeimg.pl, etc.
• local paths that don't resolve on disk (./missing.png, /images/not-there.webp)
• ES imports of missing image files
• TODO / FIXME comments mentioning an image

Findings land in .claude/pending-assets.json. No API calls. No surprise billing. No workflow interruption.

Foreground (on-demand, generate). Say one of these and the skill kicks in:

"dobierz obrazy do strony" "przygotuj brakujące obrazy" "fill the missing images" "generate the placeholders" "make images that match the brand" "prepare assets for this page"

Claude then:

1. Refreshes the brand preset (palette, mood, typography, tone — detected from your project files).
2. Picks the image provider per user-driven rules (see Provider choice).
3. Crafts a 5-component prompt per asset using your palette and mood.
4. Calls the provider, resizes/crops to exact target dimensions, writes PNG + WebP.
5. Patches the source files to reference the new assets.
6. Logs every row to .claude/generation-log.csv.

Provider choice — user-driven, one per batch

Both providers can generate every asset type. The plugin never silently splits a batch between OpenAI and Gemini — mixing two models within one project causes inconsistent aesthetics, which is something you should opt into explicitly.

Resolution order:

1. Explicit request in the current message — "use Gemini for these", "w OpenAI", or --provider openai|gemini on the CLI.
2. Project preset — .claude/brand-preset.json → preferred_provider ("openai" / "gemini" / null).
3. Single-key auto — if only one of OPENAI_API_KEY / GEMINI_API_KEY is set, use that.
4. Both keys, no preference — the skill asks you once and optionally saves the answer as the project default.

Informational warnings still surface (e.g. "this asset has readable text; gpt-image-2 renders baked-in text more reliably"), but they never override your choice.

Quick provider strength guide

Slash commands

• /design-scan — full project audit of missing assets, summary, optional batch generation.
• /design-regen <name_or_regex> [extra guidance] — force-regenerate a specific asset (overwrites existing file).
• /design-brand [show|detect|reset|provider <openai|gemini|null>] — interactive editor for .claude/brand-preset.json, including preferred_provider.

API keys

OpenAI (gpt-image-2, with automatic fallback)

1. Sign up at platform.openai.com.
2. Add billing — $5 minimum — at billing settings.
3. Create a key at api-keys. Copy it — it's shown only once.
4. (Optional, unlocks the flagship model) Verify your organization at organization settings — OpenAI requires a one-time Stripe Identity check before new keys can call gpt-image-2. Propagates in ~15 minutes.

Without verification, the plugin automatically falls back to gpt-image-1.5, then gpt-image-1 — same request schema, same post-processing, slightly different rendering style. The log records which model actually produced each image.

Cost: $0.019 per 1024² high-quality image on gpt-image-2; gpt-image-1.5 has the same pricing; gpt-image-1 is roughly 2× more expensive.

Google Gemini (gemini-3.1-flash-image-preview)

1. Open aistudio.google.com, sign in with Google.
2. Click Get API key → Create API key.
3. No billing required on free tier (a few RPM / several hundred RPD).

Cost beyond free tier: $0.039 per image.

Where to put the keys

The plugin reads, in this order:

1. Process environment (export OPENAI_API_KEY=...).
2. .env in the current project directory.

# in your project root
cat >> .env <<EOF
OPENAI_API_KEY=sk-proj-...
GEMINI_API_KEY=AIzaSy...
EOF
echo ".env" >> .gitignore

State files (written to $CLAUDE_PROJECT_DIR/.claude/)

Target dimension map (driven by naming)

Plugins in this marketplace

More plugins from Desima-AP will land here over time — autocopy-claude, autoseo-claude, and friends are in the queue.

Local development

git clone [email protected]:Desima-AP/autoimage-claude.git
cd autoimage-claude
claude --plugin-dir ./plugins/autoimage

Run the test suite:

cd plugins/autoimage
python3 -m unittest discover -s tests

Environment check:

python3 plugins/autoimage/scripts/setup.py

Contributing

Issues and pull requests welcome. For a meaningful change, please open an issue first — especially for model additions, new hint types, or output-convention changes.

License

MIT — see LICENSE. Built for Claude Code by Desima-AP.