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): ```bash 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: ```bash 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: ```bash 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.