Image to Code

tutorialintermediate6 min readVerified Mar 8, 2026

Turn screenshots, wireframes, and design mockups into working UI code using Codex's multimodal image input capabilities.

codeximage-to-codefrontenduifigmadesign

Image to Code

Codex accepts images alongside text prompts, enabling you to turn screenshots, wireframes, and design mockups into working code. This is one of Codex's most powerful features for frontend development and UI prototyping.

How It Works#

Codex uses vision-enabled models (GPT-5.4, GPT-5.3-Codex) to understand images. You provide a screenshot or design file, describe what you want, and Codex generates the corresponding code.

Method 1: CLI with --image Flag#

The --image (or -i) flag attaches one or more images to your prompt:

# Single image
codex "Build a dashboard that looks like this" --image ./mockup.png

# Multiple images
codex "Create a responsive layout matching these designs" \
  --image mobile.png,desktop.png

# Or use repeated flags
codex "Build this UI" --image header.png --image sidebar.png

Supported Formats#

  • PNG (recommended for UI mockups — lossless compression, transparency)
  • JPEG (good for photographs, smaller file size)
  • GIF and WebP also supported
Tip

For UI mockups and screenshots, use PNG files under 2MB for best results. PNG preserves the sharp edges and text that Codex needs to accurately reproduce layouts.

## Method 2: Codex App (Drag and Drop)

In the desktop app, simply drag and drop images into the chat, or paste them from your clipboard:

  1. Open a project in the Codex app
  2. Drag your mockup into the chat input
  3. Add a text prompt describing the implementation

Method 3: Figma Integration#

Connect Codex to Figma via MCP for a bidirectional design-to-code workflow:

From Figma to Code#

# Add to ~/.codex/config.toml
[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"

Then prompt Codex to pull design context:

"Get the design context from the Figma file and build the settings page
using React and Tailwind. Match spacing, typography, and colors exactly."

The Figma MCP server extracts layouts, styles, and component information and passes them to Codex.

From Code to Figma#

The generate_figma_design tool can turn a running interface into editable Figma frames, bringing functioning UI directly onto the canvas.

Writing Effective Prompts#

The image provides visual requirements, but you still need to specify:

  1. Framework and tech stack — React, Vue, Svelte, Tailwind, etc.
  2. Interactive behavior — Hover states, animations, validation logic
  3. Non-visual details — API connections, state management, routing

Example Prompt#

Create a settings page based on this screenshot.

Constraints:
- Use React with TypeScript
- Style with Tailwind CSS
- Match spacing, typography, and layout as closely as possible
- Add form validation for email and password fields
- Include a save button that shows a loading state

Deliverables:
- A new route/page component
- Any small sub-components needed
- Types for the form data

Real-World Results#

From community testing, Codex typically achieves ~90% visual accuracy from a single screenshot. The remaining 10% usually involves:

  • Fine-tuning spacing and padding values
  • Adjusting font weights and sizes
  • Adding interactive states not visible in the screenshot
Info

For best results, provide multiple images showing different states (default, hover, error, loading) and describe the transitions between them in text.

## Cloud Preview

When running in Codex Cloud on frontend tasks, GPT-5-Codex can display screenshots of the generated UI for review. This lets you iterate on designs without checking out the branch locally.

Next Steps#

PreviousCLI SetupNextAGENTS.md Guide