Get started

Codex CLI UI workflow

A visual UI editor for Codex CLI

Codex CLI is strong at terminal-driven code changes, but UI polish still needs a visual target it cannot see. Describing a spacing or alignment fix in words forces it to guess the selector, property, and amount.

Modify supplies the missing visual layer. You adjust the live page in Chrome; Modify exports a measured prompt; Codex CLI applies the exact change to your source.

Install free - give Codex CLI eyes

Free. No credit card required.

Read docs

Visual prompt handoff

Edit the page first.
Then prompt the AI.

Modify is designed for the last-mile UI changes that are obvious on screen but expensive to describe in chat.

Exported prompt includes

Target

Element selector and page context

Change

CSS property or visual operation

Before

Original value from the live page

After

Approved value after visual editing

Terminal agents cannot see the page

Codex CLI reads and writes files, but it renders nothing. When the problem is visual — a button slightly off, a heading that wraps wrong, a gap that feels tight — the fastest way to communicate it is to show the final state, not describe it.

Modify records that final state as a delta: selector, property, old value, new value, context. Codex CLI turns it into the right code edit without a guessing loop.

How Modify works with Codex CLI

  1. Step 1

    Open the page Codex CLI generated or changed in Chrome.

  2. Step 2

    Use Modify to make the visual adjustment on the real page.

  3. Step 3

    Export the structured prompt describing the exact UI delta.

  4. Step 4

    Paste it into your Codex CLI session so it can map the change back to the codebase.

Plain text, every agent

The prompt is plain structured text with no integration required, so the same workflow serves Codex CLI, Claude Code, Gemini CLI, opencode, and aider.

Because the delta is concrete, Codex CLI decides whether to write CSS, Tailwind, or component styles to match your project.

Tips for Codex CLI workflows

  • Group changes that belong to the same component into one prompt.
  • Point Codex CLI at the owning route or component when the repo is large.
  • Re-check the page after it applies the change; export a follow-up only if a visual issue remains.
  • Make responsive edits at the target breakpoint and note the viewport in your paste.

FAQ

Which terminal agents does Modify support?

All of them. Modify outputs plain structured text, so Codex CLI, Claude Code, Gemini CLI, opencode, and aider can consume it without integration work.

Why not paste a screenshot into Codex CLI?

Many terminal agents cannot take image input, and even when they can, a screenshot shows the problem but not the fix. Modify hands over the exact selector and target value.

Does Modify touch my codebase?

No. Modify works only in Chrome on the rendered page. Codex CLI applies the change; Modify supplies the visual intent.