A Claude Code skill that makes the images a page needs while Claude builds it. A Haiku helper writes the prompt, checks the picture, retries once, and saves it named and sized in your project. Free through Cloudflare Workers AI; ChatGPT Plus and Google AI Pro work too.
What you build
| Part | What it is | What it does |
|---|---|---|
| The brief | Claude writes a short order per image from what it knows about the project | Says what the image is for, the site style, and the shape of the slot it fills |
| The helper | A Haiku sub-agent, so pictures never enter the main conversation | Turns the brief into one English prompt in art-director order and asks for the image |
| The generator | Cloudflare Workers AI, FLUX.2 [klein] 4B by default; ChatGPT or Gemini in your own browser | Makes the picture at the size the slot needs, 1920 wide for a hero |
| The check | The helper looks at the picture before it is used | Rejects garbled text, bad hands, watermarks or the wrong subject, fixes the prompt, tries once more |
| The placement | Crop, resize, WebP, saved in public/images or the folder your framework serves | Names the file for what it shows and hands Claude the path and the alt text |
Where this comes from
Every site build hits the same wall. The page is done, the copy is in, and the hero is
a grey box. You leave Claude Code, open an image tool, write a prompt, download the
file, rename image_001.png, drag it into the right folder, and come back having lost
the thread. This skill closes that loop. Claude asks for the images while it builds,
and they land in the project already named, sized and checked.
What you build
The table above is the whole pipeline. Two things it cannot show.
First, the main conversation never looks at a picture. Each image read costs a large number of tokens and gets re-sent on every later turn, so a Haiku helper does the looking. Claude only gets back one line: the path and the alt text.
Second, the skill is allowed to fail out loud. If an image comes out wrong twice, it stops. It tells you what was asked, what went wrong both times, and where both attempts are saved. You decide whether to change the idea or make it by hand. It never quietly ships a bad picture.
What it deliberately does not do: logos as vector files, charts, diagrams, video, or editing a photo you already have. Words that belong on the page, like headlines, buttons and prices, go in HTML and CSS over the image, not inside it. They stay editable, search engines read them, and nothing comes out misspelled.
Do you need this? Be honest first
If you build sites or small apps with Claude Code and you are tired of grey boxes and stock photos, yes.
If your client sends their own photography, or you need a brand illustration with a specific look, close the tab. Use the real photos, or hire the illustrator. AI images are good placeholders and often good finals, but you check every one before it goes live.
What you need
- The machine. Windows, macOS or Linux with Node 18 or newer.
- The accounts. Claude Code. A free Cloudflare account for the default image maker. ChatGPT Plus or Google AI Pro only if you want to use them. Both are optional.
- The time. Five minutes to install. About ten minutes, once, to create the Cloudflare token. The setup guide in the repo walks through every click.
What is on GitHub
site-images-skill/
README.md install, setup, the image makers, troubleshooting
DISCLAIMER.md as is, no warranty, use at your own risk
LICENSE MIT
skill/
SKILL.md what Claude follows while it builds
references/ the helper's instructions and the Cloudflare setup guide
scripts/ the small Node tool the helper runs
tests/ 74 automatic checks
Install is copying the skill folder into ~/.claude/skills/site-images and running
npm install inside it. Setup runs in your own terminal: it asks for the Cloudflare
token with hidden typing, so the token never goes into the chat. Your keys and browser
logins stay in a .site-images folder in your user folder, never in the skill and
never in your project.
What was verified and what was not
Verified on one Windows 11 machine with Node 26 on 2026-11-10:
- Cloudflare: four helpers at once made a 1920x1080 hero and three 800x600 cards for a test coffee-shop page. Two needed the second attempt, and the helper fixed the prompt on its own. The free allowance works out to about 30 full-size heroes a day, more for smaller images.
- ChatGPT Plus: a 4:3 card through a logged-in session, checked by the helper.
- Gemini with Google AI Pro: a 4:3 card the same way.
- The failure path: a helper rejected two bad images, stopped and reported both attempts, and saved nothing to the page.
Not verified yet: a fresh machine from zero, and macOS. ChatGPT and Gemini work by driving your own logged-in browser in a window kept off-screen. When those sites change their pages, that part breaks until the skill is updated. Automating them is a grey area under their terms of use. Cloudflare is the stable path.
Read the instructions before you run them
Open SKILL.md and references/worker.md and ask Claude what the skill will do on your
machine before you install it. It runs commands, writes files into your project and,
when ChatGPT or Gemini are set up, opens a browser with your account. Two minutes of
reading tells you exactly what it touches.
Created by Hector Diaz, founder of Orbix Automation Solutions.
Want the systems behind skills like this one?
The skills are free. The build packs, the prompt library and the classroom are where they come from: complete systems you build with Claude Code on your own machine, and live classes where Hector builds them in the open, mistakes included.
