Workspace

Design Mode

Select elements or regions in the embedded browser and route visual feedback to a Verde chat or terminal agent.

Start Design Mode

Open your app in Verde's browser pane, then click the inspector button beside the address bar. Design Mode overlays the page so you can turn a visual target into an agent-ready prompt without describing its location by hand.

Use the inspector's dropdown to choose a selection mode:

  • Point — click one DOM element.
  • Draw Box — drag a rectangular region.
  • Draw Freeform — draw around an irregular region.

Design Mode works on app:// content and HTTP(S) pages, including localhost preview servers. It is unavailable on restricted URL schemes such as file:, data:, and about:.

Describe the change

After making a selection, type the requested change in the prompt bubble. Verde adds selection context such as the page URL, element details, and selected geometry. This gives the agent both your instruction and a stable description of what you pointed at.

The selection overlay belongs to the page preview; it does not edit the page or source files by itself. The receiving agent still decides what code to inspect and change.

Choose where to send it

When more than one compatible agent pane is open, Send to lets you choose a chat thread or terminal TUI. With only one target, Verde selects it automatically.

  • An idle chat with a clean composer sends immediately.
  • A working chat can receive the request as a queued follow-up.
  • If the chat already has an unsent draft, Verde preserves it and places the Design Mode request in the composer instead of overwriting or unexpectedly sending the draft.
  • A terminal TUI receives the prompt as pasted input but does not submit it. Review or edit the text in the TUI, then press Enter yourself.

Screenshots and platform support

All native browser backends support the selection overlay and text context: WPE WebKit on Linux, WKWebView on macOS, and WebView2 on Windows.

Selection screenshots currently require the Linux WPE backend's frame-copy support. On macOS and Windows, Design Mode still sends the instruction and DOM selection context without an image. If a screenshot is captured, chat targets receive it as an attachment; terminal targets receive its local file path in the pasted prompt.

Control Design Mode from the CLI

The live CLI can enable the inspector and select its mode:

bash
verde live browser inspector-enable
verde live browser inspector-mode --mode point
verde live browser inspector-mode --mode draw-box
verde live browser inspector-mode --mode draw-freeform
verde live browser inspector-disable

inspector-toggle is also available. Add --json for automation, and use the other browser commands to open or navigate the preview first. See CLI reference.

Edit this page on GitHub →