1DesignToolDownload

Live preview, viewports and present mode

Updated 2026-09-25Describes app version 1.7.0

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. The 50 / 100 / 150% zoom steps sit beside them, 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 phone viewport — the same result re-flowed at a narrow width

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.

Two viewport sizes side by side — checking responsive behavior in one glance

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.

Present mode — the result fills the window

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. Steering (picks, comments, Tweaks) stays live too; new notes queue onto the next turn rather than interrupting the build.

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.