| name | changelog-image |
| description | Generate the illustration for an argos-ci.com changelog entry with OpenAI gpt-image-2, painting on the official pastel background. Use whenever a changelog entry needs its image. |
Generating a changelog image
Changelog illustrations share one visual system: the official pastel gradient background with a flat, softly-3D product illustration painted on top. The image is generated by gpt-image-2 via the OpenAI images/edits endpoint, using the background as the base image so every entry sits on the exact same gradient.
Inputs
- Background:
images/changelog-background.jpg (3246×1800, ratio ≈ 1.80). Never commit a changelog image that isn't derived from it.
- API key:
ARGOS_OPENAI_API_KEY, exported in ~/.zshrc. It is NOT available in non-interactive shells — source ~/.zshrc before calling the API.
- Output size:
1728x960 — same 1.8 ratio as the background, both dimensions divisible by 16 (a gpt-image-2 requirement), and in line with existing assets (~1680×935).
Steps
- Resize the background to the output size (input and output must match so the gradient isn't distorted):
magick images/changelog-background.jpg -resize 1728x960! /tmp/changelog-bg-input.png
- Write the prompt (see style guide below), then call the edits endpoint. Generation takes 1–2 minutes:
source ~/.zshrc
curl -s https://api.openai.com/v1/images/edits \
-H "Authorization: Bearer $ARGOS_OPENAI_API_KEY" \
-F model=gpt-image-2 \
-F image=@/tmp/changelog-bg-input.png \
-F size=1728x960 \
-F quality=high \
-F output_format=jpeg \
-F "prompt=$(cat /tmp/changelog-image-prompt.txt)" \
| python3 -c "import json,sys,base64; open('/tmp/changelog-out.jpg','wb').write(base64.b64decode(json.load(sys.stdin)['data'][0]['b64_json']))"
-
Review it: downscale a preview (sips -Z 700 …) and Read it. Check: background gradient preserved, style matches existing entries, no garbled text, concept legible at thumbnail size. Iterate on the prompt if not.
-
Install it:
mkdir -p public/assets/changelogs/<slug>
cp /tmp/changelog-out.jpg public/assets/changelogs/<slug>/<slug>.jpg
Prompt style guide
Look at 1–2 recent images in public/assets/changelogs/ (e.g. vitest-sdk, analytics-revamp) before writing the prompt, then follow this template:
Keep the soft pastel gradient background exactly as provided — do not change its colors or add texture. On top of it, paint a clean flat vector product illustration in the established Argos changelog style: white rounded-corner UI window cards floating with subtle soft drop shadows, abstract grey placeholder bars instead of readable text, accents in purple (#8b5cf6 range), pink and green. [CONCEPT — describe the feature-specific scene here.] Generous margins on all sides, composition centered, no photographic elements, no readable text anywhere.
Concept guidance:
- Depict the feature as an abstract product scene: UI windows, terminals, cards, connecting lines — not metaphors like rockets or lightbulbs.
- Screenshot-diff imagery = side-by-side cards with pink dashed highlighted regions; approvals = green check circles; terminals = dark or white window with a
> prompt and grey bars.
- Flows and integrations read well as a left-to-right composition with a glowing connector between two elements.
- No readable text in the image — gpt-image-2 text is a garbling risk, and the house style uses placeholder bars anyway. Well-known logos are the only exception, and only when essential.
