Jualan online · 19 menit baca
Coba minta AI “buatkan landing page yang keren dan modern”. Hampir selalu hasilnya mirip: latar gelap, huruf serif miring yang elegan, aksen warna emas, dan cahaya yang menyala di sudut. Terlihat rapi, tapi juga terlihat seperti buatan mesin. Orang yang melihatnya langsung merasa pernah melihat halaman yang sama.
Masalahnya bukan di kemampuan AI-nya. Masalahnya ada di prompt-nya. Kata seperti “keren”, “modern”, atau “premium” tidak memberi AI keputusan apa pun, jadi AI memilih jalan yang paling aman dan paling sering muncul di data latihnya. Hasilnya generik.
Artikel ini menjelaskan cara membalik keadaan itu: kamu yang memutuskan gaya, bagian halaman, dan nama tiap gerakan, sementara AI mengerjakan kodenya. Ada prompt lengkap yang bisa kamu salin dan sesuaikan, contoh halaman sungguhan yang bisa kamu buka dan scroll sendiri, serta cara merevisi kalau hasilnya belum pas. Semua nama usaha, harga, dan testimoni di contoh adalah fiktif.
Contoh hasil
Sebelum membahas caranya, lihat dulu hasilnya. Ini halaman toko makanan fiktif “Sambal Mak Ijah” yang dibuat dengan pendekatan di artikel ini. Rekaman di bawah menunjukkan halamannya di-scroll dari atas sampai penutup di layar ponsel.
Beberapa hal yang bisa kamu perhatikan saat membukanya: judul masuk kata demi kata, stiker berputar, warna latar melebar menggantikan bagian sebelumnya, barang “terbang” ke keranjang saat kamu menggulir bagian menu, dan motor pengantar berjalan di sepanjang garis langkah pemesanan. Semuanya dibuat dari kode, tanpa foto dan tanpa library tambahan.
Dasar
AI menulis halaman dengan cara memilih kemungkinan yang paling umum. Kalau kamu hanya meminta “modern dan premium”, kata itu paling sering berasosiasi dengan segelintir pilihan yang sama. Itu sebabnya banyak halaman buatan AI terlihat sebagai variasi dari satu template.
Tanda halaman yang terasa seperti template AI dan penggantinya
| Yang sering muncul | Kenapa terasa generik | Gantinya |
|---|---|---|
| Latar gelap penuh dengan aksen emas | Dipakai hampir semua “premium” versi AI | Palet terang yang kamu pilih sendiri, dengan satu warna gelap hanya untuk teks |
| Huruf serif miring yang elegan | Selalu muncul di judul | Huruf tebal dan sempit bergaya poster, atau gaya lain yang cocok dengan usahanya |
| Cahaya menyala dan tekstur noise | Menutupi desain yang kurang kuat | Warna datar dan garis tepi yang tegas |
| Foto stok atau kotak abu-abu | AI tidak punya fotomu | Ilustrasi vektor (SVG) buatan sendiri, konsisten dalam satu gaya |
| Animasi hanya muncul perlahan (fade in) | Semua elemen bergerak dengan cara yang sama | Gerakan yang berbeda untuk tujuan yang berbeda: masuk, berputar, terbang, tergambar |
Ini pengamatan umum, bukan aturan. Gaya gelap dan serif bisa bagus kalau memang cocok dengan merekmu dan kamu yang memilihnya dengan sengaja.
Pegangan utama
Jangan minta AI “membuat yang bagus”. Tulis keputusan desainnya sendiri: warna apa, huruf apa, bagian apa, gerakan apa. Semakin spesifik kamu, semakin kecil ruang AI untuk jatuh ke pilihan generik.
Kosakata
Animasi yang terasa mahal hampir selalu terdiri dari beberapa efek dasar yang dipadukan dengan rapi. Kalau kamu tahu namanya, kamu bisa memintanya satu per satu. Berikut daftar yang dipakai di halaman contoh.
Efek, istilahnya, dan kalimat yang bisa kamu pakai
| Efek | Istilah | Contoh kalimat di prompt |
|---|---|---|
| Teks muncul kata demi kata | Staggered reveal | Kata pada judul masuk satu per satu dengan jeda kecil, lalu diam. |
| Gambar bergerak dengan kecepatan berbeda saat scroll | Parallax | Ilustrasi di latar bergerak lebih lambat daripada isi halaman. |
| Teks berubah saat di-scroll | Scroll-driven animation | Judul besar berubah dari garis luar menjadi terisi mengikuti posisi scroll. |
| Bagian menempel di layar | Pinned section (sticky) | Bagian paket menempel di layar sementara kartu bergeser ke samping. |
| Warna latar berganti dengan lingkaran membesar | Clip-path wipe | Perpindahan antar-bagian memakai lingkaran warna yang membesar saat scroll. |
| Angka menghitung naik | Counter | Angka statistik menghitung dari nol mengikuti posisi scroll. |
| Garis tergambar sendiri | SVG path drawing | Garis putus-putus langkah pemesanan tergambar saat di-scroll. |
| Teks berjalan di pita | Marquee | Pita teks berjalan makin cepat saat scroll makin kencang. |
| Tombol tertarik ke kursor | Magnetic button | Tombol pesan sedikit bergeser mengikuti kursor di desktop. |
| Kartu miring mengikuti kursor | Tilt | Kartu miring pelan mengikuti kursor di desktop. |
| Barang terbang ke keranjang | Fly-to-cart | Saat tombol tambah ditekan, ikon barang terbang melengkung ke keranjang. |
| Gelembung chat muncul bergantian | Chat reveal dengan typing indicator | Testimoni muncul seperti chat dengan tanda mengetik di antaranya. |
Gerakan yang berbasis kursor hanya terlihat di desktop. Di ponsel, efek itu tidak berpengaruh.
Jangan semua sekaligus
Pilih 5 sampai 8 efek dan tempatkan masing-masing di bagian yang cocok. Halaman yang semuanya bergerak justru terasa ramai dan murahan. Gerakan paling berkesan biasanya satu per bagian.
Cara kerja
Urutan menulis prompt
1Tahap 1
Konsep
usaha dan tujuan
2Tahap 2
Gaya
warna, huruf, ilustrasi
3Tahap 3
Bagian
urutan isi halaman
4Tahap 4
Gerakan
satu per satu
5Tahap 5
Aturan teknis
satu file, mobile first
Tulis berurutan. Bagian gaya dan gerakan menentukan hasil paling besar.
Prompt yang efektif untuk halaman seperti ini punya lima bagian. Masing-masing dijelaskan singkat di bawah, lalu digabung menjadi satu prompt lengkap di bagian berikutnya.
- 1Konsep: usaha apa, tujuan halamannya apa, dan bahasa apa. Contoh: toko makanan online, tujuannya orang mau memesan lewat WhatsApp, bahasa Indonesia yang santai.
- 2Gaya: palet warna (sebut warnanya), huruf (sebut jenisnya), cara menggambar ilustrasi, dan daftar hal yang dihindari. Daftar “hindari” sama pentingnya dengan daftar “pakai”.
- 3Bagian halaman: urutan section dari atas ke bawah, supaya AI tidak menebak struktur.
- 4Gerakan: satu baris per efek, dengan nama efek dan di bagian mana ia dipasang.
- 5Aturan teknis: satu file, mobile first, tidak boleh ada teks meluber, kontras jelas, dan cek ulang di akhir.
Simulasi: dari prompt ke halaman
Simulasi ini mengilustrasikan susunan yang dihasilkan. Tampilan sungguhan bisa dilihat di rekaman dan halaman contoh di atas.
Langkah 1
Ganti kata sifat dengan keputusan. “Modern dan hangat” bisa ditafsirkan seribu cara. “Latar krem, judul merah cabai, teks hitam kecokelatan, tanpa gradasi” hanya bisa ditafsirkan satu cara.
Dari kata sifat ke keputusan
| Kata sifat (terlalu longgar) | Keputusan (jelas) |
|---|---|
| Warna cerah dan menarik | Merah cabai, kuning kunyit, hijau daun, krem. Teks satu warna gelap. |
| Huruf yang bagus | Judul huruf kapital, tebal, dan sempit. Label kecil memakai monospace. |
| Ilustrasi yang lucu | SVG buatan sendiri, garis tepi tebal dan konsisten, bayangan hanya di satu sisi. |
| Terlihat profesional | Margin 24 px di ponsel, tidak ada teks yang meluber, kontras jelas di semua latar. |
Blok GAYA (sesuaikan bagian dalam kurung)
GAYA - Terang dan berwarna, ala poster. Palet: [sebut 3-4 warna]. Teks memakai satu warna gelap saja. - Judul: huruf kapital besar, tebal, dan sempit. Font [nama font, misalnya Bricolage Grotesque dari Google Fonts]. Label dan harga memakai font monospace kecil. - Ilustrasi: gambar sendiri sebagai SVG, garis tepi tebal dan konsisten, tanpa foto. - HINDARI: latar gelap penuh, gradasi, efek cahaya menyala, tekstur noise, huruf serif miring, kartu kaca.
Daftar hindari itu penting
AI cenderung kembali ke gaya yang paling umum. Menulis apa yang tidak kamu mau menutup jalan kembali itu.
Langkah 2
Kalau kamu tidak menulis susunan bagian, AI akan menyusun sendiri, dan susunannya hampir selalu sama: hero, tiga keunggulan, testimoni, penutup. Tulis urutanmu sendiri, termasuk bagian yang membuat halaman terasa hidup, misalnya pita teks berjalan atau testimoni bergaya chat.
Blok BAGIAN HALAMAN
BAGIAN HALAMAN (urut) 1. Hero: judul besar, kalimat penjelas, ilustrasi utama, tombol pesan. 2. Pita teks berjalan (ticker). 3. Pernyataan besar satu kalimat. 4. Menu favorit: 4 kartu dengan harga dan tombol tambah. 5. Paket hemat: kartu yang digeser ke samping. 6. Cara pesan: 3 langkah. 7. Angka: jumlah pesanan, rating, waktu antar. 8. Testimoni bergaya chat WhatsApp. 9. Penutup dengan tombol pesan besar dan footer.
Langkah 3
Bagian ini yang paling menentukan kesan “mahal”. Tulis satu baris per gerakan: efek apa, di bagian mana, dan terjadi saat apa (saat halaman dibuka, saat di-scroll, atau terus-menerus). Pakai nama efek dari tabel kosakata di atas.
Blok GERAKAN
GERAKAN (kerjakan satu per satu) - Hero: kata pada judul masuk satu per satu dengan jeda, sedikit berputar lalu diam. Ilustrasi muncul bertahap, uap mengepul pelan. - Stiker teks melingkar yang berputar terus. - Judul besar yang berubah dari garis luar menjadi terisi saat di-scroll. - Perpindahan antar-bagian: warna melebar seperti lingkaran yang membesar saat di-scroll. - Kartu menu muncul dengan efek memantul kecil. - Tombol tambah: barang terbang melengkung ke ikon keranjang, jumlah dan total belanja ikut naik. - Paket hemat: bagian menempel di layar dan kartu bergeser ke samping saat di-scroll. - Cara pesan: garis putus-putus tergambar saat di-scroll dan ikon motor berjalan mengikutinya. - Angka menghitung naik mengikuti posisi scroll. - Testimoni: gelembung chat muncul bergantian dengan indikator mengetik. - Teks berjalan makin cepat saat scroll makin kencang.
Gerakan dan scroll
Minta animasi yang “mengikuti posisi scroll”, bukan yang “muncul sekali lalu selesai”. Animasi yang terkait scroll terasa seperti bagian dari halaman, bukan hiasan yang ditempel.
Langkah 4
Animasi yang mewah bisa rusak kalau teksnya meluber atau warnanya tidak terbaca. Beberapa aturan teknis sederhana mencegah itu.
- Minta satu file HTML dengan CSS dan JavaScript di dalamnya, supaya mudah dibuka dan dibagikan.
- Tulis “mobile first” dan sebut lebar acuan (misalnya 390 px). Banyak pengunjung membuka dari ponsel.
- Tulis larangan eksplisit: tidak boleh ada teks yang meluber, terpotong, atau saling menimpa.
- Minta kontras yang jelas, terutama saat latar berganti warna.
- Minta animasi memakai transform dan opacity supaya mulus, dan menghormati pengaturan “kurangi gerakan”.
- Untuk contoh atau latihan, minta tombol WhatsApp mengarah ke # supaya tidak memakai nomor sungguhan.
- Akhiri dengan perintah memeriksa sendiri: teks menimpa, bagian kosong, dan gerakan yang tidak terlihat.
Blok ATURAN TEKNIS
ATURAN TEKNIS - Satu file HTML, CSS dan JavaScript di dalamnya. Tanpa library, tanpa gambar dari luar. - Mobile first (lebar 390 px), tetap rapi di desktop. - Tidak boleh ada teks yang meluber atau terpotong. Kontras teks harus jelas di semua latar. - Semua animasi lewat transform dan opacity supaya mulus. Hormati pengaturan "kurangi gerakan" di perangkat. - Tombol "Pesan via WhatsApp" mengarah ke # (jangan memakai nomor sungguhan). Setelah selesai, cek sendiri: apakah ada teks yang saling menimpa, apakah ada bagian yang kosong, dan apakah tiap gerakan benar-benar terlihat.
Prompt lengkap
Ini gabungan kelima bagian. Ganti isi yang ada di dalam tanda kurung siku dengan usaha dan pilihan gayamu sendiri. Kalau ingin hasil yang mirip halaman contoh, biarkan seperti aslinya.
Prompt lengkap: landing page dengan animasi (ganti isi di [ ])
Buatkan 1 file HTML landing page untuk [jenis usaha + nama, misalnya: toko makanan online "Sambal Mak Ijah" (fiktif)]. KONSEP - Tujuan halaman: [misalnya: orang mau memesan lewat WhatsApp]. - Bahasa: Indonesia yang santai dan hangat. Semua nama, harga, dan testimoni adalah contoh (fiktif). GAYA - Terang dan berwarna, ala poster. Palet: [merah cabai, kuning kunyit, hijau daun, krem]. Teks memakai satu warna gelap saja. - Judul: huruf kapital besar, tebal, dan sempit. Font [Bricolage Grotesque dari Google Fonts, atau font tebal lain yang kamu suka]. Label dan harga memakai font monospace kecil. - Ilustrasi: gambar sendiri sebagai SVG (misalnya piring, toples, cabai, gelas), garis tepi tebal dan konsisten, tanpa foto. - HINDARI: latar gelap penuh, gradasi, efek cahaya menyala, tekstur noise, huruf serif miring, kartu kaca. BAGIAN HALAMAN (urut) 1. Hero: judul besar, kalimat penjelas, ilustrasi utama, tombol pesan. 2. Pita teks berjalan (ticker). 3. Pernyataan besar satu kalimat. 4. Menu favorit: 4 kartu dengan harga dan tombol tambah. 5. Paket hemat: kartu yang digeser ke samping. 6. Cara pesan: 3 langkah. 7. Angka: jumlah pesanan, rating, waktu antar. 8. Testimoni bergaya chat WhatsApp. 9. Penutup dengan tombol pesan besar dan footer. GERAKAN (kerjakan satu per satu) - Hero: kata pada judul masuk satu per satu dengan jeda, sedikit berputar lalu diam. Ilustrasi muncul bertahap, uap mengepul pelan. - Stiker teks melingkar yang berputar terus. - Judul besar yang berubah dari garis luar menjadi terisi saat di-scroll. - Perpindahan antar-bagian: warna melebar seperti lingkaran yang membesar saat di-scroll. - Kartu menu muncul dengan efek memantul kecil. - Tombol tambah: barang terbang melengkung ke ikon keranjang, jumlah dan total belanja ikut naik. - Paket hemat: bagian menempel di layar dan kartu bergeser ke samping saat di-scroll, kartu aktif sedikit membesar. - Cara pesan: garis putus-putus tergambar saat di-scroll dan ikon motor berjalan mengikutinya. - Angka menghitung naik mengikuti posisi scroll. - Testimoni: gelembung chat muncul bergantian dengan indikator mengetik. - Teks berjalan makin cepat saat scroll makin kencang. ATURAN TEKNIS - Satu file HTML, CSS dan JavaScript di dalamnya. Tanpa library, tanpa gambar dari luar. - Mobile first (lebar 390 px), tetap rapi di desktop. - Tidak boleh ada teks yang meluber atau terpotong. Kontras teks harus jelas di semua latar. - Semua animasi lewat transform dan opacity supaya mulus. Hormati pengaturan "kurangi gerakan" di perangkat. - Tombol "Pesan via WhatsApp" mengarah ke # (jangan memakai nomor sungguhan). Setelah selesai, cek sendiri: apakah ada teks yang saling menimpa, apakah ada bagian yang kosong, dan apakah tiap gerakan benar-benar terlihat.
Ganti konsepnya, pertahankan strukturnya
Struktur lima bagian ini bisa dipakai untuk usaha lain: jasa, kursus, portofolio, atau CV online. Yang kamu ganti adalah konsep, palet, ilustrasi, dan isi bagian. Susunan gerakannya tetap bisa dipakai.
Menjalankan
Kamu butuh alat AI yang bisa menghasilkan file HTML. Caranya hampir sama di semua alat:
- 1Tempel prompt lengkap ke alat AI pilihanmu.
- 2Kalau alatnya menampilkan pratinjau langsung (misalnya panel hasil di samping percakapan), lihat hasilnya di sana. Kalau tidak, minta AI memberikan kodenya.
- 3Simpan kodenya sebagai file bernama index.html, lalu buka dengan klik dua kali di peramban.
- 4Scroll pelan dari atas sampai bawah dan perhatikan tiap bagian. Catat apa yang kurang pas.
- 5Gunakan prompt revisi di bawah untuk memperbaiki satu hal per putaran.
Kemampuan tiap alat berbeda. Beberapa alat menghasilkan halaman yang langsung rapi, sebagian membutuhkan beberapa putaran revisi. Itu normal. Kalau halaman belum rapi pada percobaan pertama, itu bukan tanda prompt-mu gagal.
Kalau hasilnya berat atau patah-patah
Minta AI mengurangi jumlah gerakan yang berjalan bersamaan, atau menonaktifkan efek yang bergantung pada kursor di ponsel. Halaman yang halus dengan lima efek lebih baik daripada halaman patah-patah dengan sepuluh.
Revisi
Revisi satu hal per putaran. Kalau kamu meminta lima perubahan sekaligus, hasilnya sering ada yang terlewat atau saling bertabrakan.
Teks meluber atau terpotong
Periksa seluruh halaman di lebar 390 px. Temukan semua teks yang meluber, terpotong, atau saling menimpa, lalu perbaiki satu per satu. Jangan mengubah gaya atau gerakan. Sebutkan bagian mana yang kamu perbaiki.
Kontras kurang jelas
Periksa kontras teks di setiap latar, termasuk saat warna latar berpindah. Di mana teks sulit dibaca, ubah warna teks atau latarnya sampai jelas. Pertahankan palet yang ada.
Ilustrasi kurang bagus
Perbaiki ilustrasi [sebut bagian, misalnya ayam geprek]. Buat lebih rinci dengan garis tepi, warna, dan bayangan yang konsisten dengan ilustrasi lain. Jangan mengubah bagian lain.
Terlalu ramai
Kurangi gerakan: pertahankan hanya efek di hero, perpindahan warna antar-bagian, dan paket yang digeser. Hapus efek lain yang tidak perlu agar halaman terasa lebih tenang.
Gerakan kurang terlihat
Perjelas gerakan di bagian [sebutkan]. Perbesar jarak dan durasinya sedikit, dan pastikan efeknya mengikuti posisi scroll, bukan sekali jalan lalu berhenti.
Ganti usaha
Ganti konsep halaman ini menjadi [usaha baru] dengan nama [nama fiktif]. Pertahankan struktur bagian dan gerakan. Ganti ilustrasi, palet, copy, dan harga contoh sesuai usaha baru.
Panduan
- Memakai kata sifat (“keren”, “premium”) tanpa keputusan konkret, sehingga hasilnya generik.
- Tidak menulis daftar “hindari”, sehingga AI kembali ke gaya gelap dan serif yang paling umum.
- Menyebut terlalu banyak efek sekaligus, sehingga halaman terasa ramai dan berat.
- Tidak menyebut lebar ponsel, sehingga hasilnya bagus di laptop tapi berantakan di HP.
- Meminta banyak revisi dalam satu pesan, sehingga sebagian terlewat.
- Memakai nomor WhatsApp, nama, atau data pribadi sungguhan saat sedang bereksperimen.
- Langsung dipakai untuk usaha sungguhan tanpa memeriksa teks, harga, dan tautan satu per satu.
Ringkasan
Lima bagian prompt dan tujuannya
| Bagian | Yang kamu tulis | Kenapa penting |
|---|---|---|
| 1. Konsep | Usaha, tujuan halaman, bahasa | AI tahu halaman ini untuk apa |
| 2. Gaya | Warna, huruf, ilustrasi, dan daftar hindari | Mencegah hasil yang generik |
| 3. Bagian | Urutan section | AI tidak menebak struktur |
| 4. Gerakan | Satu baris per efek, lengkap dengan bagian dan pemicunya | Inilah yang membuat halaman terasa mahal |
| 5. Aturan teknis | Satu file, mobile first, tanpa meluber, kontras jelas, cek ulang | Animasi tidak merusak keterbacaan |
Contoh di artikel ini fiktif dan disederhanakan.
Apakah saya perlu bisa coding?+
Tidak untuk membuat dan membuka halamannya. Kamu menulis prompt dalam bahasa biasa dan menyimpan hasilnya sebagai file index.html. Untuk menerbitkannya sebagai situs sungguhan, kamu butuh hosting, dan itu mungkin memerlukan bantuan orang yang paham teknis.
Alat AI mana yang paling bagus untuk ini?+
Tidak ada satu jawaban pasti. Pilih alat yang bisa menghasilkan file HTML dan menampilkan pratinjau. Hasilnya bisa berbeda tiap alat dan tiap percobaan, jadi coba beberapa kali dan revisi satu hal per putaran.
Kenapa halaman saya tidak seanimatif contoh?+
Biasanya karena bagian gerakannya kurang spesifik atau tidak ada kata “mengikuti posisi scroll”. Tambahkan nama efek dan di bagian mana ia dipasang, lalu minta AI memperbaiki satu efek per putaran.
Boleh pakai untuk usaha sungguhan?+
Boleh, dengan syarat kamu memeriksa semua teks, harga, dan tautan, mengganti nomor WhatsApp contoh dengan nomormu, dan memastikan kamu punya hak atas ilustrasi serta font yang dipakai.
Kenapa tidak memakai foto?+
Karena AI tidak punya fotomu dan foto stok membuat halaman terasa generik. Ilustrasi SVG buatan sendiri lebih konsisten dan ringan. Kalau kamu punya foto produk sendiri, minta AI menaruhnya di tempat ilustrasi.
Apakah halamannya ringan?+
Halaman contoh berupa satu file tanpa gambar dan tanpa library, sehingga ringan. Efek yang terlalu banyak tetap bisa membuatnya berat di ponsel lama. Kalau terasa patah-patah, kurangi jumlah gerakan.
Bisa dipakai untuk CV atau portofolio?+
Bisa. Ganti konsep di bagian pertama, misalnya “CV online untuk desainer”, dan ganti bagian halamannya menjadi profil, pengalaman, proyek, dan kontak. Struktur gaya dan gerakan tetap bisa dipakai.
Halaman contoh “Sambal Mak Ijah” adalah usaha fiktif dan dibuat dengan bantuan AI untuk ilustrasi. Hasil dari AI bisa berbeda tiap percobaan dan bisa mengandung kekeliruan, jadi selalu periksa halamanmu sebelum dipakai untuk usaha sungguhan. Kemampuan tiap alat berbeda dan berubah dari waktu ke waktu.
Ivan Darmawan
Tutorial Claude AI buat kerjaan & bisnis