Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, kita lanjutkan sesi Artifacts. Hari ini kita membuat sesuatu yang selama ini terasa rumit: halaman web, tanpa menulis kode sendiri. Kita akan merencanakan isi halaman Kopi Senja, menulis permintaan, merevisi tampilannya, mengintip kode di baliknya, lalu menyiapkannya untuk dibagikan ke pelanggan.
Langkah 1: Merencanakan isi halaman
Halaman web satu halaman, sering disebut landing page, berisi semua informasi penting dalam satu gulir. Pengunjung tidak perlu berpindah-pindah halaman. Bagi Kopi Senja, artinya cukup satu tautan untuk dibagikan di bio Instagram, status WhatsApp, atau brosur. Pelanggan tidak perlu lagi bertanya menu dan harga satu per satu. Untuk usaha kecil, lima bagian sudah cukup. Pertama, pembuka: nama usaha, slogan singkat, dan suasana yang langsung terasa. Kedua, menu dan harga. Tampilkan produk andalan, bukan semua produk. Ketiga, testimoni, yaitu kata-kata pelanggan yang puas. Pastikan pelanggan sudah mengizinkan namanya ditampilkan. Keempat, cara pesan, biasanya berupa tombol yang membuka WhatsApp. Kelima, jam buka dan lokasi. Lima bagian ini menjawab hampir semua pertanyaan calon pembeli. Sebelum membuat halaman, Laras menyiapkan bahan teks dulu. Ia meminta tiga pilihan slogan pendek, maksimal enam kata, dengan suasana hangat dan santai. Claude memberi tiga pilihan. Laras memilih yang pertama karena langsung menyebut produk andalan dan kotanya. Slogan kedua ia simpan untuk dicoba nanti. Menyiapkan bahan seperti slogan, menu, dan testimoni lebih dulu membuat permintaan halaman web lebih lengkap, dan hasil pertamanya lebih mendekati keinginan.
Langkah 2: Menulis permintaan dan versi pertama
Sekarang permintaannya. Pertama, tujuan: halaman promosi Kopi Senja yang dibuka pelanggan dari HP lewat tautan di bio Instagram. Menyebut HP penting, karena tampilannya harus nyaman di layar kecil. Kedua, data: menu dan harga, jam buka, dan kota. Semua angka berasal dari Laras, bukan tebakan. Ketiga, bagian yang diinginkan, sesuai lima bagian yang sudah direncanakan. Keempat, gaya: hangat dan santai, dengan warna cokelat kopi dan krem, serta huruf besar yang mudah dibaca. Kelima, batasan. Nomor WhatsApp ditulis sebagai penanda, nomor WA dalam kurung siku, yang nanti diisi Laras sendiri. Dan jangan mengarang testimoni; Laras akan memberikan testimoni asli. Permintaannya memang lebih panjang daripada biasanya. Tapi semakin lengkap permintaan, semakin sedikit revisi yang dibutuhkan. Laras mengirim permintaan itu, ditambah dua testimoni asli dari Rina dan Budi yang sudah mengizinkan namanya dipakai. Halaman muncul di panel kanan. Dari atas: pembuka dengan nama dan slogan, empat kartu menu dengan harga, testimoni Rina dan Budi, jam buka dan ongkir, lalu tombol pesan via WhatsApp. Dalam satu menit, Kopi Senja punya halaman web. Laras tidak menulis satu baris kode pun. Ia hanya menjelaskan usahanya dengan jelas. Tapi versi pertama jarang langsung sempurna. Laras merasa tombol pesannya terlalu jauh di bawah dan kurang menonjol. Saatnya revisi.
Langkah 3: Merevisi tampilan
Laras menulis revisi yang spesifik: pindahkan tombol WhatsApp ke atas, tepat di bawah slogan, buat lebih besar, dan pastikan nyaman dibuka di HP. Versi dua muncul. Tombol pesan sekarang berada tepat di bawah slogan, jadi pelanggan langsung melihatnya. Claude juga mengganti slogan menjadi lebih hangat: teman ngopi sore di Bandung. Laras suka slogan barunya. Kalau tidak suka, ia cukup menulis kembalikan slogan seperti versi satu. Versi lama tetap tersimpan, jadi tidak ada yang hilang. Claude juga menjelaskan bahwa di layar HP kartu menu tersusun satu kolom. Penjelasan seperti ini penting, karena kebanyakan pelanggan Kopi Senja membuka tautan dari HP. Ada empat hal yang paling sering direvisi. Pertama, warna dan huruf. Sebut warnanya dengan jelas, misalnya latar cokelat tua dan tulisan krem. Kedua, urutan bagian, misalnya pindahkan testimoni ke bawah menu. Ketiga, teks: slogan lebih singkat, kalimat lebih santai, atau ajakan yang lebih jelas. Keempat, tampilan HP. Minta Claude memastikan tombol mudah ditekan dengan jempol dan tulisan tidak terlalu kecil. Tips penting: minta satu atau dua perubahan per pesan. Kalau sepuluh perubahan dikirim sekaligus, lebih sulit memeriksa mana yang sudah benar.
Langkah 4: Kode di balik halaman dan cara memakainya
Sekarang kita intip tab Kode. Halaman web terdiri dari HTML untuk isi dan CSS untuk tampilan. Yang terlihat di layar ini adalah bagian CSS, pengatur warna dan ukuran. Laras penasaran dan bertanya: bagian mana yang membuat menu tersusun satu kolom di HP? Claude menunjuk bagian paling bawah, aturan khusus untuk layar kecil seperti HP. Di atasnya ada bagian pembuka dan tombol pesan, yang mengatur warna latar, ukuran huruf, dan bentuk tombol. Laras tidak perlu mengubah kode ini sendiri. Kalau ingin mengubah tampilan, cukup minta lewat chat. Tab Kode berguna untuk rasa ingin tahu, dan untuk menyalin halaman ke tempat lain. Tab Kode juga berguna kalau suatu saat Anda bekerja dengan pembuat website profesional. Anda bisa memberikan kode ini sebagai titik awal, dan mereka tinggal menyempurnakan. Lalu bagaimana halaman ini sampai ke pelanggan? Ada tiga cara. Pertama, membagikan langsung dari Claude lewat fitur berbagi atau publikasi Artifact, bila tersedia di akun Anda. Cocok untuk mencoba dengan cepat. Kedua, menyalin atau mengunduh kode, lalu mengunggahnya ke layanan hosting web. Cara ini cocok untuk halaman permanen dengan alamat sendiri. Kita akan melakukannya bersama Claude Code di bagian mahir kelas ini. Ketiga, menempelkan bagian kode ke pembuat website yang sudah Anda pakai. Ketersediaan fitur berbagi bisa berbeda menurut paket dan versi, jadi cek dokumentasi resmi Claude. Untuk episode ini, cukup pastikan halaman sudah benar dan rapi di panel Artifact. Cara membagikan Artifact dengan aman kita bahas lengkap di episode berikutnya.
Langkah 5: Cek sebelum dibagikan
Sebelum halaman dibagikan, jalankan daftar cek ini. Pertama, harga, jam buka, dan ejaan sudah diperiksa. Satu angka yang salah di halaman publik bisa merepotkan. Kedua, penanda nomor WA sudah diganti nomor WhatsApp bisnis, dan tombolnya sudah dicoba. Laras memasukkan nomor itu sendiri, tidak lewat chat. Ketiga, halaman sudah dibuka dan dicoba di HP, karena di sanalah sebagian besar pelanggan membukanya. Keempat, testimoni asli dan sudah diizinkan oleh pelanggannya. Jangan pernah meminta Claude mengarang testimoni. Dan yang tidak boleh ada: data pribadi pelanggan atau informasi rahasia usaha. Halaman web bisa dilihat siapa saja. Setelah semua dicek, Laras membagikan tautan halamannya ke grup pelanggan setia Kopi Senja. Tiga menit kemudian ada yang membalas: halamannya rapi, dan ia langsung menekan tombol pesan. Pelanggan lain memesan dua cold brew lewat tombol yang sama. Satu tautan menjawab pertanyaan menu dan harga yang biasanya diulang puluhan kali setiap minggu. Hal yang sama bisa dibuat Nadia untuk klien-kliennya, atau Pak Hendra untuk halaman pendaftaran kelas Bimbel Cerdas. Polanya selalu sama: rencanakan, minta, revisi, cek, lalu bagikan.
Selesai!
Kita sudah merencanakan lima bagian halaman, menulis permintaan, merevisi tampilan, mengintip kode di baliknya, dan menyiapkan halaman untuk dibagikan dengan aman. Di episode berikutnya, episode penutup sesi Artifacts, kita mendalami cara merevisi Artifact, mengelola versinya, dan membagikannya dengan aman. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Rencanakan lima bagian halaman web untuk usaha atau kegiatan Anda
Buat halaman itu sebagai Artifact, lalu minta dua revisi tampilan
Minta Claude memastikan halaman nyaman dibaca di HP, lalu periksa sendiri isinya
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.281 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
