image-first-ui

The picked image is the source of truth for layout, hierarchy, density, palette, type character, and component shapes. The brief is the source of truth for copy, data, and behavior: generated text and numbers can be wrong or invented, so never copy them from the image.

Self-contained: <skill> below is this file's directory. Requires a logged-in codex CLI on a ChatGPT plan with image generation (codex login) and python3 with Pillow. If image generation fails, report the layer by exit code (table below); do not substitute HTML mockups or another image model without asking.

Work directory: <project>/.image-first/<surface>/ (absolute paths everywhere; gen.sh requires them).

brief.md            job, read order, scene, direction, signature move, real content, stack
prompts/{A,B,C}.txt the exact prompt each option received
options/{A,B,C}.png generated options
board.html          picker board
reference.png       locked pick (never edited)
reference.json      {option, prompt, approved: true, date, notes}
spec.md             measured spec built from reference.png
compare.html        reference vs build screenshot