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, 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).
Bộ điều khiển zoom bên cạnh gồm −, một con số phần trăm và +, với các nấc từ 25% đến 400%. Bạn cũng có thể pinch trên trackpad, Ctrl-scroll, hoặc bấm ⌘/Ctrl +, − và 0 — các phím tắt vẫn chạy cả khi focus đang nằm trong thiết kế. Trên khung thiết bị, pinch giữ nguyên điểm dưới con trỏ. Click vào con số phần trăm để quay về 100%. Những thiết kế tự zoom view của riêng chúng, như bản đồ, giữ thao tác pinch cho chính mình.
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. Agent được dặn ghi trang chính trước và lưu lại sau mỗi section hoặc màn hình, nên preview bắt đầu hiện thiết kế từ sớm trong bản dựng thay vì đợi đến cuối. Các loại thiết kế dựng từ một model dữ liệu, như Mobile app, Social Media, Pixel Sprite, Diagram và Map, render bản starter trước rồi cập nhật khi model lớn dần. Đ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.
Trước khi có trang chính
Một thiết kế nhiều màn hình có thể mất vài phút ghi token, style component và script dùng chung trước khi trang chính được lưu. Trong lúc đó, vùng preview hiện thẻ build thay vì một khung trống hay nội dung minh họa của mẫu:
- Design so far nằm trên cùng. Ngay khi agent lưu bản kế hoạch thiết kế, thẻ vẽ nó bằng chính token của thiết kế: headline thật và hành động chính, các section theo thứ tự, một điểm nhấn táo bạo duy nhất và bản phác màn hình đầu tiên của agent. Tiếp theo là một màn hình minh họa ở mỗi theme, rồi bảng màu, kiểu chữ và component (button, card, chip, input, toggle) ghép từ các stylesheet agent đã lưu. Phần này được gắn nhãn là bản minh họa, không phải màn hình agent đã viết, và thẻ giãn ra cho vừa nội dung, nên một bản kế hoạch dài đọc liền từ trên xuống dưới mà không cần thanh cuộn thứ hai.
- Build so far liệt kê các file đã ghi trong lượt chạy này, mới nhất trước, kèm kích thước và thời điểm ghi, cùng một dòng cho biết trang chính chưa được ghi, vẫn là bản starter của mẫu, hay đã ghi và đang tải.
- Ở một lượt chạy dài, một ghi chú nói thêm rằng build lâu là bình thường với thiết kế nhiều màn hình.
Với một website mới, trang placeholder của mẫu được ẩn đi trong lúc bản dựng đầu tiên chạy. Việc ghi token hay stylesheet không được tính là đã bắt đầu; thẻ vẫn hiện cho đến khi agent thật sự viết lại trang chính, và nói rõ điều đó: trang hiện vẫn là placeholder của mẫu, chưa phải thiết kế của bạn. Các mẫu dạng editor (sprite, character, 3D part, diagram, map) là ngoại lệ — trang chính của chúng chính là editor, nên bất kỳ file thiết kế nào cũng vẫn đưa preview lên.
Thẻ hiển thị thiết kế, không bao giờ hiện source code — không có phần trăm hay ước tính thời gian, chỉ có những gì agent thật sự đã lưu.
Nếu một trang đã lưu tải được nhưng không bao giờ kết nối với preview (ví dụ vì một script của nó lỗi từ sớm), sau hai giây preview sẽ hiện trang đúng như hiện trạng, kèm ghi chú "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (Đang hiện trang đã lưu — trang chưa phản hồi preview bridge, nên việc chọn phần tử và bình luận phải chờ.) Trang vẫn được làm mới ở các lần lưu sau.
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.