ด้านขวาของทุกโปรเจกต์คือ live preview — ไม่ใช่ mockup แต่เป็นไฟล์จริงใน โฟลเดอร์โปรเจกต์ ที่ serve ในเครื่องและวาดใหม่เมื่อ agent เขียนมัน สิ่งที่คุณ เห็นคือสิ่งที่คุณจะส่งออกตัวจริง
Result, Code และ Split
แท็บบนสุดของแผงสลับวิธีมองสถานะเดียวกัน:
- Result — ดีไซน์ที่เรนเดอร์แล้ว การ steer เกิดตรงนี้
- Code — source ใต้ preview สำหรับตอนอยากดูไฟล์
- Split — ทั้งสองข้างกัน
Viewport และซูม
ปุ่มอุปกรณ์บน toolbar จัดเรียงผลลัพธ์ใหม่ที่ความกว้างคงที่ — เดสก์ท็อป แท็บเล็ต และโทรศัพท์ — คุณจึงเช็กว่าดีไซน์ตอบสนองอย่างไรโดยไม่ต้องออกจากการรัน ขั้นซูม 50 / 100 / 150% อยู่ข้าง ๆ และชิปความกว้างกระโดดตรงไปยัง breakpoint ที่เกต ตรวจ (ขนาดโทรศัพท์และแท็บเล็ตที่ nav และเป้าหมายการแตะมักแตกที่สุด)
เพราะการตรวจเป็นแบบสด การเปรียบเทียบห้าความกว้างที่เกตรัน — เดสก์ท็อป แล็ปท็อป แท็บเล็ต และความกว้างโทรศัพท์สองขนาด — คือสิ่งที่คุณลองดูด้วยตาเองได้ทุกเมื่อ ไม่ใช่แค่หลังเทิร์นจบ
Pick, comment และแถบเครื่องมือ
⌥-hover ใน preview ไฮไลต์องค์ประกอบใต้เคอร์เซอร์ — องค์ประกอบเดียวกับที่ agent เห็น — และ ⌥-click ปักคอมเมนต์ลงบนมัน ปุ่มบนแถบเปิดลิ้นชัก steering: Tweaks สำหรับตัวควบคุมสด Comment mode สำหรับหมุดและการวาด Designer talk สำหรับถามดีไซน์ว่าทำไมหน้าตาเป็นอย่างนั้น แต่ละตัวมีหน้าของมันเองใน Steering
โหมด Present
Present ทิ้ง chrome ของสตูดิโอและเติมหน้าต่างด้วยผลลัพธ์ — สำหรับแสดงการรัน ให้คนอื่นในห้อง หรือแค่มองดีไซน์โดยไม่มี transcript ข้าง ๆ กด Escape เพื่อ กลับสู่โปรเจกต์
อะไรยังสดขณะ agent ทำงาน
preview วาดใหม่ระหว่างเทิร์น ไม่ใช่แค่ตอนจบ — คุณดูดีไซน์ประกอบตัวทีละไฟล์ การ steer (picks, comments, Tweaks) ก็ยังสดเช่นกัน; โน้ตใหม่เข้าคิวไปเทิร์น ถัดไปแทนที่จะขัดการสร้าง
Tip: เช็ก viewport โทรศัพท์ก่อนบอกว่าผลลัพธ์เสร็จ — เกตจะเช็ก nav ที่ ใช้ได้ที่ความกว้างเดสก์ท็อปแต่ตายบนมือถือคือ FAIL ที่พบบ่อยที่สุด