Get started

Gemini CLI UI workflow

A visual UI editor for Gemini CLI

Gemini CLI is fast at reading and writing frontend code from the terminal — but it has no eyes. It cannot see the page your code renders, so UI polish means describing pixels in prose.

Modify is the browser-side companion. You make the UI change visually in Chrome; Modify converts it into a structured prompt; Gemini CLI applies it to source with exact values.

Install free - give Gemini 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

The blind spot in terminal-first frontend work

When Gemini CLI builds UI, verifying the result means switching to the browser — but feeding what you see back into the terminal means describing it in words. "The card is too wide and the button should sit closer to the edge" forces the agent to guess numbers.

A measured delta removes the inference. Modify names the selector and the exact before-and-after values, so Gemini CLI edits the right rule the first time.

How Modify works with Gemini CLI

  1. Step 1

    Open your dev server page (or the deployed site) in Chrome.

  2. Step 2

    Adjust elements visually with Modify: drag, resize, recolor, edit text, tune spacing.

  3. Step 3

    Click Copy AI Prompt to get selectors, old and new values, and page context.

  4. Step 4

    Paste it into your Gemini CLI session and it edits the right files.

No integration, no lock-in

There is no plugin or MCP server to configure. The exported prompt is plain structured text, so it works identically in Gemini CLI, Claude Code, Codex CLI, opencode, or aider.

Switch agents next month and your visual editing layer stays the same.

Tips for terminal workflows

  • Batch related tweaks on one component into a single exported prompt.
  • Tell Gemini CLI which directory or component owns the page if the repo is large.
  • Hard-refresh and compare after it applies the change; export a follow-up delta if needed.
  • For responsive fixes, edit at the breakpoint that matters and mention the viewport.

FAQ

How does Modify connect to Gemini CLI?

It does not need to. Modify outputs plain text you paste into your terminal session, so there is no integration or configuration step.

Why not just describe the change to Gemini CLI?

Prose makes the agent guess the selector, property, and amount. Modify hands it exact values, which removes the back-and-forth retry loops.

Does Modify need access to my repository?

No. Modify runs entirely in Chrome on the rendered page. Gemini CLI keeps full control of the codebase; Modify only supplies the visual intent.