Two Claude Code skills that generate images by driving a logged-in browser session over the Chrome DevTools Protocol — no OpenAI or Google API key, no per-image billing.
| Skill | What it does |
|---|---|
chatgpt-image |
Prompts ChatGPT, waits for the image, downloads the PNG. |
gemini-image |
Same shape against Google Gemini — a drop-in fallback when the ChatGPT quota is exhausted. |
Both ship a slice-sprites.py chroma-key slicer that cuts individual
transparent sprites out of a generated sheet, which makes them useful for game
assets rather than just one-off pictures.
The CDP plumbing is not mine: these skills drive the browser-harness-js CLI
from monotykamary/browser-harness-js,
which exposes every CDP method as a typed JS call over one persistent
connection. That project is a prerequisite, installed separately — see step 1.
npx skills add https://github.com/monotykamary/browser-harness-js
bash ~/.claude/skills/cdp/scripts/setup # symlinks the CLI onto your PATH
browser-harness-js --versionThis installs the cdp skill and puts browser-harness-js on your PATH.
It needs Node 23.6+ — the harness is TypeScript run through Node's built-in
type stripping, which is only on by default from that version.
/plugin marketplace add thminhVN/claude-image-skills
/plugin install browser-image-gen@thminh-skills
open -na "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir="$HOME/.chrome-cdp"CDP only exists if Chrome was launched with that flag — you cannot attach to
an already-running normal Chrome, and Chrome 136+ refuses the flag on the
default profile, so the separate --user-data-dir is mandatory.
Because that profile is separate from your everyday one, sign in to ChatGPT and/or Gemini inside it once. That login is what replaces the API key. It is a one-time step; the profile persists.
bash ~/.claude/plugins/cache/thminh-skills/browser-image-gen/*/scripts/setup.shThe script checks Node, the harness, the CDP port, and the slicer's Python
dependencies, and prints the exact command to fix anything missing. Pass
--fix to have it apply the fixes it can automate (symlinking the harness,
installing numpy + Pillow).
Then just ask for art — "generate a pixel-art farm background and save it to
assets/" — and Claude picks the skill up automatically.
| Why | |
|---|---|
| Node 23.6+ | browser-harness-js relies on Node's built-in TypeScript type stripping. |
browser-harness-js on PATH |
The CDP bridge. From monotykamary/browser-harness-js; override the lookup with HARNESS_BIN. |
Chrome with --remote-debugging-port |
CDP is only exposed by a browser launched with the flag, on a non-default profile. |
| A ChatGPT / Gemini login in that profile | Replaces the API key. |
Python 3 + numpy + Pillow |
Only for slice-sprites.py. Image generation works without it. |
"browser-harness-js was not found" — step 1 was skipped, or the CLI is not on
PATH. The scripts look on PATH, then ~/.local/bin, then any installed cdp
skill. Point HARNESS_BIN at the binary if it lives somewhere unusual.
"Could not reach a browser on CDP port 9222" — Chrome is not running with the
debug flag. Re-run step 3; confirm with curl -s localhost:9222/json/version.
A normally-opened Chrome will not work no matter how long it has been running.
"Not logged in" — you are signed in on your everyday profile, not the
--user-data-dir one. Log in inside the debug window.
Wrong browser attaches — the harness is always passed { port: 9222 }
explicitly, because auto-detect picks whichever debuggable browser it finds
first (Postman also listens on a debug port). Change the port with CDP_PORT.
- Nothing here bypasses paywalls or rate limits — it drives the same web UI you are already entitled to use, under whatever quota your account has.
- The scripts are project-independent; Claude calls them by absolute path from any working directory.
MIT — see LICENSE. browser-harness-js is a separate project with
its own license.