每个项目的右侧是 live preview ——不是模型稿,而是项目文件夹里的 真实文件,由本地提供服务并随 agent 写入而重绘。你看到的就是你将要 交付的。
Result、Code 与 Split
面板顶部的标签切换你看同一份状态的方式:
- Result ——渲染出的设计。steering 在这里发生。
- Code ——预览背后的源代码,想看文件时用。
- Split ——两者并排。
视口与缩放
工具栏上的设备按钮按固定宽度重排结果——桌面、平板、手机——不用 离开这次 run 就能检查设计的响应表现;宽度芯片则直接跳到门禁检查的 那些断点(导航和点击目标最常挂掉的手机与平板尺寸)。
旁边的缩放控件依次是 −、一个百分比和 +,在 25% 到 400% 之间 逐档调整。你也可以在触控板上双指捏合、按住 Ctrl 滚动,或者按 ⌘/Ctrl +、− 和 0——即使焦点在设计内部,这些快捷键也照样 生效。在设备框上捏合时,指针下的那一点保持不动。点击百分比即可回到 100%。自己会缩放视图的设计(例如地图)会把捏合手势留给自己。
因为检查是实时的,门禁跑的五宽度对比——桌面、笔记本、平板和两种 手机宽度——你随时可以自己用眼睛核对,不必等到一轮结束。
点选、评论与工具栏
在预览里 ⌥-hover 会高亮光标下的元素——和 agent 看到的是同一个 元素——⌥-click 把评论 pin 到它上面。侧栏按钮打开 steering 抽屉:Tweaks 是实时控件,Comment mode 是 pin 和圈画, Designer talk 用来问设计为什么长这样。每一项在 Steering 下都有自己的页面。
演示模式
Present 收起工作室的界面元素,让整个窗口只装结果——给别人 在房间里看一次 run,或者只是不带 transcript 看设计。Esc 回到项目。
agent 工作期间保持实时的东西
预览在一轮进行中就重绘,不只是结束——你看着设计一个文件一个 文件地组装起来。agent 被要求先写主页面,并在完成每个区块或界面后 保存一次,所以预览在构建早期就开始显示设计,而不是等到最后。由数据 模型构建的设计类型,例如 Mobile app、Social Media、Pixel Sprite、 Diagram 和 Map,会先渲染起始页,再随模型的增长而更新。steering(pick、 评论、Tweaks)也保持实时;新笔记排到下一轮,而不是打断构建。
主页面出现之前
多界面的设计可能要先花几分钟写 token、组件样式和共享脚本,然后才 保存主页面。在那之前,预览区域显示的是构建卡片,而不是一个空白框 或模板的示例内容:
- Design so far 位于最上方。agent 一保存它的设计方案,卡片就用 设计自己的 token 把方案画出来:真实的标题和主要操作、按顺序排列的 各个区块、那一个大胆的亮点,以及 agent 对第一个界面的草图。接着是 每种主题下的一个示例界面,然后是用 agent 已保存的样式表组合出的 调色板、字体和组件(按钮、卡片、芯片、输入框、开关)。这部分会标注 为示例,而不是 agent 写出的界面;卡片会随内容增高,所以很长的方案 也能从上读到下,不会出现第二个滚动条。
- Build so far 按从新到旧列出这次 run 写入的文件,附带大小和距今 时间,另有一行说明主页面是还没写、仍是模板的起始页,还是已写好 正在加载。
- run 拖得较久时,会多一条提示:多界面设计构建得久是正常的。
在新网站上,第一次构建进行期间,模板的占位页面保持隐藏。写 token 或 样式表不算开始;卡片会一直显示,直到 agent 亲自改写主页面为止,并会 明确告诉你:页面仍是模板的占位页,还不是你的设计。编辑器类模板(精灵、 角色、3D 零件、图表、地图)是例外——它们的主页面就是编辑器,所以任何 设计文件都会照常调出预览。
卡片只展示设计,从不展示源代码——没有百分比,也没有预计时间,只有 agent 真正保存下来的内容。
如果保存的页面加载了却始终没有连上预览(比如它的某个脚本很早就出错), 预览会在两秒后按原样显示它,并附上提示 "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (正在显示已保存的页面——它尚未响应预览桥接,所以点选和评论需要等待。) 之后再保存时,它仍会刷新。
Tip: 宣布结果完成前先看手机视口——门禁会看。桌面宽度下正常 却在移动端断头的导航,是最常见的 FAIL。