Kit: menjelajah, pratinjau, dan menambahkan modul

Explorer memiliki tepat tiga level, dan masing-masing berada di alamat halaman itu sendiri, bukan hanya di status komponen: grid kategori (/projects/kit atau /projects/<id>/kit), daftar modul dalam satu kategori (tambahkan ?cat=<key>), dan halaman detail lengkap satu modul (tambahkan &module=<id>). Artinya, tombol Kembali di browser selalu bekerja dengan benar, dan halaman detail modul tertentu adalah tautan nyata yang bisa dibagikan — kirim langsung ke "inilah yang didapat dari Formulir Permintaan Penawaran atau Estimasi" daripada memberi tahu di mana harus mengklik. Esc mundur satu level setiap kali, sama seperti Kembali.

Jika dibuka dari dalam proyek (/projects/<id>/kit), halaman ini tahu proyek mana yang sedang Anda lihat, sehingga dapat menampilkan apa yang sudah ada di dalamnya dan membiarkan Anda menambahkan langsung ke proyek tersebut. Jika dibuka sendiri (/projects/kit, dari tautan tab Kit, atau langsung), tampilannya sama dengan tiga level tanpa hal yang spesifik untuk proyek — berguna untuk menjelajah sebelum Anda memutuskan apa yang akan dibangun, atau untuk menunjukkan katalog kepada seseorang tanpa membuka proyek tertentu.

Di bagian atas grid kategori, tombol dua arah yang sama seperti di seluruh aiKit membagi seluruh katalog: Kit situs adalah bagian dan fitur yang menjadi bagian dari situs web atau aplikasi itu sendiri (halaman, formulir, galeri, toko, pemesanan, SEO); Kit alat bisnis adalah alat yang berjalan bersama proyek alih-alih di dalamnya (otomasi pemasaran, faktur, CRM, alat staf, pelaporan). Setiap ubin kategori menampilkan jumlah modulnya, dan lencana "N siap sekarang" jika ada setidaknya satu modul Siap sekarang (lihat di bawah).

Kotak pencarian di atas kategori mencocokkan nama atau deskripsi modul di SELURUH katalog sekaligus — baik Kit situs maupun Kit alat bisnis, terlepas dari tombol mana yang dipilih — jadi mencari "faktur" akan menemukannya meskipun Anda sedang melihat Kit situs.

Jika dibuka dari dalam proyek, dan hanya saat Anda tidak sedang mencari, baris "Direkomendasikan untuk proyek ini" muncul di atas grid kategori ketika aiKit memiliki saran yang sesuai: aturan sederhana non-AI yang dicocokkan dengan jenis proyek (situs web akan disarankan formulir penawaran, formulir kontak, showcase ulasan, SEO lokal, dan halaman FAQ; toko online akan disarankan keranjang dan checkout, pemulihan keranjang yang ditinggalkan, dan ulasan produk; dan seterusnya untuk halaman arahan, aplikasi, sistem admin, dasbor, portal klien, blog, dan proyek otomasi pemasaran) ditambah beberapa kecocokan kata kunci dari teks tujuan proyek (menyebutkan "penawaran", "pemesanan", "ulasan", "email", "faktur", atau "jual online" masing-masing memunculkan modul yang cocok dengan alasan satu baris sendiri). Yang sudah ada di proyek dikecualikan, dan daftarnya dibatasi enam item.

Setiap modul memiliki salah satu dari dua label status, dan kata-katanya sengaja lugas, bukan bahasa pemasaran. "Siap sekarang" berarti modul tersebut adalah salah satu modul uji dari mesin pembuatan — kode nyata yang menampilkan halaman sungguhan dengan data contoh sebagai pengganti detail Anda, template yang sama persis dengan yang didapat situs live. "Dibuat untuk Anda" berarti modul tersebut adalah bagian katalog yang nyata dan direncanakan, tetapi belum ada yang ditampilkan: memilihnya akan menambahkannya ke rencana dan membuat item kerja nyata, dan modul tersebut dibangun ke dalam kode situs itu sendiri, dengan merek dan kata-katanya sendiri, sama seperti perubahan AI lainnya — hanya saja belum ada template uji yang siap saat ini.

Kedua status itu tidak berarti "tidak nyata" atau "hipotetis". Keduanya adalah hal yang benar-benar akan dibangun aiKit untuk Anda. Satu-satunya perbedaan adalah apakah Anda bisa melihat bentuk akhirnya sekarang atau harus membayangkannya dari deskripsi dan diagram.

