Changelog 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

1. 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

2. 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']))"

3. 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.

4. 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.