Step 1: Login ke Laman
Pertama, buka laman.click dan login dengan akun Google atau X (Twitter) kamu.
Setelah login, kamu akan masuk ke dashboard project.
Step 2: Buat Project Baru
Klik tombol "New Project" untuk membuat project baru. Berikan nama project, contoh: "Portofolio" atau "Landing Page".
Step 3: Editor Project
Sekarang kamu masuk ke Editor. Kamu akan lihat 4 panel terpisah: HTML, CSS, JavaScript, dan Data.
Jangan mulai coding secara manual, gunakan AI untuk hasilkan kode program. Lanjut ke step berikutnya.
Step 4: Download dan Tambahkan Skill Laman
Supaya output AI langsung sesuai format Laman, tambahkan dulu skill khusus Laman di Claude.
Download skill Laman:
Cara menambahkan skill di Claude:
- Buka Claude dan masuk ke menu Skills.
- Klik Add Skill lalu upload file
laman-code-guidelines.zip. - Aktifkan skill ini sebelum kamu meminta AI membuat kode.
Setelah skill aktif, lanjut ke step berikutnya untuk generate kode.
Step 5: Generate Kode dengan AI
Pakai prompt ini atau modifikasi sesuai kebutuhan kamu, dan jangan lupa panggil skill yang sudah kita masukkan dengan /laman-code-guidelines.
Prompt template:
Buatkan halaman bisnis sederhana dengan daftar harga. Output harus 4 blok kode terpisah (HTML, CSS, JavaScript, Data) siap copy-paste.
Isi halaman:
- Hero berisi nama bisnis, tagline, dan tombol CTA "Hubungi Kami"
- Bagian daftar harga dengan 3 paket: Basic, Pro, Enterprise
- Tiap paket berisi harga, 3 fitur, dan tombol "Pilih Paket"
- Footer dengan alamat, email, dan nomor WhatsApp
Gaya visual:
- Tampilan modern, bersih, dan profesional
- Warna utama biru #1E40AF dengan aksen netral
- Responsive mobile-first
/laman-code-guidelines
Tips untuk prompt yang lebih baik:
- Spesifik: "warna brand biru #1E40AF, font Poppins, spacing 24px" jauh lebih baik dari sekadar "bagus dan professional"
- Kasih referensi: Jika bisa, attach screenshot halaman yang kamu suka. AI akan mengerti proporsi dan layout yang kamu maksud
- Detail konten: Kasih teks atau list detail yang harus ada di halaman, jangan biarkan AI mengarang sendiri
Step 6: Paste Kode ke Editor
AI akan menghasil 4 kode program. Setiap blok paste ke panel yang sesuai di Laman:
- Kode HTML → paste ke panel HTML
- Kode CSS → paste ke panel CSS
- Kode JavaScript → paste ke panel JS (jika ada)
- Data JSON → paste ke panel Data (Raw)
Laman akan langsung me-render preview seiring kamu paste. Kalau ada error atau tidak sesuai, kamu bisa edit langsung di editor atau minta AI revisi prompt-nya.
Step 7: Preview Hasil
Lihat preview di sisi kanan atau klik tombol Preview. Pastikan:
- Responsive dengan mengecek di mobile, tablet, desktop
- Warna dan font sesuai dengan keinginan kamu
- Semua konten tampil dengan baik
- Link dan button berfungsi
Kalau perlu edit, bisa langsung di editor atau minta AI buat versi revisi, terus paste ulang.
Step 8: Iterasi dengan AI (Jika Perlu)
Tidak puas dengan hasil pertama? Gampang. Balik ke AI dan kasih feedback:
- "Galeri terlalu renggang, kurangi spacing jadi 12px dan bulatkan sudut jadi 16px"
- "Warna hero terlalu gelap, ganti jadi tone yang lebih soft"
- "Tambahkan smooth scroll dan fade-in animation saat halaman muat"
AI akan generate versi baru. Paste ulang ke editor.
Proses ini bisa diulang sampai kamu benar-benar puas.
Step 9: Publish Laman Kamu
Ketika sudah sempurna, klik tombol Publish. Kemudian akan muncul dialog untuk mengatur URL project kamu. Atur slug untuk project kamu, misalnya portofolio atau creator-landing. Link kamu nanti jadi [username].laman.click/portofolio.
Jika sudah selesai mengatur URL project, klik tombol "Publish Project" pada dialog. Kamu sudah berhasil membuat sebuah Microsite, akses URL tersebut untuk meninjau.
Link kamu: [username].laman.click/[slug]
Untuk otomasi penuh tanpa perlu copy-paste, baca artikel Otomasi dengan Claude dan Laman Connector.