A feature in some agent tools' built-in browsers that lets you click an element on your running app and send it to the coding agent as context.

What does design mode send to the agent?

It varies: usually the element's HTML and styles, often a screenshot, and in some tools its location in your source code or React component details.

Which tools have design mode?

Orca, Superset and Agentastic have versions of it in their built-in browsers.

Can I do this without design mode?

Partly. Paste a screenshot into your agent and describe the element. Design mode just makes it exact.

Glossary

what is design mode?

TL;DR

Design mode is a feature in some agent tools' built-in browsers: you click a button, card or heading on your running app, and the tool sends that element to your coding agent as context. Depending on the tool, it passes the element's HTML, its styles, a screenshot and where it lives in your source code. Instead of describing "the blue button under the header", you point at it. Orca, Superset and Agentastic have versions of it.

Front-end changes are hard to describe in words. Design mode lets you show the agent exactly which part of the page you mean.

How it works

Point at the element in the app's browser; the tool sends its details to the agent.

The tool opens your app in a browser inside the workspace. You turn on design mode, hover to highlight elements and click the one you want. The tool collects details about it and adds them to your next message to the agent, so you can type "make this bigger" and the agent knows what "this" is.

What each tool sends

The richer the context, the less the agent has to guess.

The feature goes by the same name in several tools, but what it captures differs.

Tool	What design mode sends
Orca	The element's HTML, computed CSS, a screenshot and its source location.
Superset	The DOM, computed styles, React component details and a cropped screenshot.
Agentastic	Click an element to see its source and open the composer, or copy the hovered React component.

When it helps

Visual tweaks to a running app. Less useful for logic, data or back-end work.

Design mode shines for small visual changes: spacing, colours, copy, a component that looks wrong at one size. It saves the back-and-forth of describing where something is. For logic, data handling or anything without a visible element, a normal prompt works just as well.

Without a design mode, a screenshot pasted into your agent's prompt gets you part of the way, since most coding agents accept images.

Sources

Corrections

If anything here is wrong or out of date, tell us and we'll fix it and update the date at the top. Open an issue on GitHub

Sources

→ Orca
→ Pane vs Superset

frequently asked questions

Download*

Windows SmartScreen warningDirect downloads can show a SmartScreen warning while Pane is unsigned. Pane is fully open source, so you can audit the code and build from source yourself.1. Click More info2. Click Run anyway3. Continue the installerThe PowerShell install downloads the official release directly and avoids most browser download friction.npm global install

Paste that in PowerShell.Linux

By Parsa Khazaeepoul, co-founder of Pane. Last reviewed October 2026.