Penampil App
Pratinjau app live Anda, uji interaksinya, dan jalankan pemeriksaan pra-publikasi — dengan tur lengkap toolbar dan setiap cara untuk melakukan edit visual.
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 sepenuhnya—mengeklik halaman, menguji fitur, dan membuat perubahan visual tanpa menulis kode. Ini juga berfungsi sebagai titik pemeriksaan terakhir sebelum publikasi: jika ada sesuatu yang terlihat salah atau berperilaku tidak semestinya, Anda dapat menemukannya dan memperbaikinya sebelum pengguna melihatnya.
Sebelum memulai: Pemrosesan Agen mungkin 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.
- Pengalih perangkat: ikon tampilan mengubah pratinjau ke tampilan mobile 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: membawa pratinjau kembali ke halaman beranda app Anda dari mana pun Anda telah bernavigasi.
- Pemilih halaman: dropdown di tengah menampilkan daftar halaman app Anda, pilih satu untuk melihat pratinjaunya secara langsung alih-alih mengeklik untuk sampai ke sana.
- Buka di tab baru: 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 tampak rusak.
Toolbar di atas pratinjau: Design di kiri, lalu pengalih perangkat (“Tampilkan pratinjau mobile”), refresh, home, pemilih halaman, buka-di-tab-baru, 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 nyata Anda:
- Periksa responsivitas: gunakan pengalih perangkat untuk beralih antara tampilan desktop dan mobile serta memastikan tata letak tetap baik di layar yang lebih kecil.
- Klik setiap 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 berwarna merah dapat mencakup deskripsi tentang apa yang salah dan detail diagnostik tambahan.
Untuk memperbaiki error:
- Klik Resolve di notifikasi Laporan Masalah, AI akan menganalisis dan memperbaiki semua bug yang teridentifikasi secara otomatis, dan pratinjau akan 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 bagi pengguna dengan akses editor; jika Anda tidak melihatnya, gunakan Metode 2 di chat. Lalu klik elemen apa pun langsung di pratinjau. Elemen tersebut dipilih dengan outline dan badge yang menamai apa yang Anda pilih beserta ukurannya, misalnya h1, tombol, kartu. 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:
- Warna: warna teks, latar belakang, dan border melalui pemilih warna.
- Spasi: padding, margin, dan jarak antar elemen.
- Tipografi: ukuran font, ketebalan, dan keluarga font.
- Tata letak: perataan, properti flexbox, dan grid.
- Konten teks: 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 sedang 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 baik, dan Console tidak menampilkan pesan error merah.
- Tata letak tetap baik dalam tampilan mobile, bukan hanya di desktop.
- Setiap interaksi berfungsi: navigasi, tombol, formulir, dan call to action utama.
- Konten placeholder sudah diganti, pengganti dalam tanda kurung seperti [Company name] mudah terlewat dan sangat terlihat setelah live.
- Setiap halaman di pemilih halaman setidaknya diperiksa sekilas, bukan hanya halaman beranda.
Semua sudah jelas? Tekan Publish di pojok kanan atas dan bagikan tautannya.
Referensi cepat
- Muat ulang pratinjau — ikon Refresh di toolbar Penampil App.
- Ganti tampilan perangkat — pengalih perangkat di toolbar untuk menguji ukuran layar yang berbeda.
- Berpindah antarhalaman — dropdown pemilih halaman 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 loading?
Website sedang dimuat, dan Penampil App berfungsi 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 terkadang menyebabkan error pada webpage. 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 dipublikasikan?
Penghapusan badge memerlukan Pro atau yang lebih tinggi. Klik avatar Anda di pojok 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, perataan, lebar, warna, atau perilaku wrapping. Lampirkan gambar referensi saat kecocokan visual penting.
- Terapkan satu perubahan, lalu verifikasi tata letak desktop dan mobile serta status penting seperti loading, kosong, 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?
- Pastikan apakah masalah hanya memengaruhi Penampil App, URL Preview, 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 lakukan top up 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, URL Viewer 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 loading terus-menerus?
- Periksa apakah hanya Penampil App, URL Preview, 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, URL Viewer 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 channel yang independen. Menyimpan atau melihat pratinjau 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, pastikan 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 sudah diperbarui tetapi domain kustom belum, masalahnya ada pada cache DNS atau CDN.
Jika masalah berlanjut, berikan URL Preview, URL Prod, tangkapan layar perbandingan berdampingan, dan waktu saat Anda mengklik Publish atau Update.
Mengapa halaman saya terlihat rusak di mobile setelah agen membuat perubahan?
Saat agen memodifikasi tata letak atau styling, agen mungkin tanpa sengaja merusak perilaku responsif di layar yang lebih kecil.
- Pratinjau pada lebar mobile terlebih dahulu — Gunakan pengalih perangkat di toolbar Penampil App untuk beralih ke tampilan mobile dan periksa hasilnya sebelum publikasi.
- Gunakan Design Mode pada tampilan mobile — Beralih ke Design Mode saat pengalih perangkat disetel ke mobile. Klik elemen yang rusak agar agen hanya menargetkan komponen tersebut pada ukuran layar itu.
- Berikan batasan responsif yang eksplisit — Beri tahu agen secara tepat seperti apa tata letak mobile yang seharusnya. Contoh: "Pada layar yang lebih sempit dari 768px, susun kartu dalam satu kolom dan atur padding ke 16px."
- Minta agen mempertahankan media query yang ada — Saat meminta perubahan desktop, tambahkan: "Jangan ubah style responsif atau mobile yang sudah ada."
Jika masalah berlanjut, berikan Chat Link, tangkapan layar tata letak mobile yang rusak, dan gambar referensi tata letak yang diharapkan.
Mengapa gambar hilang atau tidak dimuat di Preview atau situs yang dipublikasikan?
Jika gambar tampak rusak, menampilkan ikon placeholder, atau gagal dimuat:
- Periksa path file gambar — Buka bagian Files dan verifikasi bahwa 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 memastikan 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 halaman. Apa yang harus saya lakukan?
Saat agen memodifikasi elemen yang tidak terkait atau menimbulkan regresi di bagian lain halaman:
- Rollback — Buka History dan lakukan Remix dari versi stabil terakhir. Ini mengatur ulang 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 — Lakukan 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: "Fix this build error: [error message]."
- 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 diselesaikan, lakukan Remix dari checkpoint sukses terakhir Anda dan terapkan kembali perubahan secara bertahap.
- Periksa kompatibilitas package — Jika error merujuk ke package tertentu, minta agen: "Check whether [package name] is compatible with the current project setup and fix any version conflicts."
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 spasi 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 ada. Minta agen: "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
- Gunakan Design Mode untuk memeriksa — Beralih ke Design Mode dan klik elemennya. Editor visual di sebelah kiri menampilkan warna, spasi, tipografi, dan properti tata letak 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 telah mengedit file yang salah. Tanyakan: "Where did you apply the change? Show me the file path and line."
Jika masalah berlanjut, berikan Chat Link, tangkapan layar elemen yang tidak berubah, dan nilai style yang tepat yang Anda minta.
Mengapa Design Mode memilih komponen yang salah saat saya mengklik?
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 sebelum mengklik. Ini membantu membedakan komponen yang bersarang rapat.
- Gunakan deskripsi teks sebagai cadangan — Jika klik berulang kali memilih elemen yang salah, jelaskan saja di chat. Contoh: "Select the second button inside the pricing card in the right column."
- Rujuk berdasarkan path file — Jika Anda tahu file mana yang berisi komponen tersebut, beri tahu agen secara langsung: "Edit the element in src/components/PricingCard.tsx, line 42."
Jika masalah pemilihan berlanjut, berikan tangkapan layar yang menyorot elemen yang Anda inginkan dan Chat Link.