From gen-image
Generate project images — mascot logos, README banners (dark/light variants), GitHub social-preview cards, and arbitrary illustrations — via the OpenAI Images API, compressed locally to under 1 MiB. Use when asked to generate a logo, mascot, banner, hero image, social card, brand images, or any illustration for a repo, docs site, or profile; also invoked by repo-bootstrap and gh-profile for their image phases.
How this skill is triggered — by the user, by Claude, or both
Slash command
/gen-image:gen-imageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate brand and illustration images through one CLI; all post-processing
Generate brand and illustration images through one CLI; all post-processing (center-crops, format choice, <1 MiB compression) happens locally. The whole skill is driven by a single command:
GENIMAGE="uv run ${CLAUDE_PLUGIN_ROOT}/skills/gen-image/scripts/genimage.py"
$GENIMAGE generate | logo | banner | brand [flags]
Every subcommand needs OPENAI_API_KEY. Resolve it in order:
export OPENAI_API_KEY=$(op read "op://OpenClaw/OpenAI API Key/notesPlain")The script never prompts; without a key it dies with
ERROR: OPENAI_API_KEY is not set.
No key at all? Use the codex skill's "Generating Images ($imagegen)"
workflow instead — it needs codex signed in with a ChatGPT plan, no API key.
You still own placement, naming, and the compression conventions below
(codex's output is raw; run it through sips/Pillow per that skill's notes).
Exit criteria: OPENAI_API_KEY exported, or the codex fallback chosen.
generate — raw primitive (any prompt, any supported size)$GENIMAGE generate --prompt "..." --size 1536x1024 \
[--transparent] [--edit-from IMG] [--quality low|medium|high|auto] --out PATH
--edit-from IMG switches to the edits
endpoint with IMG as the input image — use it to keep a character or
palette consistent across related images.--transparent forces gpt-image-1.5 (gpt-image-2 rejects transparent
backgrounds); it cannot combine with --edit-from.--out extension picks the encoding: .png is written as returned;
.webp/.jpg are re-encoded under 1 MiB.logo — mascot preset$GENIMAGE logo --name PROJECT --concept "robot pup" --out assets/logo.png
Square 1024x1024 transparent mascot, quantized to a 256-color PNG under 1 MiB. Pick a concept that puns on the project's name or purpose (a crab for a fleet tool, an octopus for an orchestrator).
banner — README banner preset$GENIMAGE banner --name PROJECT --tagline "..." \
[--logo assets/logo.png] [--variant dark|light|both] [--height 512] \
[--quality low|medium|high|auto] --out-dir assets
Renders a 1536x1024 source per variant, center-crops the middle
1536xheight band, writes WEBP under 1 MiB:
--variant | Files written | Look |
|---|---|---|
dark (default) | banner-dark.webp | near-#0d1117 background, white type |
light | banner-light.webp | near-#ffffff background, dark type |
both | both files | pair in a <picture> block via prefers-color-scheme |
With --logo, composition goes through the edits endpoint so the banner's
mascot matches the logo; without it, the banner gets a generic flat motif.
brand — full pipeline (logo + banner + social card)$GENIMAGE brand --name PROJECT --tagline "..." --concept "robot pup" --out-dir docs/assets
Writes exactly three files into --out-dir: logo.png (transparent mascot),
readme-banner.webp (1536x512), and social-preview.jpg (1536x768 — GitHub's
social-preview upload accepts only PNG/JPG/GIF under 1 MB). The mascot is
generated first, then a banner source is composed from it via the edits
endpoint so the character matches, then center-cropped twice. On re-runs,
--from-logo reuses the existing logo.png (re-encoding it in place if over
1 MiB) and regenerates only banner + social card — --concept not needed.
Exit criteria: the command exited 0 and printed every output path.
View every output with Read (it renders images) and judge: is the mascot
on concept? Is the in-image name/tagline text exactly right? Is the
composition centered? On a miss, re-run with a refined --concept/--prompt;
wrong text usually fixes itself on a regeneration (accuracy varies per
attempt — always quote the exact strings in the prompt). Never ship an image
you haven't looked at.
Exit criteria: every generated file viewed and on-spec.
--edit-from /
--logo — so the character and palette stay consistent.repo-bootstrap and gh-profile invoke this skill instead of bundling image code. Exact invocations and the files that come back:
| Caller | Invocation | Files written |
|---|---|---|
| repo-bootstrap (brand images) | $GENIMAGE brand --name N --tagline "T" --concept "C" --out-dir docs/assets | docs/assets/logo.png, docs/assets/readme-banner.webp, docs/assets/social-preview.jpg |
| repo-bootstrap (re-run) | $GENIMAGE brand --name N --tagline "T" --from-logo --out-dir docs/assets | banner + social regenerated; existing logo reused |
| gh-profile (hero banner) | $GENIMAGE banner --name LOGIN --tagline "T" --variant both --out-dir assets | assets/banner-dark.webp, assets/banner-light.webp |
These filenames are a contract — callers reference them in READMEs and verify steps. Never rename the outputs.
ERROR: OPENAI_API_KEY is not set: walk the key chain in step 1; the
script intentionally never prompts.
Images API returned 4xx: 401 — bad or expired key; 400 mentioning size —
use a supported size and crop locally; 429 — the env key may be billing-capped;
prefer the 1Password key over a stale env var.
quantized logo is N bytes, still >= 1 MiB: the mascot came out
photographic or noisy — regenerate with "flat illustration, bold clean shapes"
wording in the concept.
could not encode ... under 1 MiB: same cause for banners — regenerate
with a flatter, less textured prompt.
Wrong text in the image: quote the exact name/tagline strings in the prompt and regenerate; text accuracy varies per generation.
uv: command not found: install uv (https://docs.astral.sh/uv/) — the
script declares its own dependencies inline, so uv is the only prerequisite.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub yasyf/cc-skills --plugin gen-image