Build with an agent

Say the price on a product page sits too close to the badge under it. Typed into a chat, that sentence leaves the agent to guess which page, which price, at what width, and which template draws it. It may fix the wrong one.

A note in a chat loses which part of the page you meant. A note on a part keeps it. From the live view, Wanigan writes what only it can see; you write what is wrong, and what right looks like. The agent gets:

• The page’s address and the view’s width.
• The parts you pointed at, named as the site names them, with the template, component or block behind each.
• With the site helper, the module, plugin or theme behind each, and the template’s line.
• A snap’s console errors, or a recording’s clicks, pages and failed requests.
• The pictures. Never a video.

1. You point and say what is wrong: a note on a part, a snap or a recording, or what the page reports.
2. The agent gets one message: your words, the page, the parts and what made them, the errors and the pictures.
3. It works in a real terminal: a Claude Code or Codex session in the project, as if you had typed it there.
4. The live view follows its edits: the page reloads, or swaps only its stylesheets, and outlines what each edited file made.
5. You review in Changes, and a note on a line goes back the same way.

1. 1

   Open the Live tab

   Every project has a Live tab. Switch the view on there, or in Settings › Live view, and it opens the local site you already run, such as https://northstar-demo.ddev.site.

   

2. 2

   Choose the part

   Press P and point at it, or choose it in Layers. It is outlined with its name, and its action bar floats above it: Style, Move, Take out, Ask an agent.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

3. 3

   Say what should change

   Ask an agent puts the keyboard in the Inspector’s Tell an agent box. Write what is wrong and what you want instead, or speak it with the mic beside the box.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

4. 4

   Send it

   Send now (On a Mac, ⌘⇧↩·; on Windows and Linux, Ctrl+Shift+Enter) queues it to the agent running in the project; it arrives when the agent is next idle. Add to notes (On a Mac, ⌘↩·; on Windows and Linux, Ctrl+Enter) keeps it to send later with others.

5. 5

   Or start an agent with it

   With no agent running, the button reads Start Claude Code with this: one press starts the agent New session would start here, with your note as its first message. Nothing starts without that press.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

6. 6

   Watch it work

   The page reloads as the agent edits files, outlining what each file made. In the agent’s session, See it opens the site beside its terminal.

   Picture: to come

   A screenshot of the real app, with the demo’s data, of what the title above says.

7. 7

   Review the change

   Open Changes (G then C) and read the diff before anything is committed.

   

A note goes to an agent session in the project, never a plain shell.

Gemini CLI shows as Gemini CLI: not from here: its first message is typed in its own terminal, where it may ask you to sign in. After that, notes reach it too.

One problem often shows on several pages. Add to notes keeps each note, with a picture of its part, in the dock’s Notes tab while you go on to other pages.

Send 3 notes there, or On a Mac, ⌘⇧↩·; on Windows and Linux, Ctrl+Shift+Enter anywhere in the live view while not typing, sends them as one numbered message, the pictures in the same order. Notes work on a read-only hosted environment too.

• Snap (On a Mac, ⇧S·; on Windows and Linux, Shift+S) and Record (On a Mac, ⇧R·; on Windows and Linux, Shift+R): a marked-up picture, or up to two minutes of the page with a log of each step. See Snap and Record.
• Problems, in the dock: Add to notes turns what the page reports into a note that begins “Fix what this page reports”.
• A move the site cannot save: dragging a part whose order a template writes becomes a note, with pictures of the order now and the order wanted.
• A style tried in the design layer: see below.

With the site helper, the dock’s Request tab shows the request behind the page: its hooks in firing order, its queries slowest first, its scripts, styles and logs. It sends nothing itself: pointing at a query outlines the part it was for, to choose and note, and Copy the SQL copies it to paste into your note.

A style tried in the design layer belongs in the theme’s CSS, which is code, so Make it real on a style saves nothing. It says why and opens the note box under the edit, the style already in the note; a token goes the same way. The brief adds these lines:

   An edit in Wanigan’s design layer, shown on the page but not in the site yet: <the edit>, for <what it reaches>.
   Its element: <the element, as the site stores it>.
   Why Wanigan did not make it real itself: <what Make it real said>
   Style in the layer (not saved): <property> <before> → <after>
   Make it in the site’s own styles, the way this theme already styles things (its classes or CSS), not as an inline style.

A picture comes with it while the view shows the edit’s page. The whole message, filled in, is on Prompts.

Once the agent has put the style in the theme, choose Verify on the edit in Edits. Verify finds it in the site and the edit becomes Verified; if the theme does not render it yet, it says “Not in the site yet”, which step failed and at what widths, and the first differences (“At 1440 px, the title: font-size is 52px in the site, 63px in the design.”), so you can tell the agent exactly what is left; the edit stays a draft. When the same element’s words were made real too, one Verify checks both. See Verify.

An edit to a file the site serves reloads the page and outlines what that file made; a stylesheet is swapped in place. The status line says what happened:

In the agent’s session, “node--product.html.twig changed · See it” waits until you look. The rules are below.

The live view shows what a change looks like; Changes (G then C) shows what it is, file by file, and notes on lines go back to the agent as one message. With before and after screenshots on, each card also shows its page before and after each turn that changes files. Approving stays yours: see Review and Changes and git.

Each note box has a mic, Speak the note. Talk, and each sentence goes in at the caret when you pause, as text you can edit or take back with On a Mac, ⌘Z·; on Windows and Linux, Ctrl+Z. On a Mac, ⌘⇧M·; on Windows and Linux, Ctrl+Shift+M starts or stops it; hold On a Mac, ⌘⇧H·; on Windows and Linux, Ctrl+Shift+H to talk until you let go.

Speech becomes text on this computer: the audio never leaves it, and nothing reaches an agent until you send. The model downloads once, when you ask; see Settings › Voice. During a recording, the toolbar’s Voice tool narrates.