Penampil App
Pratinjau app live Anda, uji interaksinya, dan jalankan pemeriksaan pra-publikasi — dengan tur lengkap toolbar dan setiap cara untuk melakukan edit visual.
Apa itu Penampil App?
Saat Agen AI Anda menyelesaikan tugas, Penampil App terbuka di bagian atas halaman. Alih-alih hanya melihat seperti apa kreasi Anda, Anda dapat berinteraksi dengannya sebagai app yang berfungsi penuh—mengeklik halaman, menguji fitur, dan membuat perubahan visual tanpa menulis kode. Ini juga berfungsi sebagai titik pemeriksaan terakhir sebelum publikasi: jika ada yang terlihat salah atau berperilaku tidak semestinya, Anda dapat menemukannya dan memperbaikinya sebelum pengguna melihatnya.
Sebelum memulai: Pemrosesan Agen dapat memerlukan sedikit waktu. Saat tugas berjalan, panel Terminal di sebelah kanan menampilkan aktivitas real-time, termasuk pembuatan file, pembuatan kode, dan error apa pun yang ditemui selama proses. Anda juga dapat menggunakan ikon Refresh kapan saja untuk memuat ulang versi pratinjau terbaru.
Toolbar Penampil App
Sebuah toolbar ramping berada di atas jendela pratinjau. Dari kiri ke kanan, berikut fungsi masing-masing kontrol:
- Design: mengaktifkan atau menonaktifkan mode edit visual. Saat aktif, mengeklik apa pun di pratinjau akan memilih elemen tersebut untuk diedit — lihat “Ubah app Anda” di bawah.
- Device toggle: ikon tampilan mengalihkan pratinjau ke tampilan seluler dan kembali lagi, sehingga Anda dapat memeriksa responsivitas tanpa meninggalkan halaman.
- Refresh: memuat ulang jendela pratinjau. Langkah pertama Anda setiap kali pratinjau terlihat usang atau macet.
- Home: mengembalikan pratinjau ke halaman beranda app Anda dari mana pun Anda bernavigasi.
- Page selector: menu dropdown di tengah menampilkan daftar halaman app Anda, pilih satu untuk mempratinjaunya secara langsung alih-alih mengeklik untuk sampai ke sana.
- Open in new tab: ikon panah membuka pratinjau di tab browser terpisah. Sangat berguna saat pratinjau tersemat macet atau tidak responsif.
- Console: di tepi kanan, membuka panel dengan log sistem dan pesan error, tujuan pertama Anda saat ada sesuatu yang terlihat rusak.
Toolbar di atas pratinjau: Design di kiri, lalu device toggle (“Show mobile preview”), refresh, home, page selector, open-in-new-tab, dan Console di kanan.
Ikon panah membuka app yang sedang berjalan di tab browsernya sendiri — jalur keluar yang andal jika pratinjau tersemat bermasalah.
Cara menggunakan Penampil App
Langkah 1: Tunggu pratinjau dimuat
Setelah agen selesai, Penampil App memuat pratinjau Anda di jendela utama. Ini biasanya memerlukan beberapa detik hingga satu menit.
Lebih dari 2 menit? Klik Refresh di toolbar. Jika masih macet, periksa error di Console (lihat Langkah 3).
Langkah 2: Pratinjau dan uji interaksi
Setelah dimuat, Anda sedang melihat app Anda yang sebenarnya:
- Periksa responsivitas: gunakan device toggle untuk beralih antara tampilan desktop dan seluler serta memastikan tata letak tetap baik di layar yang lebih kecil.
- Klik semua interaksi: buka setiap tautan navigasi, tekan tombol, kirim formulir, dan picu status hover. Halaman yang dirender tidak sama dengan halaman yang berfungsi.
- Telusuri perjalanan utama: ikuti alur yang paling penting, dari landing page, ke eksplorasi, hingga menyelesaikan call to action utama, dari awal sampai akhir.
- Uji di tab nyata: buka pratinjau di tab browser baru untuk pemeriksaan akhir di lingkungan yang benar-benar akan digunakan pengguna Anda.
Langkah 3: Periksa error (jika ada yang terlihat salah)
Jika app tidak dimuat atau terlihat rusak, pilih Console di toolbar Penampil App. Panel Console terbuka di bawah pratinjau, sedangkan Terminal adalah area aktivitas tugas yang terpisah. Panel ini mengumpulkan log sistem dan pesan error yang dihasilkan selama build. Pesan error merah dapat mencakup deskripsi tentang apa yang salah dan detail diagnostik tambahan.
Untuk memperbaiki error:
- Klik Resolve di notifikasi Laporan Masalah, AI menganalisis dan memperbaiki semua bug yang teridentifikasi secara otomatis, dan pratinjau dimuat ulang setelah perbaikannya diterapkan. Anda dapat memantau progresnya secara live di panel Terminal.
- Tidak ada tombol Resolve? Klik “…” (opsi lainnya) di samping pesan terbaru agen dan pilih Feedback untuk menghubungi tim dukungan — sertakan Chat Link Anda dan tangkapan layar error.
Untuk alur penanganan error lengkap, lihat Laporan Masalah.
Langkah 4: Ubah app Anda
Metode 1 — Klik untuk mengedit (terbaik untuk perubahan visual)
Pertama pilih Design di toolbar Penampil App untuk mengaktifkan mode edit visual. Design hanya tersedia dalam status proyek desktop yang memenuhi syarat untuk pengguna dengan akses editor; jika Anda tidak melihatnya, gunakan Metode 2 di chat. Lalu klik elemen apa pun langsung di pratinjau. Elemen akan dipilih dengan outline dan badge yang menamai apa yang Anda pilih beserta ukurannya, seperti h1, button, atau card. Bilah inline “Ask the Atoms to change…” muncul tepat pada elemen tersebut, sehingga Anda dapat menjelaskan perubahan yang dibatasi tepat pada area itu, dan editor visual terbuka di sebelah kiri untuk penyesuaian langsung:
- Colors: warna teks, latar belakang, dan border melalui pemilih warna.
- Spacing: padding, margin, dan jarak antar elemen.
- Typography: ukuran font, ketebalan, dan keluarga font.
- Layout: alignment, flexbox, dan properti grid.
- Text content: edit kata-kata langsung di tempatnya.
Setiap perubahan langsung memperbarui pratinjau, sehingga Anda melihat hasilnya secara real-time. Editor visual juga menyertakan tab Library untuk menelusuri dan menambahkan aset siap pakai: ikon, gambar, dan komponen UI, langsung ke proyek Anda.
Klik-untuk-edit saat digunakan: judul dipilih (dengan tag dan ukurannya ditampilkan), dan bilah inline memungkinkan Anda meminta perubahan tepat pada elemen ini.
Metode 2 — Jelaskan di chat
Beri tahu agen apa yang harus diubah dengan bahasa biasa, dan mereka akan menerapkannya ke app:
Buat warna latar belakang lebih gelap.
Kurangi padding di sekitar header.
Ubah warna tombol menjadi biru.
Pemeriksaan pra-publikasi
Penampil App adalah pemberhentian terakhir sebelum Publish. Checklist ini membantu menemukan masalah umum sebelum pengguna melihatnya:
- Pratinjau dimuat dengan bersih, dan Console tidak menampilkan pesan error merah.
- Tata letak tetap baik di tampilan seluler, bukan hanya di desktop.
- Setiap interaksi berfungsi: navigasi, tombol, formulir, dan call to action utama.
- Konten placeholder sudah diganti, placeholder dalam tanda kurung seperti [Company name] mudah terlewat dan sangat terlihat saat sudah live.
- Setiap halaman di page selector setidaknya diperiksa sekilas, bukan hanya halaman beranda.
Semua sudah jelas? Tekan Publish di sudut kanan atas dan bagikan tautannya.
Referensi cepat
- Refresh pratinjau — ikon Refresh di toolbar Penampil App.
- Ganti tampilan perangkat — device toggle di toolbar untuk menguji ukuran layar yang berbeda.
- Berpindah antarhalaman — dropdown page selector di toolbar.
- Buka di tab baru — ikon panah di toolbar.
- Lihat log error — pilih Console di toolbar Penampil App; panel log terbuka di bawah pratinjau.
- Perbaiki error secara otomatis — tombol Resolve di notifikasi Laporan Masalah.
- Edit elemen visual — klik elemen apa pun di pratinjau untuk memilihnya dan membuka editor visual.
- Laporkan masalah — “…” → Feedback pada pesan agen mana pun.
FAQ
Mengapa Penampil App saya menampilkan layar pemuatan?
Website sedang dimuat, dan Penampil App bekerja dengan normal, tunggu sebentar. Jika memerlukan waktu lebih dari 2 menit, klik ikon Refresh atau periksa panel Console untuk error.
Mengapa Penampil App saya menampilkan pesan error merah?
Agen dapat mengalami masalah selama build, yang kadang menyebabkan error halaman web. Klik Resolve dan agen akan memperbaikinya untuk Anda; setelah diperbaiki, pratinjau kembali normal. Pesan merah adalah sinyal, bukan krisis.
Mengapa saya tidak bisa menghapus badge Atoms dari halaman yang sudah saya publikasikan?
Penghapusan badge memerlukan Pro atau yang lebih tinggi. Klik avatar Anda di sudut kanan atas, pilih Settings, lalu buka Plans & Billing dan pilih paket Pro atau Max. Setelah ditingkatkan, badge Atoms akan otomatis dihapus dari halaman yang Anda publikasikan.
Bagaimana cara memperbaiki masalah tata letak atau styling halaman menggunakan Design Mode?
- Buka Design Mode dan pilih elemen yang tepat yang tidak sejajar atau styling-nya salah.
- Sebutkan halaman dan breakpoint, masalah saat ini, hasil yang diinginkan, dan apa yang tidak boleh berubah.
- Gunakan instruksi yang terukur seperti padding, alignment, width, color, atau perilaku wrapping. Lampirkan gambar referensi saat kecocokan visual penting.
- Terapkan satu perubahan, lalu verifikasi tata letak desktop dan seluler serta status penting seperti loading, empty, hover, dan error.
- Jika hasilnya merusak area lain, kembali ke versi terakhir yang berfungsi dan coba lagi dengan target yang lebih sempit.
Mengapa Penampil App menampilkan layar putih kosong?
- Konfirmasikan apakah masalah hanya memengaruhi Penampil App, Preview URL, atau juga situs yang dipublikasikan.
- Refresh sekali, buka Preview di tab baru, dan uji di jendela Incognito.
- Periksa apakah tugas atau build saat ini masih berjalan. Tunggu hingga selesai sebelum mencoba lagi.
- Jika ada pesan eksplisit yang menyatakan saldo Cloud & AI tidak mencukupi atau app ditangguhkan, buka Settings → Cloud & AI dan tinjau saldo tersebut. Jangan isi ulang hanya berdasarkan layar kosong saja.
- Catat error Console atau Network apa pun tanpa membagikan cookie, token, atau nilai rahasia.
Jika layar tetap kosong, hubungi Support dengan Chat Link, Viewer URL lengkap, waktu dan zona waktu, lingkungan yang terdampak, tangkapan layar, dan detail error yang sudah disanitasi.
Mengapa Preview atau Penampil App saya menampilkan layar kosong atau terus memuat?
- Periksa apakah hanya Penampil App, Preview URL, atau situs yang dipublikasikan yang terdampak.
- Refresh sekali, buka Preview di tab baru, dan uji di jendela Incognito.
- Periksa apakah tugas atau build saat ini masih berjalan dan tunggu hingga selesai.
- Uji versi terakhir yang diketahui berfungsi. Jika itu berfungsi, bandingkan perubahan terbaru yang menyebabkan layar kosong.
- Buka Settings → Cloud & AI hanya ketika produk secara eksplisit melaporkan saldo tidak mencukupi atau app ditangguhkan.
Jika masalah berlanjut, hubungi Support dengan Chat Link, Viewer URL lengkap, versi, waktu dan zona waktu, lingkungan yang terdampak, tangkapan layar, dan error Console atau Network yang sudah disanitasi.
Mengapa perubahan Design Mode saya terlihat benar di Preview tetapi tidak di situs yang dipublikasikan?
Preview dan situs yang dipublikasikan adalah saluran yang independen. Menyimpan atau mempratinjau tidak mendorong perubahan ke production.
- Klik Update di panel Publish — Buka panel Publish dan klik Update. Tunggu hingga status menampilkan Up to date.
- Hard refresh situs live — Tekan Cmd+Shift+R (Mac) atau Ctrl+F5 (Windows), atau buka URL di jendela Incognito untuk menyingkirkan cache browser.
- Periksa nomor versi yang dipublikasikan — Di panel Publish, konfirmasikan versinya cocok dengan yang Anda lihat di Preview. Jika berbeda, publikasikan lagi.
- Uji subdomain Prod platform — Jika Anda menggunakan domain kustom, buka URL Prod default secara terpisah. Jika subdomain Prod diperbarui tetapi domain kustom tidak, masalahnya ada pada cache DNS atau CDN.
Jika masalah berlanjut, berikan Preview URL, Prod URL, tangkapan layar perbandingan berdampingan, dan waktu saat Anda mengklik Publish atau Update.
Mengapa halaman saya terlihat rusak di seluler setelah agen membuat perubahan?
Saat agen memodifikasi tata letak atau styling, hal itu dapat secara tidak sengaja merusak perilaku responsif di layar yang lebih kecil.
- Pratinjau pada lebar seluler terlebih dahulu — Gunakan device toggle di toolbar Penampil App untuk beralih ke tampilan seluler dan periksa hasilnya sebelum publikasi.
- Gunakan Design Mode pada tampilan seluler — Beralih ke Design Mode saat device toggle disetel ke seluler. Klik elemen yang rusak agar agen hanya menargetkan komponen itu pada ukuran layar tersebut.
- Berikan batasan responsif yang eksplisit — Beri tahu agen secara tepat seperti apa tata letak seluler seharusnya. Contoh: "Pada layar yang lebih sempit dari 768px, susun card dalam satu kolom dan atur padding menjadi 16px."
- Minta agen mempertahankan media query yang ada — Saat meminta perubahan desktop, tambahkan: "Jangan ubah style responsif atau seluler yang sudah ada."
Jika masalah berlanjut, berikan Chat Link, tangkapan layar tata letak seluler yang rusak, dan gambar referensi tata letak yang diharapkan.
Mengapa gambar hilang atau tidak dimuat di Preview atau situs yang dipublikasikan?
Jika gambar terlihat rusak, menampilkan ikon placeholder, atau gagal dimuat:
- Periksa path file gambar — Buka bagian Files dan verifikasi file gambar ada di path yang dirujuk dalam kode Anda. Agen mungkin telah memindahkan atau mengganti nama file selama pengeditan.
- Verifikasi ukuran dan format file — Gambar yang sangat besar atau format yang tidak didukung mungkin gagal dimuat. Kompres gambar atau konversi ke PNG, JPG, atau WebP.
- Periksa penyimpanan Cloud — Buka Settings > Cloud & AI untuk mengonfirmasi Anda memiliki ruang penyimpanan yang tersedia.
- Hard refresh — Tekan Cmd+Shift+R (Mac) atau Ctrl+F5 (Windows) untuk menghapus referensi gambar yang tersimpan di cache.
Jika masalah berlanjut, berikan Chat Link, URL gambar yang hilang, dan tangkapan layar kondisi yang rusak.
Agen mengubah elemen yang salah atau merusak bagian lain dari halaman. Apa yang harus saya lakukan?
Saat agen memodifikasi elemen yang tidak terkait atau menimbulkan regresi di bagian lain halaman:
- Roll back — Buka History dan Remix dari versi stabil terakhir. Ini mereset konteks chat sambil mempertahankan kode Anda.
- Gunakan Design Mode untuk mengisolasi — Beralih ke Design Mode dan klik langsung pada elemen tertentu. Ini menambatkan cakupan edit agen ke komponen tersebut.
- Tambahkan batasan eksplisit — Nyatakan dengan jelas apa yang TIDAK boleh berubah. Contoh: "Ubah hanya warna latar belakang header menjadi #1A365D. Jangan ubah navigation bar, footer, atau komponen lainnya."
- Satu perubahan per prompt — Buat satu perubahan, verifikasi hasilnya, lalu lanjutkan ke perubahan berikutnya.
Jika agen berulang kali menyebabkan regresi pada elemen lain, lakukan Remix dari versi stabil dan coba lagi dengan instruksi yang cakupannya sangat sempit.
Mengapa Preview menampilkan build error atau dependency yang hilang?
Jika panel Preview menampilkan build error, banner error merah, atau pesan tentang package yang hilang:
- Gunakan tombol Resolve — Jika notifikasi Laporan Masalah muncul di Penampil App, klik Resolve dan AI akan menganalisis serta memperbaiki semua error yang teridentifikasi secara otomatis. Jika tidak ada tombol Resolve, salin pesan error yang tepat dari panel Console dan tempelkan ke agen dengan: "Perbaiki build error ini: [pesan error]."
- Periksa perubahan terbaru — Jika error muncul setelah edit tertentu, buka History dan bandingkan dengan versi terakhir yang berfungsi untuk mengidentifikasi perubahan mana yang menyebabkan kerusakan.
- Remix dari versi terakhir yang berfungsi — Jika error sulit diatasi, lakukan Remix dari checkpoint sukses terakhir Anda dan terapkan ulang perubahan secara bertahap.
- Periksa kompatibilitas package — Jika error merujuk ke package tertentu, tanyakan kepada agen: "Periksa apakah [nama package] kompatibel dengan setup proyek saat ini dan perbaiki konflik versi apa pun."
Catatan: Jika pesan error merujuk ke komponen platform (Penampil App, startup script, Publish, deploy record) atau file internal package pihak ketiga (misalnya, @vue/compiler-core, vite), ini mungkin masalah platform, bukan masalah agen. Hubungi Support dengan pesan error lengkap.
Jika masalah berlanjut, berikan pesan error lengkap, Chat Link, dan tangkapan layar error.
Mengapa perubahan font, warna, atau spacing saya tidak diterapkan?
Jika agen mengonfirmasi perubahan sudah dilakukan tetapi hasil visualnya belum berubah:
- Hard refresh — Tekan Cmd+Shift+R (Mac) atau Ctrl+F5 (Windows). Perubahan CSS sering kali disimpan di cache browser.
- Periksa konflik spesifisitas CSS — Agen mungkin telah menambahkan style yang ditimpa oleh aturan yang sudah ada. Minta agen: "Periksa apakah style yang saya minta ditimpa oleh aturan CSS lain, dan perbaiki spesifisitasnya jika perlu."
- Gunakan Design Mode untuk memeriksa — Beralih ke Design Mode dan klik elemennya. Editor visual di sebelah kiri menampilkan warna, spacing, typography, dan properti layout yang saat ini diterapkan, sehingga Anda dapat melihat apakah perubahan yang diminta sudah diterapkan.
- Verifikasi file yang benar — Untuk proyek dengan stylesheet global dan style tingkat komponen, agen mungkin mengedit file yang salah. Tanyakan: "Di mana Anda menerapkan perubahan itu? Tunjukkan path file dan barisnya."
Jika masalah berlanjut, berikan Chat Link, tangkapan layar elemen yang tidak berubah, dan nilai style persis yang Anda minta.
Mengapa Design Mode memilih komponen yang salah saat saya mengeklik?
Design Mode menggunakan tata letak visual untuk menentukan komponen mana yang Anda targetkan. Elemen yang bertumpuk atau bersarang dapat menyebabkan pemilihan yang salah.
- Perbesar — Perbesar area tersebut sebelum mengeklik. Ini membantu membedakan komponen yang bersarang rapat.
- Gunakan deskripsi teks sebagai cadangan — Jika klik berulang kali terus memilih elemen yang salah, jelaskan saja di chat. Contoh: "Pilih tombol kedua di dalam pricing card pada kolom kanan."
- Rujuk berdasarkan path file — Jika Anda tahu file mana yang berisi komponen tersebut, beri tahu agen secara langsung: "Edit elemen di src/components/PricingCard.tsx, baris 42."
Jika masalah pemilihan berlanjut, berikan tangkapan layar yang menyorot elemen yang Anda inginkan dan Chat Link.