June 10, 2026

Coding agents should offer design options

Most coding-agent edits are one-shot: find this code, replace it with that code.

That works for bugs. It is worse for open-ended changes. "Make the button stand out" might mean louder, cleaner, weirder, or just bigger. The agent can guess, but you know which direction fits.

Pick one

Instead of making one edit, the agent can offer a few. You preview them, then apply the one you like.

Make the primary button stand out more.

Here's the call to action as a button. Try each one, then apply the direction you like.

components/hero.tsx
Changes
Browser
Previewing magnetic

The shape

{
  "tool": "edit_file_with_options",
  "path": "components/hero.tsx",
  "old_string": "<button className=\"...bg-gray-100...\">Get started</button>",
  "new_strings": [
    { "label": "Magnetic",   "target": "<button ...rounded-full...>" },
    { "label": "Neon",   "target": "<button ...shadow-[0_0_20px...]...>" },
    { "label": "Pop",   "target": "<button ...shadow-[0_5px_0...]...>" }
  ]
}

The editor applies the selected option and drops the rest.

Words work too

The empty state copy feels flat. Give me a few options.

I'd try the empty state as . Pick the one you want.

components/item-list.tsx
Changes
Browser
Nothing here yet
Add your first item to get going.
Previewing friendly

Whole components, too

The same idea scales past a single element. Ask for a dialog and the layout is wide open: a classic modal, selectable cards, a compact bar. Each is a real design decision, so the agent offers a few and you pick.

Build a dialog to export a file. Show me a few designs.

Here's the export dialog as a layout. Preview each one, then apply the design that fits.

components/export-dialog.tsx
Changes
Browser

Export file

Choose a format to download.

PDF
Previewing classic