skill CX Codex

image-generation · zc277584121 — Claude Code skill: what it does, install

Q: How do I install image-generation in Claude Code?

Run `npx skills add zc277584121/marketing-skills --skill image-generation -a claude-code`. The skill file will be placed at `~/.claude/skills/image-generation/SKILL.md`.

Q: Which API keys does image-generation use?

The script tries `OPENAI_API_KEY` first and uses `GEMINI_API_KEY` if the OpenAI route fails or is unavailable. Codex’s built-in route does not require `OPENAI_API_KEY`.

This skill creates illustrations, diagrams, and other visuals for articles and docs. It chooses between Codex, OpenAI API, and Gemini paths.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add zc277584121/marketing-skills --skill image-generation -a claude-code

Open on GitHub

What image-generation does

The skill creates raster visuals for blog posts, technical writing, and documentation. Ask for a concept illustration, an architecture diagram, or a visual explanation of a workflow. In Codex, the built-in route is the best first option because it does not need OPENAI_API_KEY when image_gen is available.

Outside Codex, the skill runs scripts/generate_image.py. With auto, the script tries OpenAI through OPENAI_API_KEY, then switches to Gemini with GEMINI_API_KEY if the first route cannot generate the image. You can set the provider, model, aspect ratio, image size, and style prefix. The script defaults to English prompts, a 16:9 ratio, 1K output, and a clean minimalist style.

API generation requires the matching provider key. The Codex route depends on access to the built-in image_gen; when that tool is unavailable, the workflow falls back to the script and checks the provider credentials.

What it helps with

create an illustration for an article
draw an architecture diagram
prepare a visual for documentation
switch generation from OpenAI to Gemini
set an image ratio and size

Example prompts for the agent

Create an illustration for the article about vector search and save it as images/vector-search.png.
Draw a system architecture diagram with arrows showing data flow and use a 16:9 canvas.
Generate the image through an API at 2K size, using a clean technical illustration style.

How to install image-generation

1Skills CLI (Vercel)

npx skills add zc277584121/marketing-skills --skill image-generation -a claude-code

2Manually: put the files in place

~/.claude/skills/image-generation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/image-generation/

1Skills CLI (Vercel)

npx skills add zc277584121/marketing-skills --skill image-generation -a codex

2Manually: put the files in place

.agents/skills/image-generation/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add zc277584121/marketing-skills --skill image-generation -a cursor

2Manually: put the files in place

.cursor/skills/image-generation/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install zc277584121/marketing-skills image-generation

2Manually: put the files in place

.github/skills/image-generation/SKILL.md

1Skills CLI (Vercel)

npx skills add zc277584121/marketing-skills --skill image-generation -a gemini-cli

2Platform CLI

gemini skills install https://github.com/zc277584121/marketing-skills --path skills/image-generation

Manually: put the files in place

.devin/skills/image-generation/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add zc277584121/marketing-skills --skill image-generation -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about image-generation

How do I install image-generation in Claude Code?

Run npx skills add zc277584121/marketing-skills --skill image-generation -a claude-code. The skill file will be placed at ~/.claude/skills/image-generation/SKILL.md.

What does image-generation do?

It creates illustrations, diagrams, and other raster visuals for articles and documentation. The workflow can use Codex’s built-in route, OpenAI API, or Gemini.

Which API keys does image-generation use?

The script tries OPENAI_API_KEY first and uses GEMINI_API_KEY if the OpenAI route fails or is unavailable. Codex’s built-in route does not require OPENAI_API_KEY.

Similar skills

Everything for Design →

image-generation by other authors comes first.

image-generation bytedance Builds structured JSON prompts and executes a Python script to generate images with optional reference files. Useful for character design and complex scene rendering. CX Codex +1 2,900installs image-generation claude-office-skills Turns a rough visual idea into a working prompt for DALL-E, Midjourney or Stable Diffusion, shaped for the tool you actually use. CX Codex +1 5,600installs image-generation PostPlusAI Sorts an image request into a task class, picks the model and reference rules, then hands a ready brief to the runner. CX Codex +1 703installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set9

remove-ai-style Rewrites English or Chinese prose to drop formulaic phrasing, stray dashes and exclamation marks. Useful before you publish an article or a doc. CX Codex +1 4,200installs browser-screenshot Captures one block of a page — a post, a tweet, a chart, a section of an article — instead of a full-page dump. Useful when you need a clean illustration. CX Codex +1 4,100installs chrome-automation Controls an active Chrome window via the agent-browser CLI. Useful for extracting web data, filling forms, and replaying DevTools recordings while keeping active login sessions intact. CX Codex +1 4,000installs content-rewrite Turns one article or announcement into versions for LinkedIn, X, Reddit, an English blog and WeChat. Useful when the same material has to go out in several places. CX Codex +1 4,000installs video-to-gif Turns one video into several GIFs at different settings and drops them in a folder, so you pick the one that looks right. CX Codex +1 3,900installs raw-video-processing Cleans up raw screen recordings by cutting silent pauses and speeding up the footage. Useful before publishing demos or tutorials. CX Codex +1 3,900installs github-traffic Pulls traffic metrics, visitor referrers, and clone counts from GitHub. Stores snapshots locally and generates trend charts. CX Codex +1 3,800installs screenshot-compression Shrinks PNG and JPEG screenshots without converting their format. Use it before adding images to documentation or committing them to a repository. CX Codex +1 3,800installs