4.2 Vision: From Screenshot to Shipped

Describing a UI in words is lossy in a way that most people don't notice until they see the gap. "A card with the title on top and a button in the bottom right" leaves out spacing, alignment, exact colors, and a dozen small decisions a designer actually made on purpose. Codex's vision capability closes that gap by letting you hand it the actual picture instead of a description of the picture.

Attach a screenshot, a Figma export, or a technical diagram directly to a Codex session, and it can read UI surfaces, charts, and design mockups the same way it reads code — translating a design screenshot into a working component instead of you manually measuring pixel gaps and guessing at hex codes. This is a meaningfully faster loop than the old pattern of "describe the design in a paragraph, get something close, iterate by describing the differences in more words." You can iterate visually instead: share an updated screenshot, point out what's still off, and Codex adjusts against the actual image rather than a verbal description of it.

The same capability runs the other direction too — attach a screenshot of a bug (a broken layout, an error state, a chart rendering wrong) instead of describing what you're seeing, and Codex diagnoses against the actual visual evidence. For anyone doing frontend work specifically, this closes a gap that used to require constant back-and-forth translation between "what the design shows" and "what you can type in a chat box."