UI Prototyping

tutorialintermediate7 min readVerified Mar 8, 2026

Turn screenshots and wireframes into production-ready React/Tailwind code using Codex's image-to-code workflow.

codexuiprototypingfrontendreacttailwindworkflow

UI Prototyping

This workflow takes you from a design mockup to working, styled UI code using Codex's image understanding capabilities. It works with any frontend framework, but the examples here use React and Tailwind CSS.

What You Need#

  • A design mockup (screenshot, wireframe, Figma export, or hand-drawn sketch)
  • A project with your preferred framework set up (React, Vue, Svelte, etc.)
  • Codex CLI, IDE extension, or desktop app

Step 1: Prepare Your Design#

Save your design file locally. Supported formats: PNG (recommended), JPEG, GIF, WebP.

Tip

PNG files under 2MB work best. For multi-page designs, save each page as a separate image. For responsive designs, capture both mobile and desktop views.

## Step 2: Generate the Initial UI 
codex "Create a new settings page based on this screenshot.

Tech stack:
- React with TypeScript
- Tailwind CSS for styling
- Use existing component patterns from the project

Requirements:
- Match the layout, spacing, and typography as closely as possible
- Make it responsive (mobile-first)
- Use semantic HTML elements
- Include proper form validation for input fields

Deliverables:
- A new page component at src/pages/Settings.tsx
- Any sub-components needed in src/components/
- TypeScript types for form data" --image ./designs/settings-page.png

Step 3: Review and Refine#

After Codex generates the initial code:

  1. Check the diff with /review or the review pane
  2. Run the dev server and compare visually with the mockup
  3. Request adjustments:
codex "The settings page looks good but needs these adjustments:
1. The sidebar should be 280px wide, not full-width
2. Add a subtle border between the sidebar and content area
3. The save button should be fixed to the bottom of the page
4. Add hover states to all clickable elements"

Step 4: Add Interactive Behavior#

Once the visual layout matches, add the behavior:

codex "Add interactive behavior to the settings page:
1. Form state management with React Hook Form
2. Validation: email must be valid, password must be 8+ characters
3. Save button shows a loading spinner during API call
4. Success/error toast notifications after save
5. Unsaved changes warning when navigating away"

Step 5: Add Responsive Design#

If your initial prompt did not cover mobile:

codex "Make the settings page responsive:
- On mobile (< 768px): sidebar collapses to a hamburger menu
- On tablet (768-1024px): sidebar is a slide-out drawer
- On desktop (> 1024px): sidebar is always visible
Match the mobile mockup" --image ./designs/settings-mobile.png

Using Figma Integration#

For a more integrated workflow, connect Figma via MCP:

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

Then pull designs directly:

codex "Get the design context from the Figma file for the Settings page.
Build the page using React and Tailwind, matching the design system
colors, typography, and spacing exactly."

The Figma MCP server provides:

  • Layout information
  • Design tokens (colors, spacing, typography)
  • Component structure
  • Asset URLs

Cloud Preview#

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

Results and Expectations#

From community testing, a typical image-to-code workflow produces:

| Aspect | First Pass Accuracy | |--------|-------------------| | Layout structure | ~95% | | Spacing and padding | ~85% | | Typography | ~80% | | Colors | ~90% | | Interactive states | Needs text prompts |

Info

The first pass typically gets you 85-90% of the way there. Plan 2-3 refinement iterations to reach production quality. This is still significantly faster than building from scratch.

## Tips for Best Results
  1. Specify your framework first — Codex generates better code when it knows your stack
  2. Describe non-visual behavior — Hover states, animations, and validation cannot be inferred from a static image
  3. Use multiple images — Provide desktop + mobile + hover/active states
  4. Reference existing components — "Use the same button style as the login page" helps Codex maintain consistency
  5. Start with layout, then add details — Get the structure right before fine-tuning spacing

Next Steps#

PreviousSafety ModesNextCodex Models