Phía bên phải của mọi dự án là live preview — không phải mockup mà là các file thật trong thư mục dự án, được serve local và vẽ lại khi agent ghi chúng. Thứ bạn thấy đúng nghĩa là thứ bạn sẽ ship.
Result, Code và Split
Các tab ở đầu panel chuyển cách bạn nhìn cùng một trạng thái:
- Result — thiết kế đã render. Đây là nơi điều hướng diễn ra.
- Code — phần source bên dưới preview, cho lúc bạn muốn xem file.
- Split — cả hai cạnh nhau.
Viewport và zoom
Các nút thiết bị trên toolbar reflow kết quả ở các độ rộng cố định — desktop, tablet và phone — để bạn kiểm tra thiết kế phản hồi thế nào mà không rời lượt chạy. Các nấc zoom 50 / 100 / 150% nằm cạnh chúng, và các chip độ rộng nhảy thẳng tới breakpoint mà cổng kiểm duyệt kiểm tra (kích thước phone và tablet — nơi nav và vùng chạm hay hỏng nhất).
Vì kiểm tra là live, phép so sánh năm độ rộng mà cổng chạy — desktop, laptop, tablet và hai độ rộng phone — là thứ bạn có thể tự nhìn bằng mắt bất cứ lúc nào, không chỉ sau khi turn kết thúc.
Chọn, bình luận và thanh công cụ
⌥-hover trong preview tô sáng phần tử dưới con trỏ — đúng phần tử mà agent nhìn thấy — và ⌥-click ghim một bình luận vào nó. Các nút trên rail mở các drawer điều hướng: Tweaks cho điều khiển trực tiếp, Comment mode cho ghim và vẽ, Designer talk để hỏi thiết kế vì sao nó trông như vậy. Mỗi mục có trang riêng dưới Điều hướng.
Chế độ trình chiếu
Present bỏ phần chrome của studio và lấp đầy cửa sổ bằng kết quả — để trình chiếu một lượt chạy cho người khác trong phòng, hoặc đơn giản là nhìn thiết kế mà không có transcript kèm theo. Escape quay lại dự án.
Cái gì vẫn live khi agent làm việc
Preview vẽ lại trong turn, không chỉ ở cuối — bạn xem thiết kế lắp ráp từng file một. Điều hướng (picks, comments, Tweaks) cũng vẫn live; các ghi chú mới xếp vào turn tiếp theo thay vì cắt ngang bản dựng.
Mẹo: Kiểm tra viewport phone trước khi coi một kết quả là xong — cổng kiểm duyệt sẽ làm vậy. Một nav hoạt động ở độ rộng desktop nhưng bế tắc trên mobile là FAIL phổ biến nhất.