Design with the agent

Some UI changes are easier to show than to describe: spacing that's off, a button in the wrong style, a component that looks wrong on one page. In the desktop app's built-in browser, you can select those parts of the page, note what should change, and send them to the agent with screenshots. It uses the browser's Inspect element and screenshot tools, so there's nothing extra to turn on.

How it works

Inspect element selects part of the running page and gives you a place to describe a change, such as "Match the primary button style." Add to chat attaches the selection and your note to a draft message for you to review before sending.

You can include several elements in one request to explain how they should work together. Messages sent while the agent is working join the queue.

What the agent receives

Your note and the selected element's page context help the agent find the relevant code. With an image-capable model and room for another image, a screenshot also highlights the element and its surroundings.

If you already know the relevant source file, mention it with @ alongside the selection.

Page screenshots

For feedback on a whole layout rather than one element, use Add screenshot to chat in the browser toolbar. It attaches what's currently visible in the browser.

Check the result

After the agent edits the code, ask it to check the change in the browser. It can load the page, take screenshots, and look at other viewport sizes and color schemes. Browser actions ask for approval by default; see Control and approvals.