Point at the page: Design mode for coding agents

Open your running app in Shuriken's browser, turn on Design, click the element you mean (hold Shift for several), then write the change. Your coding agent receives each element's details and a cropped screenshot, so "make this full width on phones" means exactly this button and nothing else.

The pain: describing a page in words#

Every front-end chat with an agent eventually sounds like this:

"The second button in the header. No, the other one. The grey one next to the avatar. Not that grey, the lighter grey."

We kept typing it ourselves, and we kept hearing it from the people testing Shuriken with us. The agent can read your code, but it can't see what you see. You end up translating pixels into prose, the agent translates the prose back into a guess, and you spend three turns correcting the guess.

You don't describe a button to a colleague sitting next to you. You point at it. So we built the pointing.

How Design mode works#

1. Open your app. Pick a dev server Shuriken found in the project, or type any address. The page opens in a browser inside Shuriken, right beside the chat.
2. Turn on Design and click. Click the part of the page you want to change. Hold Shift to pick several elements at once.
3. Describe the change. Write a short note for each element, or pick a few with Shift just to give the agent context.
4. Send it. The notes go to the agent in that chat as one message.

What the agent gets#

For every element you picked, the agent receives two things alongside your note:

• the element's details, so it can find that element in your code;
• a cropped screenshot of it, so it sees what you see.

The difference shows up on the first turn. Instead of "which button?", you get the change.

New in 5.1: say it, or queue it#

Two things landed with Shuriken 5.1.0:

• A voice note. Press the microphone in the note and say the change instead of typing it. Talking while pointing is surprisingly natural; we'll write that up properly in its own post, and Voice covers dictation in general.
• Add to queue. If the agent is in the middle of a turn, add the note to the queue instead of sending it. It waits its turn with everything attached, and you can keep clicking around and queueing the next fix.

The browser around it#

Design mode lives in a real browser, and a few details make it useful on real apps:

• Your signed-in session. Import cookies from Chrome, Arc, Edge, Brave, Firefox or Safari, so the page opens already signed in to your app. Google's cookies are never imported: Google signs you out everywhere when they move.
• One profile per workspace. Logins and storage stay with each workspace, so your staging account and your production account never mix.
• Agents drive the same tab. When your agent clicks and types to test its change, it does it in the page you are looking at.
• Passwords stay put. Password and secret fields never leave the page.

More on all of that on the browser feature page.

Desktop app only#

The browser and Design mode are part of the desktop app for macOS, Windows and Linux. On your phone you can follow the chat, read the changes and queue the next message in the web app, but the pointing happens at your desk.

If you are tired of describing buttons, try Shuriken, open your dev server and click the thing.