The right side of every project is the live preview — not a mockup but the actual files in the project folder, served locally and repainted as the agent writes them. What you see is literally what you'll ship.
Result, Code and Split
The tabs at the top of the panel switch how you look at the same state:
- Result — the rendered design. This is where steering happens.
- Code — the source under the preview, for when you want to see the files.
- Split — both side by side.
Viewports and zoom
The toolbar's device buttons re-flow the result at fixed widths — desktop, tablet and phone — so you can check how the design responds without leaving the run, and the width chips jump straight to the breakpoints the gate checks (the phone and tablet sizes where nav and hit-targets most often break).
The zoom control beside them reads −, a percentage and +, and steps from 25% to 400%. You can also pinch on a trackpad, Ctrl-scroll, or press ⌘/Ctrl +, − and 0 — the shortcuts work even while focus is inside the design. On a device frame a pinch keeps the spot under the pointer in place. Click the percentage to return to 100%. Designs that zoom their own view, such as a map, keep the pinch for themselves.
Because the check is live, the five-width comparison the gate runs — desktop, laptop, tablet and two phone widths — is something you can eyeball yourself at any point, not just after a turn ends.
Pick, comment, and the tools rail
⌥-hover inside the preview highlights the element under the cursor — the same element the agent sees — and ⌥-click pins a comment to it. The rail buttons open the steering drawers: Tweaks for live controls, Comment mode for pins and drawing, Designer talk for asking the design why it looks like it does. Each has its own page under Steering.
Present mode
Present drops the studio chrome and fills the window with the result — for showing a run to someone else in the room, or just looking at the design without the transcript beside it. Escape returns to the project.
What stays live while the agent works
The preview repaints during a turn, not only at the end — you watch the design assemble file by file. Agents are told to write the main page first and save it after each section or screen, so the preview starts showing the design early in a build rather than at the end. Design types built from a model, such as Mobile app, Social Media, Pixel Sprite, Diagram and Map, render the starter first and update as the model grows. Steering (picks, comments, Tweaks) stays live too; new notes queue onto the next turn rather than interrupting the build.
Before the main page exists
A multi-screen design can spend minutes writing tokens, component styles and shared scripts before the main page is saved. Until then the preview area shows the build card instead of a blank frame or the template's sample content:
- Design so far sits at the top. As soon as the agent saves its design plan, the card draws it in the design's own tokens: the real headline and primary action, the sections in order, the one bold moment and the agent's sketch of the first screen. A sample screen in each theme follows, then the palette, typefaces and components (buttons, cards, chips, inputs, toggles) composed from the stylesheets the agent has saved. It is labeled as a sample, not a screen the agent wrote, and the card grows to fit, so a long plan reads top to bottom without a second scrollbar.
- Build so far lists the files written this run, newest first, with their size and age, plus a line saying whether the main page is not written yet, is still the template's starter, or is written and loading.
- On a long run a note adds that long builds are normal for multi-screen designs.
On a new website the template's placeholder page stays hidden while the first build runs. Writing tokens or stylesheets doesn't count as a start; the card stays up until the agent rewrites the main page itself, and says so: the page is still the template's placeholder, not your design. Editor templates (sprite, character, 3D part, diagram, map) are the exception — their main page is the editor, so any design file still brings up the preview.
The card shows the design, never source code — there are no percentages or time estimates, only what the agent has actually saved.
If a saved page loads but never connects to the preview (for example because one of its scripts failed early), the preview shows it as it is after two seconds, with the note "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." It still refreshes on later saves.
Tip: Check the phone viewport before calling a result done — the gate will. A nav that works at desktop width but dead-ends on mobile is the single most common FAIL.