Sisi kanan setiap proyek adalah live preview — bukan mockup, melainkan file nyata di folder proyek, disajikan secara lokal dan digambar ulang saat agen menulisnya. Apa yang Anda lihat adalah persis apa yang akan Anda kirim.
Result, Code, dan Split
Tab di atas panel mengganti cara Anda melihat keadaan yang sama:
- Result — desain yang dirender. Di sinilah pengarahan terjadi.
- Code — sumber di balik pratinjau, untuk saat Anda ingin melihat file-nya.
- Split — keduanya berdampingan.
Viewport dan zoom
Tombol perangkat di toolbar mengalirkan ulang hasil pada lebar tetap — desktop, tablet, dan ponsel — supaya Anda bisa memeriksa respons desain tanpa meninggalkan run, dan chip lebar melompat langsung ke breakpoint yang diperiksa gate (ukuran ponsel dan tablet tempat nav dan target sentuh paling sering rusak).
Kontrol zoom di sebelahnya berisi −, persentase, dan +, dengan langkah dari 25% hingga 400%. Anda juga bisa pinch di trackpad, Ctrl-scroll, atau menekan ⌘/Ctrl +, −, dan 0 — pintasan ini tetap bekerja meski fokus sedang berada di dalam desain. Pada bingkai perangkat, pinch menjaga titik di bawah kursor tetap di tempatnya. Klik persentasenya untuk kembali ke 100%. Desain yang men-zoom tampilannya sendiri, seperti peta, menyimpan pinch untuk dirinya sendiri.
Karena pemeriksaannya live, perbandingan lima lebar yang dijalankan gate — desktop, laptop, tablet, dan dua lebar ponsel — adalah sesuatu yang bisa Anda lihat sendiri kapan pun, bukan hanya setelah turn berakhir.
Pick, komentar, dan rel alat
⌥-hover di dalam pratinjau menyorot elemen di bawah kursor — elemen yang sama seperti yang dilihat agen — dan ⌥-click menyematkan komentar padanya. Tombol rel membuka laci pengarahan: Tweaks untuk kontrol live, Comment mode untuk pin dan menggambar, Designer talk untuk menanyakan desain kenapa ia tampak seperti itu. Masing-masing punya halaman sendiri di Pengarahan.
Mode presentasi
Present menanggalkan chrome studio dan mengisi jendela dengan hasilnya — untuk memperlihatkan run ke orang lain di ruangan, atau sekadar melihat desain tanpa transkrip di sampingnya. Escape kembali ke proyek.
Yang tetap live selama agen bekerja
Pratinjau menggambar ulang selama turn, bukan hanya di akhir — Anda menyaksikan desain terakit file demi file. Agen diinstruksikan menulis halaman utama lebih dulu dan menyimpannya setelah setiap bagian atau layar, jadi pratinjau mulai menampilkan desain sejak awal build, bukan baru di akhir. Jenis desain yang dibangun dari model data, seperti Mobile app, Social Media, Pixel Sprite, Diagram, dan Map, merender starter lebih dulu lalu diperbarui seiring modelnya bertambah. Pengarahan (pick, komentar, Tweaks) juga tetap live; catatan baru mengantre ke turn berikutnya alih-alih menyela build.
Sebelum halaman utama ada
Desain multi-layar bisa menghabiskan beberapa menit menulis token, gaya komponen, dan skrip bersama sebelum halaman utama disimpan. Sampai saat itu, area pratinjau menampilkan kartu build alih-alih bingkai kosong atau konten contoh dari template:
- Design so far ada di paling atas. Begitu agen menyimpan rencana desainnya, kartu ini menggambarnya dengan token milik desain itu sendiri: headline dan aksi utama yang sebenarnya, bagian-bagian secara berurutan, satu momen berani, dan sketsa layar pertama dari agen. Setelahnya ada layar contoh di setiap tema, lalu palet, tipografi, dan komponen (tombol, kartu, chip, input, toggle) yang disusun dari stylesheet yang sudah disimpan agen. Bagian ini diberi label sebagai contoh, bukan layar yang ditulis agen, dan kartunya membesar menyesuaikan isi, jadi rencana yang panjang terbaca dari atas ke bawah tanpa scrollbar kedua.
- Build so far mendaftar file yang ditulis pada run ini, terbaru lebih dulu, dengan ukuran dan usianya, plus satu baris yang menyatakan apakah halaman utama belum ditulis, masih berupa starter dari template, atau sudah ditulis dan sedang dimuat.
- Pada run yang panjang, sebuah catatan menambahkan bahwa build lama itu wajar untuk desain multi-layar.
Pada website baru, halaman placeholder template tetap tersembunyi selama build pertama berjalan. Menulis token atau stylesheet tidak dihitung sebagai awal; kartu tetap tampil sampai agen benar-benar menulis ulang halaman utama, dan kartu mengatakannya dengan jelas: halaman itu masih placeholder dari template, bukan desain Anda. Template editor (sprite, character, 3D part, diagram, map) adalah pengecualian — halaman utamanya adalah editor itu sendiri, jadi file desain apa pun tetap memunculkan pratinjau.
Kartu ini menampilkan desain, tidak pernah kode sumber — tidak ada persentase atau perkiraan waktu, hanya apa yang benar-benar sudah disimpan agen.
Jika halaman yang tersimpan termuat tetapi tidak pernah terhubung ke pratinjau (misalnya karena salah satu skripnya gagal di awal), setelah dua detik pratinjau menampilkannya apa adanya, dengan catatan "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (Menampilkan halaman tersimpan — halaman belum menjawab preview bridge, jadi pick dan komentar menunggu.) Pratinjau tetap menyegarkannya pada penyimpanan berikutnya.
Tip: Periksa viewport ponsel sebelum menyatakan hasil selesai — gate akan melakukannya. Nav yang bekerja di lebar desktop tapi buntu di mobile adalah FAIL paling umum.