Membuka kategori menampilkan setiap modul di dalamnya sebagai kartu: thumbnail, nama modul, label statusnya, deskripsi singkat satu baris, deretan chip "Paling cocok untuk" (hingga tiga), dan "Di proyek ini" jika sudah ditambahkan (saat menjelajah di dalam proyek). Thumbnail modul Siap sekarang adalah pratinjau langsung kecil dari halaman nyata — dimuat secara bertahap hanya setelah terlihat saat digulir, dan dibatasi enam thumbnail langsung di layar sekaligus agar kategori yang panjang tidak memperlambat halaman; apa pun di luar batas itu menampilkan placeholder pemuatan biasa sampai benar-benar terlihat. Thumbnail modul Dibuat untuk Anda adalah diagram ilustrasi yang sama seperti dijelaskan di bawah, hanya lebih kecil — kecuali untuk modul yang memiliki pratinjau yang berfungsi (lihat di bawah), yang kartunya menampilkan contoh situs nyata yang diperkecil, lencana "Pratinjau berfungsi · N variasi", dan tombol "Lihat cara kerjanya" alih-alih "Lihat detail". "Lihat detail" membuka halaman modul itu sendiri.

Untuk modul Siap sekarang, pratinjau adalah iframe langsung dari halaman asli yang sudah diuji, ukuran penuh, dibingkai seperti jendela browser kecil dengan tombol Desktop/Ponsel yang benar-benar mengubah ukuran bingkai sehingga Anda bisa memeriksa tampilannya di ponsel (di ponsel sungguhan, tombol diganti dengan label biasa "Pratinjau ponsel" dan bingkai terbuka sudah digulir ke bagian formulir itu sendiri, sehingga Anda melihat kolom-kolomnya, bukan hanya bagian utama). Bingkai memudar di bagian bawah; "Buka pratinjau penuh" di bawahnya membuka seluruh halaman di tab baru, dan keterangan di bawahnya menyebutkan nama bisnis contoh yang datanya digunakan. Saat dibuka di dalam proyek, tombol "Tampilkan dengan warna situs ini" memuat ulang pratinjau yang sama dengan warna merek proyek (dibaca langsung dari kode #hex yang diketik di catatan merek pada brief) dan nama proyek diganti, sehingga Anda melihat sesuatu yang lebih mendekati tampilan situs Anda yang sebenarnya, bukan contoh umum.

Untuk modul Dibuat untuk Anda, tidak ada iframe langsung. Sebagai gantinya, Anda mendapatkan wireframe ilustrasi yang sama seperti di daftar kategori, digambar lebih besar: diagram SVG garis tunggal sederhana dari bentuk tata letak (kolom formulir, kisi kalender, kotak dasbor, sesuai jenis layar yang cocok untuk modul itu) dengan beberapa label singkat yang diambil dari data pratinjau modul itu sendiri. Keterangan di bawahnya wajib ada di setiap contoh dan tidak pernah dihapus: "Ilustrasi tata letak. Versi Anda dirancang agar sesuai dengan situs Anda." Keterangan ini ada khusus agar sketsa bentuk tidak pernah keliru dianggap sebagai pratinjau jadi yang sesuai merek.

Pratinjau yang berfungsi (2026-10-04): sejumlah modul Dibuat untuk Anda yang terus bertambah melewati sketsa dan membuka situs contoh lengkap yang bisa diklik, ditampilkan selebar penuh di atas detail. Semua dua belas modul Toko Online / E-commerce membuka toko keramik contoh yang sama, Juniper Kiln, masing-masing pada bagian yang menjadi fokus modul itu: katalog (filter, urutkan, cari, buka produk dan pilih glasir serta ukuran; gambar dan harga berubah), keranjang dan checkout (ubah jumlah, hapus item, masukkan WELCOME10, FREESHIP, atau GIFT-2580, perkirakan pengiriman berdasarkan kode pos, dan selesaikan checkout ke halaman konfirmasi), opsi pembayaran (kartu, Bayar dalam 4, dan tombol dompet digital), tarif pengiriman, kode diskon dan kartu hadiah, ulasan produk (filter berdasarkan bintang atau foto, tandai membantu, tulis ulasan), paket dan add-on, pajak penjualan (ubah negara bagian pengiriman dan baris pajak ikut berubah), akun pelanggan (masuk, beli lagi, lacak paket, mulai retur), email pesanan (email konfirmasi, pengiriman, dan diterima, dengan halaman pelacakan yang berfungsi), retur dan penukaran (cari pesanan, pilih item dan alasan, dapatkan label retur), serta inventaris (tampilan Pemilik tempat mengubah stok akan mengubah apa yang dilihat pembeli). Semua sepuluh modul Kursus Online & Produk Digital membuka sekolah roti contoh, Rise & Crumb: putar pelajaran (kecepatan, keterangan), tandai selesai, lihat lingkaran kemajuan terisi, ikuti kuis, daftar dari pratinjau gratis, lihat sertifikat, ajukan pertanyaan di bawah pelajaran, beli unduhan digital, pilih paket kursus atau centang add-on saat checkout, dan beralih ke tampilan Pemilik untuk mengganti nama, mengurutkan ulang, menambah, atau membatalkan publikasi pelajaran serta mengatur kapan setiap minggu dibuka. Pada modul jadwal rilis, baris Waktu pratinjau di atas bingkai memiliki Lewati seminggu ke depan (dan Kembali ke hari ini), sehingga Anda bisa melihat pelajaran terkunci terbuka pada tanggalnya.

Di atas bingkai: satu baris pilihan untuk setiap variasi yang ditawarkan modul (misalnya Tata letak toko: Kisi, Daftar, atau Unggulan; Keranjang: Keranjang geser atau Halaman keranjang plus Checkout: Satu halaman atau Langkah demi langkah; Aturan rilis: Pada tanggal tertentu, Hari setelah bergabung, atau Setelah menyelesaikan pelajaran terakhir). Memilih salah satunya langsung menggambar ulang situs contoh dalam variasi tersebut dan disimpan di alamat halaman (?v=…), sehingga tautan ke variasi tertentu bisa dibagikan. Desktop dan Ponsel mengubah ukuran bingkai sehingga situs contoh menyusun ulang tampilannya seperti di ponsel (di ponsel sungguhan ini berupa label biasa "Tampilan ponsel"). Atur ulang mengembalikan situs contoh ke kondisi awal. Baris singkat "Yang bisa dilakukan" mencantumkan apa yang diklik pertama kali, dan deskripsi setiap variasi yang dipilih ada di bawah bingkai. Di dalam proyek dengan warna merek pada brief-nya, "Tampilkan dengan warna situs ini" menukar warna utama situs contoh dengan warna milik proyek (hanya jika warna itu cukup gelap agar teks putih pada tombol tetap mudah dibaca).

Tidak ada yang dalam pratinjau yang berfungsi dikirim ke server. Tidak ada koneksi pembayaran: checkout diberi label "Pratinjau — tidak ada yang ditagih dan tidak ada pesanan yang dikirim," nomor kartu adalah contoh tetap yang hanya bisa dibaca, dan tombol dompet digital (Apple Pay, Google Pay, PayPal) hanya menampilkan catatan. Tidak ada email yang dikirim, tidak ada ulasan yang diposting, dan tidak ada yang disimpan; meninggalkan halaman akan menghapus semuanya. Bisnis, produk, orang, dan harga contoh bersifat fiktif. Keterangan di bawah bingkai menyatakannya: "Pratinjau yang berfungsi dengan data contoh untuk bisnis fiktif. Versi Anda menggunakan produk, harga, kata-kata, dan merek Anda sendiri. Tidak ada yang ditagih, disimpan, atau dikirim di sini." Setiap modul Dibuat untuk Anda lainnya tetap menampilkan ilustrasi tata letak.

• Yang dilihat pengunjung — panduan bernomor dan dalam bahasa sederhana tentang apa yang sebenarnya dialami seseorang saat menggunakan modul, langkah demi langkah.
• Yang Anda dapatkan — apa yang diberikan modul kepada pemilik proyek (prospek yang tercatat di tempat nyata, status yang bisa Anda perbarui, dan sebagainya).
• Fitur, dan — hanya untuk modul dengan varian bernama yang benar-benar didefinisikan di katalog — kumpulan kartu yang bisa dipilih "Pilih varian" langsung di bagian ini (yang pertama dipilih secara default, ditandai dengan tanda centang kecil), sehingga pilihan nyata salah satu dari dua (bukan sekadar kustomisasi teks bebas) dipilih di sini, bukan diketik secara manual.
• Mengapa penting — alasan jujur mengapa sebuah bisnis menginginkannya.
• Cara penyesuaian (Siap sekarang) atau Varian yang bisa Anda pilih (Dibuat untuk Anda) — apa saja yang benar-benar bisa dibuat berbeda.
• Paling cocok untuk — chip jenis bisnis yang sama seperti di kartu, ditampilkan lengkap.
• Cara dibuatnya — satu kalimat sederhana yang menjelaskan persis bagaimana modul ini tercipta (halaman yang sudah diuji dan ditampilkan mesin hari ini, atau dibangun ke situs oleh AI selama proses pembuatan), termasuk catatan jika memerlukan akun pihak ketiga seperti pembayaran atau peta.

Di bagian paling bawah ada "Tambahkan ini ke <nama proyek>" (atau "proyek Anda", saat menjelajah tanpa memilih proyek). Jika modul ini punya ide penyesuaian yang tersimpan, ide tersebut tampil lebih dulu sebagai daftar centang — diberi label "Saran penyesuaian" untuk modul Siap sekarang, atau "Pilih varian yang Anda inginkan" untuk modul Dibuatkan untuk Anda — dan mencentang salah satunya akan menambahkan baris itu persis ke dalam yang dikirim, bukan sekadar kotak centang diam-diam.

Untuk modul yang sudah punya pratinjau berfungsi, panel berada di kolom kiri di bawah pratinjau dan dimulai dengan "Variasi Anda" — variasi yang dipilih di baris pilihan pratinjau (misalnya "Keranjang: Halaman keranjang · Checkout: Langkah demi langkah"). Apa pun yang tampil di pratinjau saat Anda menekan Tambah itulah yang dicatat: disimpan di brief proyek bersama modul tersebut, dan item kerja berbunyi "Varian: …" sehingga siapa pun yang membangunnya akan membangun tata letak itu. Modul yang juga punya opsi bernama di bagian Fitur akan menanyakan "Mana yang paling penting bagi Anda?" di sana, agar kedua pilihan tidak tertukar.

"Apa yang seharusnya berbeda untuk Anda?" adalah catatan teks bebas dengan tombol dikte yang sama seperti di seluruh aiKit, ditambah tombol "Lampirkan foto atau PDF" (hanya gambar dan PDF, hingga 2,5 MB masing-masing) untuk logo, foto referensi, atau lembar spesifikasi — file yang dilampirkan tampil sebagai chip yang bisa dihapus tepat di sana. Jika modul memerlukan pertanyaan nyata dan spesifik agar bisa dibangun dengan baik, pertanyaan itu tampil di bawah "Yang akan kami tanyakan," masing-masing dengan kolom teks opsionalnya sendiri, sehingga Anda bisa menjawab di awal alih-alih menunggu untuk ditanya nanti.

"Tambah ke rencana" selalu tersedia begitu Anda berada di proyek sungguhan: ini mencatat pilihan di brief proyek (rencana yang sama yang dibaca layar Rencana Situs dan halaman proyek) dan membuat item kerja nyata untuk tim, di tab Umpan Balik, bertanda "Menunggu kami", persis seperti permintaan lainnya. "Tambah dan bangun sekarang" muncul di sebelahnya hanya setelah proyek memiliki file asli untuk diedit — pembuatan pertamanya sudah selesai, atau sudah live; tombol ini melakukan dua hal yang sama lalu langsung menjalankan item kerja itu melalui editor AI yang sama dengan yang digunakan Perbaiki dengan AI, tanpa antrean terpisah. Mencoba menambahkan modul yang sudah ada di proyek akan ditolak langsung dengan pesan sederhana "sudah ada di proyek ini", bukan menambahkan duplikat.

Setelah dikirim, konfirmasi menggantikan tombol dengan apa yang benar-benar terjadi — pesan sederhana "Ditambahkan ke rencana sebagai item kerja", atau, untuk permintaan bangun sekarang, statusnya yang sebenarnya (dimulai, atau alasan spesifik mengapa tidak bisa, seperti ditahan menunggu persetujuan peninjauan terlebih dahulu) — ditambah dua tautan langsung ke "Buka rencana" dan "Lihat permintaan", sehingga Anda tidak perlu bertanya-tanya ke mana perginya.

Di /projects/kit — dengan masuk yang sama seperti bagian dasbor proyek yang di-hosting lainnya, tanpa perlu proyek — semuanya berfungsi persis sama, sampai Anda mencoba menambahkan sesuatu. Menekan "Tambah ke proyek" (tombol bertuliskan itu, bukan "Tambah ke rencana", saat belum ada proyek yang dimuat) membuka "Tambah ke proyek yang mana?", pemilih kecil yang mencantumkan setiap proyek di akun Anda. Pilih satu, dan Anda langsung dibawa ke Penjelajah Kit milik proyek itu dengan modul yang sama tetap terbuka, siap untuk diselesaikan penambahannya. Jika Anda belum punya proyek, pemilih akan menyebutkannya dengan jelas dan menawarkan tautan langsung "Mulai proyek →" alih-alih membuat Anda terjebak.