ด้านขวาของทุกโปรเจกต์คือ live preview — ไม่ใช่ mockup แต่เป็นไฟล์จริงใน โฟลเดอร์โปรเจกต์ ที่ serve ในเครื่องและวาดใหม่เมื่อ agent เขียนมัน สิ่งที่คุณ เห็นคือสิ่งที่คุณจะส่งออกตัวจริง
Result, Code และ Split
แท็บบนสุดของแผงสลับวิธีมองสถานะเดียวกัน:
- Result — ดีไซน์ที่เรนเดอร์แล้ว การ steer เกิดตรงนี้
- Code — source ใต้ preview สำหรับตอนอยากดูไฟล์
- Split — ทั้งสองข้างกัน
Viewport และซูม
ปุ่มอุปกรณ์บน toolbar จัดเรียงผลลัพธ์ใหม่ที่ความกว้างคงที่ — เดสก์ท็อป แท็บเล็ต และโทรศัพท์ — คุณจึงเช็กว่าดีไซน์ตอบสนองอย่างไรโดยไม่ต้องออกจากการรัน และชิปความกว้างกระโดดตรงไปยัง breakpoint ที่เกตตรวจ (ขนาดโทรศัพท์และแท็บเล็ต ที่ nav และเป้าหมายการแตะมักแตกที่สุด)
ตัวควบคุมซูมข้าง ๆ แสดง − เปอร์เซ็นต์ และ + และปรับเป็นขั้นตั้งแต่ 25% ถึง 400% คุณยัง pinch บน trackpad, Ctrl-scroll หรือกด ⌘/Ctrl +, − และ 0 ได้ด้วย — ทางลัดเหล่านี้ใช้ได้แม้ตอนโฟกัสอยู่ในดีไซน์ บนกรอบอุปกรณ์ การ pinch จะตรึงจุดใต้เคอร์เซอร์ไว้กับที่ คลิกที่เปอร์เซ็นต์เพื่อกลับไป 100% ดีไซน์ที่ซูมมุมมองของตัวเอง เช่น แผนที่ จะเก็บการ pinch ไว้ใช้เอง
เพราะการตรวจเป็นแบบสด การเปรียบเทียบห้าความกว้างที่เกตรัน — เดสก์ท็อป แล็ปท็อป แท็บเล็ต และความกว้างโทรศัพท์สองขนาด — คือสิ่งที่คุณลองดูด้วยตาเองได้ทุกเมื่อ ไม่ใช่แค่หลังเทิร์นจบ
Pick, comment และแถบเครื่องมือ
⌥-hover ใน preview ไฮไลต์องค์ประกอบใต้เคอร์เซอร์ — องค์ประกอบเดียวกับที่ agent เห็น — และ ⌥-click ปักคอมเมนต์ลงบนมัน ปุ่มบนแถบเปิดลิ้นชัก steering: Tweaks สำหรับตัวควบคุมสด Comment mode สำหรับหมุดและการวาด Designer talk สำหรับถามดีไซน์ว่าทำไมหน้าตาเป็นอย่างนั้น แต่ละตัวมีหน้าของมันเองใน Steering
โหมด Present
Present ทิ้ง chrome ของสตูดิโอและเติมหน้าต่างด้วยผลลัพธ์ — สำหรับแสดงการรัน ให้คนอื่นในห้อง หรือแค่มองดีไซน์โดยไม่มี transcript ข้าง ๆ กด Escape เพื่อ กลับสู่โปรเจกต์
อะไรยังสดขณะ agent ทำงาน
preview วาดใหม่ระหว่างเทิร์น ไม่ใช่แค่ตอนจบ — คุณดูดีไซน์ประกอบตัวทีละไฟล์ agent ถูกสั่งให้เขียนหน้าหลักก่อนและบันทึกหลังทุกส่วนหรือทุกหน้าจอ preview จึงเริ่มแสดงดีไซน์ตั้งแต่ช่วงต้นของการสร้าง ไม่ใช่ตอนจบ ประเภทดีไซน์ที่สร้าง จากโมเดลข้อมูล เช่น Mobile app, Social Media, Pixel Sprite, Diagram และ Map จะเรนเดอร์ starter ก่อนแล้วอัปเดตตามที่โมเดลโตขึ้น การ steer (picks, comments, Tweaks) ก็ยังสดเช่นกัน; โน้ตใหม่เข้าคิวไปเทิร์นถัดไปแทนที่จะขัดการสร้าง
ก่อนที่หน้าหลักจะมีอยู่
ดีไซน์หลายหน้าจออาจใช้เวลาหลายนาทีเขียน token, สไตล์คอมโพเนนต์ และสคริปต์ ที่ใช้ร่วมกัน ก่อนที่หน้าหลักจะถูกบันทึก ระหว่างนั้นพื้นที่ preview จะแสดง การ์ด build แทนกรอบว่างหรือเนื้อหาตัวอย่างของเทมเพลต:
- Design so far อยู่ด้านบนสุด ทันทีที่ agent บันทึกแผนดีไซน์ การ์ดจะวาด แผนนั้นด้วย token ของดีไซน์เอง: หัวข้อจริงและ action หลัก ส่วนต่าง ๆ ตามลำดับ จุดเด่นที่กล้าหนึ่งจุด และภาพร่างหน้าจอแรกของ agent ตามด้วย หน้าจอตัวอย่างในแต่ละธีม แล้วจึงเป็นพาเลต ฟอนต์ และคอมโพเนนต์ (ปุ่ม การ์ด ชิป ช่องกรอก สวิตช์) ที่ประกอบจาก stylesheet ที่ agent บันทึกไว้ ส่วนนี้ มีป้ายบอกว่าเป็นตัวอย่าง ไม่ใช่หน้าจอที่ agent เขียน และการ์ดจะขยายให้พอดี แผนยาว ๆ จึงอ่านจากบนลงล่างได้โดยไม่มี scrollbar ที่สอง
- Build so far แสดงรายการไฟล์ที่เขียนในการรันนี้ ใหม่สุดก่อน พร้อมขนาด และอายุของไฟล์ บวกบรรทัดที่บอกว่าหน้าหลักยังไม่ถูกเขียน ยังเป็น starter ของเทมเพลต หรือเขียนแล้วและกำลังโหลด
- ในการรันที่ยาว จะมีโน้ตเพิ่มว่าการสร้างที่ใช้เวลานานเป็นเรื่องปกติสำหรับ ดีไซน์หลายหน้าจอ
บนเว็บไซต์ใหม่ หน้า placeholder ของเทมเพลตจะถูกซ่อนไว้ระหว่างการสร้าง ครั้งแรก การเขียน token หรือ stylesheet ไม่นับว่าเป็นการเริ่ม; การ์ดจะค้างอยู่ จนกว่า agent จะเขียนหน้าหลักใหม่เอง และบอกไว้ชัดว่า หน้านั้นยังเป็น placeholder ของเทมเพลต ไม่ใช่ดีไซน์ของคุณ เทมเพลตแบบ editor (สไปรต์ ตัวละคร ชิ้นส่วน 3D ไดอะแกรม แผนที่) เป็นข้อยกเว้น — หน้าหลักของมันคือ editor ไฟล์ดีไซน์ใด ๆ จึงยังเปิด preview ขึ้นมาได้
การ์ดแสดงดีไซน์ ไม่เคยแสดง source code — ไม่มีเปอร์เซ็นต์หรือการประมาณเวลา มีเพียงสิ่งที่ agent บันทึกไว้จริง ๆ
ถ้าหน้าที่บันทึกไว้โหลดได้แต่ไม่เคยเชื่อมต่อกับ preview (เช่น เพราะสคริปต์ ตัวหนึ่งของมันล้มเหลวตั้งแต่ต้น) preview จะแสดงหน้านั้นตามสภาพหลังผ่านไป สองวินาที พร้อมโน้ต "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (กำลังแสดงหน้าที่บันทึกไว้ — หน้านี้ยังไม่ตอบ preview bridge การเลือกและคอมเมนต์จึงต้องรอ) หน้านั้นยัง รีเฟรชเมื่อมีการบันทึกครั้งถัดไป
Tip: เช็ก viewport โทรศัพท์ก่อนบอกว่าผลลัพธ์เสร็จ — เกตจะเช็ก nav ที่ ใช้ได้ที่ความกว้างเดสก์ท็อปแต่ตายบนมือถือคือ FAIL ที่พบบ่อยที่สุด