每个项目的右侧是 live preview ——不是模型稿,而是项目文件夹里的 真实文件,由本地提供服务并随 agent 写入而重绘。你看到的就是你将要 交付的。
Result、Code 与 Split
面板顶部的标签切换你看同一份状态的方式:
- Result ——渲染出的设计。steering 在这里发生。
- Code ——预览背后的源代码,想看文件时用。
- Split ——两者并排。
视口与缩放
工具栏上的设备按钮按固定宽度重排结果——桌面、平板、手机——不用 离开这次 run 就能检查设计的响应表现。旁边是 50 / 100 / 150% 的 缩放档位,而宽度芯片直接跳到门禁检查的那些断点(导航和点击目标最 常挂掉的手机与平板尺寸)。
因为检查是实时的,门禁跑的五宽度对比——桌面、笔记本、平板和两种 手机宽度——你随时可以自己用眼睛核对,不必等到一轮结束。
点选、评论与工具栏
在预览里 ⌥-hover 会高亮光标下的元素——和 agent 看到的是同一个 元素——⌥-click 把评论 pin 到它上面。侧栏按钮打开 steering 抽屉:Tweaks 是实时控件,Comment mode 是 pin 和圈画, Designer talk 用来问设计为什么长这样。每一项在 Steering 下都有自己的页面。
演示模式
Present 收起工作室的界面元素,让整个窗口只装结果——给别人 在房间里看一次 run,或者只是不带 transcript 看设计。Esc 回到项目。
agent 工作期间保持实时的东西
预览在一轮进行中就重绘,不只是结束——你看着设计一个文件一个 文件地组装起来。steering(pick、评论、Tweaks)也保持实时;新笔记 排到下一轮,而不是打断构建。
Tip: 宣布结果完成前先看手机视口——门禁会看。桌面宽度下正常 却在移动端断头的导航,是最常见的 FAIL。