Live

Kapan menggunakannya

Gunakan /impeccable live ketika Anda ingin mengiterasi sesuatu secara visual seperti yang Anda lakukan di alat desain, tetapi tetap mempertahankan kode produksi sebagai output. Alur seperti kanvas Figma tanpa perjalanan bolak-balik ke langkah implementasi.

Gunakan untuk:

• Menjelajahi arah pada elemen nyata. Bagian hero, kartu newsletter, tingkat harga. Tiga pendekatan yang benar-benar berbeda, berdampingan, pada halaman sebenarnya dengan konteks sebenarnya.
• Memoles sepotong UI yang hampir tepat. Anda tahu apa yang terasa kurang tapi tidak bisa mengatakannya. Pilih elemennya, coret “lebih playful” atau gambar garis melalui bagian yang mengganggu, tekan Go.
• A/B cepat antara dua arah yang diperdebatkan tim Anda. Hasilkan varian, jangan terima apa pun, pergi. Tujuannya adalah perbandingan.

BUKAN untuk fitur greenfield baru (gunakan /impeccable craft) atau redesain seluruh halaman (gunakan /impeccable atau perintah penyempurnaan khusus).

Cara kerjanya

Satu perintah memunculkan overlay picker di atas dev server yang sedang berjalan. Anda memilih elemen apa saja. Bilah konteks kecil muncul di sebelahnya. Ketik deskripsi bebas atau pilih salah satu chip aksi (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Opsional jatuhkan pin komentar atau gambar coretan langsung pada elemen dulu, dan skill membacanya sebagai maksud.

Tekan Go. Tiga varian berkualitas produksi dihasilkan, masing-masing berlabuh ke arketipe desain yang benar-benar berbeda (bukan tiga variasi warna) dan ditukar secara langsung ke halaman melalui HMR framework Anda. Putar melalui mereka dengan tombol panah. Terima satu dan varian ditulis kembali ke sumber. Buang ketiganya dan yang asli tetap.

Mendukung Vite, Next.js (termasuk monorepo), SvelteKit, Astro, Nuxt, dan HTML statis biasa. Jika dev server Anda memiliki Content Security Policy ketat, pengaturan pertama kali mendeteksinya dan menawarkan patch satu kali khusus dev sehingga picker dapat dimuat. DESIGN.md menang pada keputusan visual, PRODUCT.md menang pada suara: jika Anda memiliki keduanya, varian tetap on-brand tanpa diberi tahu.

Cobalah

/impeccable live

Buka URL dev server Anda, pilih kartu pendaftaran newsletter, klik chip delight, tekan Go. Anda akan mendapatkan tiga varian yang bervariasi melintasi dimensi kepribadian (nuansa prangko-dan-kartupos, versi kejutan-tipografi, satu aksen-ilustrasi), bukan tiga variasi perlakuan yang sama.

Atau pilih hero, ketik “lebih editorial, kurang SaaS”, tekan Go. Tiga varian berlabuh ke arketipe editorial yang berbeda (masthead koran, baris spesifikasi gaya katalog, poster glyph oversize) alih-alih tiga nuansa ide yang sama.

Hentikan mode live setelah selesai: katakan “stop live mode”, tutup tab, atau tekan tombol keluar pada bilah picker.

Jebakan

• Menjalankannya pada halaman yang masih setengah jadi. Pembuatan varian live membutuhkan konteks. Jika elemen memiliki salinan placeholder, Lorem ipsum generik, atau format default pra-stylesheet, varian akan mencerminkan itu. Isi kontennya dulu.
• Mengharapkannya membuat keputusan makro. Mode live mengiterasi pada satu elemen yang dipilih. Untuk “buat ulang seluruh halaman harga”, gunakan /impeccable atau /impeccable craft.
• Mengabaikan pesan fallback. Jika elemen hidup dalam file yang dihasilkan (template yang dikompilasi, output build), picker mengatakannya secara eksplisit dan menawarkan untuk merutekan penerimaan ke sumber sebenarnya. Jangan paksa penerimaan ke file yang dihasilkan: build berikutnya akan menghapusnya.
• Menjalankannya tanpa PRODUCT.md atau DESIGN.md ketika Anda peduli tentang kesesuaian brand. Live masih akan menghasilkan, tetapi varian akan condong ke default generik. Jalankan /impeccable teach dan /impeccable document dulu jika hasilnya perlu terdengar seperti produk Anda.