Membangun 10 Website dengan Claude AI Tanpa Latar Belakang Programmer

Sebelum mengenal Claude, saya banyak mengandalkan platform website builder. WordPress, Squarespace, Shopify, dan yang terbaru Plugo, semuanya pernah saya pakai. Polanya selalu sama: pilih template yang paling cocok, sesuaikan sedikit, pasang plugin atau aplikasi tambahan, lalu website siap jalan.

Enam bulan lalu, saya mulai menggunakan Claude AI, dan sejak itu cara kerja saya berubah total. Dalam dua bulan pertama, saya berhasil membangun sepuluh website, baik untuk bisnis maupun keperluan pribadi. Empat bulan berikutnya bukan lagi tentang membangun dari nol, melainkan merawat dan mengembangkan website yang sudah dipakai sehari-hari: memperbaiki bug yang baru ketahuan saat digunakan, mengoreksi bagian yang kurang nyaman, dan menambah fitur sesuai kebutuhan yang terus berkembang. Berikut kesepuluh website tersebut.

• 

  GOMUDA

  Toko online knitwear pria

  Belanja dari website atau aplikasi, stoknya tersambung langsung ke kasir di toko offline.

  Website PWA · TWA · Payment gateway · Stok tersambung POS

  gomuda.idPlay Store

• 

  WAKIKU

  Keseharian pribadi muslim

  Mencatat dan mengelola waktu, kerja, ibadah, dan keuangan.

  Aplikasi PWA & TWA

  wakiku.idPlay Store

• 

  Tandai

  Keuangan pribadi

  Catatan dana, aset & investasi, kelola keuangan untuk personal, ibu rumah tangga, hingga bisnis kecil.

  Aplikasi PWA & TWA

  tandai.idPlay Store

• 

  Tandai Team

  Tim & karyawan

  Kelola tim & karyawan: absensi, jadwal kerja, kinerja, hingga slip gaji.

  Website PWA

  team.tandai.id

• 

  Tandai POS

  Kasir toko

  Kelola penjualan offline dengan kasir Tandai, untuk fashion, retail, dan F&B UMKM.

  Website PWA

  pos.tandai.id

• 

  Tandai Fin

  Keuangan bisnis

  Mencatat dan mengelola keuangan bisnis UMKM lebih rapi, lengkap dengan laporan keuangannya.

  Website PWA

  fin.tandai.id

• 

  Tandiri

  Pendidikan

  Catatan diri untuk lembaga pendidikan Islam dan umum. Lembaga, pengajar, siswa, dan orang tua terhubung di dalamnya.

  Website PWA

  tandiri.id

• 

  aimoim

  Blog & brand

  Menulis pengalaman, membahas brand, dan membuat identitas untuk usaha yang sedang dibangun.

  Blog PWA

  aimoim.id

• 

  Gomuda Sales

  Penjualan internal

  Mencatat penjualan di semua saluran, online maupun offline.

  Website PWA internal

  Rahasia, tidak untuk umum

• G

  Gomuda Omni

  Stok internal

  Menyinkronkan stok antara marketplace dan website Gomuda.

  Website internal

  Rahasia, tidak untuk umum

Belum termasuk beberapa website kecil lainnya. Untuk sebagian besar website di atas, logo dan identitas brandnya juga saya buat sendiri bersama Claude, dengan cara yang saya jelaskan di langkah pertama alur kerja.

Sebagian besar website di atas berbentuk PWA (Progressive Web App), yaitu website yang bisa dipasang di HP layaknya aplikasi. Ikonnya muncul di layar utama, bisa dibuka dalam tampilan penuh tanpa bilah browser, dan sebagian fiturnya tetap berjalan meski sinyal sedang lemah. Beberapa di antaranya, seperti Gomuda, WAKIKU, dan Tandai, saya kembangkan lebih jauh menjadi aplikasi Android yang bisa diunduh di Play Store. Caranya akan saya jelaskan di bagian alur kerja.

Saya memang tidak pernah belajar pemrograman secara formal. Tapi sejak kuliah, saya terbiasa mengulik website sendiri, mulai dari membuat blog, lalu membangun website bisnis dengan WordPress dan platform lainnya, tanpa pernah menyerahkannya ke agensi web developer. Kebiasaan bertahun-tahun itulah yang membuat saya akrab dengan cara kerja website, terbiasa memperhatikan detail, dan punya selera sendiri tentang tampilan yang baik.

Ketika AI hadir, bekal itu yang membuat saya bisa mengarahkannya dengan tepat, sehingga hasilnya tidak berakhir menjadi "AI slop" yang generik. AI mempercepat, tapi pengalaman mengulik yang panjang tetap menjadi fondasinya.

Tulisan ini merangkum apa yang saya pelajari selama enam bulan tersebut: kelebihan dan tantangan membangun website sendiri, bekal yang dibutuhkan, langkah demi langkah yang sekarang saya pakai, hingga gambaran biayanya. Di bagian akhir, saya juga menyertakan perbandingan singkat dengan platform website builder yang pernah saya gunakan, sebagai gambaran bagi Anda yang sedang menimbang pilihan.

Kelebihan menggunakan Claude: bebas mendesain dan membangun sistem sesuai kebutuhan

Perbedaan paling terasa adalah kebebasan. Di website builder, kita terikat pada template dan ekosistem plugin. Dengan Claude, desain bisa dibuat sesuka hati, dan sistem website dibangun persis sesuai kebutuhan tanpa menumpuk plugin atau aplikasi pihak ketiga yang sering membuat website berat dan lambat.

Bagi saya ini sangat berarti. Pengalaman bertahun-tahun menjalankan toko offline dan ikut berbagai pameran membuat saya tahu persis fitur apa yang benar-benar dibutuhkan dan mana yang hanya pemanis. Dari situ lahir sistem-sistem yang dirancang sesuai cara kerja toko kami sehari-hari, bukan menyesuaikan diri dengan aplikasi buatan orang lain.

Kelebihan lain yang paling saya rasakan adalah semua sistem bisa saling terhubung. Website toko online bisa dihubungkan dengan POS di toko offline, sistem stok, hingga aplikasi keuangan dan tim, sesuai kebutuhan kita sendiri. Saat ada penjualan di toko, stok di website ikut berkurang. Saat ada pesanan online, datanya langsung masuk ke laporan yang sama.

Di website builder, menyambungkan sistem seperti ini biasanya membutuhkan aplikasi tambahan berbayar, dan hasilnya pun belum tentu sesuai cara kerja bisnis kita. Dengan membangun sendiri, semuanya dirancang untuk saling terhubung sejak awal, sehingga bisnis jauh lebih mudah dikelola dari satu tempat.

Tantangan menggunakan Claude: tidak semudah pasang plugin

Kebebasan membangun sendiri tentu ada harganya. Integrasi pihak ketiga seperti payment gateway, jasa pengiriman, email, dan hosting menjadi tantangan pertama. Di website builder, semua itu biasanya tinggal pasang plugin atau aplikasi.

Ketika membangun sendiri, di awal cukup merepotkan karena banyak hal yang harus dipelajari, mulai dari cara menyusun perintah (prompt) yang baik, cara deploy ke hosting, cara menjalankan function di server, sampai cara mengamankan website.

Mungkin karena saya memang suka hal yang rapi dan detail, tantangan ini justru membuat saya terus mengulik. Dari proses itu, saya menyimpulkan ada tiga bekal utama yang menentukan berhasil tidaknya membangun sesuatu dengan AI.

Tiga bekal utama dalam menggunakan AI seperti Claude

AI bisa menulis kode, membuat desain, dan menyelesaikan pekerjaan berhari-hari dalam hitungan jam. Tetapi hasil akhirnya tetap ditentukan oleh orang yang mengarahkannya. Menurut pengalaman saya, ada tiga hal yang tidak bisa digantikan AI.

1. 01IdeTitik awal yang bisa dikembangkan bersama Claude, tapi harus lahir dari masalah nyata yang kita alami sendiri.
2. 02TasteSelera desain yang membedakan website berkarakter dari hasil AI yang generik.
3. 03Teliti dan uletKemauan menguji tanpa lelah, karena hasil AI hampir tidak pernah sempurna di percobaan pertama.

01Ide: titik awal yang bisa dikembangkan bersama Claude

Semua berawal dari ide. Kabar baiknya, ide tidak harus datang dalam keadaan matang. Cukup mulai dari masalah nyata yang ingin diselesaikan, misalnya "saya butuh sistem stok yang tersambung antara toko offline dan website", lalu kembangkan bersama Claude Chat.

Di sinilah Claude Chat paling berguna. Ia bisa menjadi teman berdiskusi yang membantu memecah ide besar menjadi fitur-fitur, menyusun alurnya, menemukan hal-hal yang terlewat, bahkan mempertanyakan asumsi kita. Mintalah Claude menanyakan balik hal-hal yang belum jelas, atau membayangkan situasi yang bisa bermasalah, misalnya apa yang terjadi jika dua pelanggan membeli stok terakhir di saat bersamaan. Semakin tajam ide dikembangkan di tahap ini, semakin sedikit bongkar pasang di tahap berikutnya.

Ide terbaik tetap lahir dari pengalaman kita sendiri. Claude bisa mengembangkan ide, tetapi pemahaman tentang pelanggan, cara kerja toko, dan masalah sehari-hari hanya dimiliki oleh orang yang menjalaninya.

02Taste: selera desain yang membedakan

Taste atau selera desain adalah kemampuan menilai mana yang indah, mana yang pas, dan mana yang terasa salah meski sulit dijelaskan. Inilah yang membedakan website yang berkarakter dengan hasil AI yang generik, yang sering disebut "AI slop": rapi, tapi hambar dan mirip dengan ribuan website lain.

Taste memang sangat bergantung pada diri masing-masing, dan setiap orang punya selera yang unik. Tetapi taste bukan bakat yang mutlak. Ia bisa dilatih dan diakali dengan riset referensi. Kumpulkan contoh desain dari Pinterest, Behance, Dribbble, atau website brand yang Anda kagumi. Jangan hanya menyimpan, tapi perhatikan dan tanyakan kenapa desain itu terasa bagus. Apakah karena warnanya yang tenang, fotonya yang konsisten, atau ruang kosongnya yang lega? Semakin sering melakukan ini, semakin terlatih mata kita dalam menilai.

Referensi juga menjadi bahasa yang paling efektif untuk berkomunikasi dengan AI. Menjelaskan "saya ingin desain yang elegan" hasilnya bisa ke mana-mana, tetapi menunjukkan tiga referensi disertai alasan kenapa kita menyukainya akan memberi arah yang jauh lebih jelas. Pada akhirnya, taste adalah filter terakhir. AI bisa menawarkan sepuluh pilihan, tapi kitalah yang memutuskan mana yang layak dipakai dan sesuai dengan identitas brand.

Saya juga sadar, taste setiap orang berbeda. Desain yang menurut saya sudah bagus bisa jadi masih terasa kurang di mata orang lain, terutama mereka yang punya taste lebih tinggi dibanding saya. Karena itu, saya tidak pernah menganggap sebuah desain benar-benar selesai. Saya rutin meng-upgrade UI dan UX website secara berkala, sambil terus mencari ide desain yang lebih baik dan lebih nyaman digunakan, mulai dari palet warna, pilihan font, bentuk elemen, hingga penempatan tombol. Kabar baiknya, dengan Claude proses perbaikan ini jauh lebih ringan, sehingga website bisa terus tumbuh mengikuti selera yang juga ikut berkembang.

03Teliti dan ulet: menguji tanpa lelah

Hasil dari AI hampir tidak pernah sempurna di percobaan pertama. Akan selalu ada bug, tampilan yang berantakan di layar tertentu, atau alur yang membingungkan. Karena itu, bekal ketiga adalah ketelitian untuk menemukan kekurangan dan keuletan untuk terus memperbaikinya.

Pengujian yang saya lakukan mencakup tiga lapisan. Pertama, bug atau fungsi yang tidak berjalan, seperti tombol yang tidak merespons, data yang tidak tersimpan, atau perhitungan yang keliru. Kedua, tampilan atau UI. Ketiga, pengalaman pengguna atau UX. Dua yang terakhir ini sering tertukar, jadi perlu dijelaskan sedikit.

Kalau diibaratkan toko fisik, UI adalah dekorasi, etalase, dan cara produk dipajang, sedangkan UX adalah tata letak toko, alur pelanggan dari pintu masuk sampai kasir, dan seberapa cepat mereka dilayani. Toko yang cantik tapi membingungkan akan membuat pelanggan pergi, begitu pula toko yang mudah dijelajahi tapi berantakan akan terasa kurang meyakinkan. Keduanya harus berjalan bersamaan.

Cara menguji yang paling ampuh adalah memposisikan diri sebagai pelanggan. Coba beli produk dari awal sampai akhir menggunakan HP, karena sebagian besar pelanggan berbelanja lewat HP. Coba juga panel admin seolah-olah Anda staf yang baru pertama kali memakainya. Lebih baik lagi, minta orang lain mencobanya, karena kita yang membuat sering tidak menyadari bagian yang membingungkan. Setiap temuan catat dengan jelas, sertakan tangkapan layar, lalu berikan ke Claude untuk diperbaiki. Ulangi sampai tidak ada lagi yang mengganjal.

Mengenal Claude Chat, Claude Design, dan Claude Code

Sebelum masuk ke alur kerja, perlu dipahami bahwa Claude punya tiga ruang kerja yang bisa dipakai untuk membuat website. Sebenarnya ketiganya sama-sama bisa membuat desain website. Claude Chat bisa langsung membuatkan desain tanpa harus ke Claude Design, begitu pula Claude Code. Jadi silakan gunakan yang paling cocok dengan kebutuhan dan kebiasaan Anda.

Alur kerja yang saya gunakan

Setelah beberapa kali mencoba, inilah alur yang sekarang saya pakai, dari persiapan hingga website aman dan siap bersaing di mesin pencari.

Tahap persiapan

Sebelum mulai, pastikan perangkat yang digunakan cukup mumpuni, baik MacBook maupun PC Windows. Membangun website dengan Claude ternyata cukup berat untuk komputer. Proses berpikir AI memang berjalan di server Anthropic, tetapi komputer kita tetap bekerja keras menampilkan percakapan yang sangat panjang, merender desain di Claude Design, menjalankan Claude Code, dan pada saat yang sama menjalankan website di komputer untuk diuji.

Belum lagi proses build, Firebase CLI, puluhan tab browser untuk referensi dan dashboard, serta Android SDK jika membuat aplikasi TWA dengan Bubblewrap. Dengan spesifikasi pas-pasan, komputer mudah melambat bahkan hang di tengah pekerjaan, dan itu sangat mengganggu ritme.

Anggap saja ini investasi, sama seperti langganan Claude. Waktu yang terbuang karena komputer lambat jauh lebih mahal daripada selisih harga perangkatnya.

01Buat identitas brand terlebih dahulu

Sebelum menyentuh website, pastikan identitas brandnya sudah jelas: logo, palet warna, tipografi, dan filosofi di baliknya. Filosofi ini penting karena menjadi kompas untuk semua keputusan desain berikutnya. Apa nilai yang ingin disampaikan brand? Kesan apa yang ingin ditinggalkan di benak pelanggan? Kenapa memilih warna dan bentuk tertentu?

Kalau belum punya logo, saya biasanya membuatnya di Claude Design dengan beberapa referensi, lalu mengulang perintah secara detail sampai hasilnya sesuai harapan. Mintalah sekalian palet warna lengkap, yaitu warna utama, pendukung, dan netral beserta kode warnanya, serta penjelasan filosofinya. Setelah itu unduh logo dalam format SVG dan PNG agar bisa dipakai di mana saja. Dengan identitas yang matang, desain website nantinya tidak akan terasa generik.

02Siapkan domain

Saya lebih suka domain berakhiran .id karena terasa lokal dan mudah diingat. Domain bisa dibeli di berbagai penyedia; saya biasanya menggunakan CloudKilat. Nantinya DNS domain ini diarahkan ke Netlify agar terhubung langsung dan lancar dengan hosting website.

Tahap perancangan

03Rancang sistemnya di Claude Chat

Sebelum bicara desain, saya menyusun sistem yang dibutuhkan website tersebut: fitur apa saja, alur pengguna, data apa yang disimpan, siapa yang boleh mengaksesnya, dan layanan pihak ketiga apa yang perlu dihubungkan. Rancang juga sejak awal bagaimana website akan terhubung dengan sistem lain seperti POS dan stok. Semua didiskusikan dengan Claude hingga lengkap dan runut. Tahap ini menentukan kualitas tahap-tahap berikutnya.

04Kumpulkan referensi desain

Saya biasanya mengumpulkan referensi dari Pinterest atau sumber lain, minimal dua sampai tiga arah desain. Referensi ini membantu Claude memahami rasa visual yang saya inginkan, dan memudahkan saya membandingkan lalu memilih arah yang paling sesuai dengan identitas brand.

05Buat desain dan prototype dalam React + Vite

Sistem yang sudah matang, identitas brand, dan referensi desain saya bawa ke Claude Design. Di sini saya terus memperbaiki bagian yang kurang pas sampai terbentuk prototype yang benar-benar sesuai harapan.

Seperti dijelaskan sebelumnya, tahap desain ini juga bisa dikerjakan langsung di Claude Chat atau Claude Code. Untuk website statis seperti landing page atau blog aimoim.id ini, dan jika gambarannya sudah jelas, eksplorasi di Claude Design pun bisa dilewati.

06Lanjutkan dengan panel admin yang lengkap

Setelah seluruh tampilan dan sistem website yang dilihat pengguna jadi, barulah saya membuat panel admin. Urutan ini memudahkan, karena pada titik ini sudah jelas data apa saja yang perlu dikelola, dan panel admin bisa mengikuti gaya desain yang sama agar tetap konsisten dengan brand.

Panel admin adalah dapur tempat kita mengelola website setiap hari, jadi harus lengkap dan mudah dipakai, bukan sekadar pelengkap. Isinya menyesuaikan jenis website.

Pikirkan juga siapa yang akan memakainya. Kalau tim ikut mengelola, atur hak akses berbeda untuk pemilik dan staf. Semakin lengkap panel admin, semakin sedikit pekerjaan manual yang tersisa nanti.

Tahap pembangunan

07Sempurnakan di Claude Code dan deploy ke Netlify

Prototype dipindahkan ke Claude Code untuk disempurnakan dan dikoreksi kekurangannya. Untuk Netlify, saya cukup meminta Claude menyiapkan folder source dan folder dist (hasil build). Folder dist ini tinggal di-drag-and-drop ke Netlify tanpa perlu membuka Command Prompt. Setelah itu arahkan DNS domain ke Netlify, dan website sudah bisa diakses dengan domain sendiri.

08Siapkan Firebase dan hubungkan ke website

Firebase menjadi otak di balik website. Biasanya ada empat layanan yang saya atur.

1. 01AuthenticationUntuk login pengguna dan admin.
2. 02FirestoreDatabase untuk menyimpan produk, stok, pesanan, dan data lainnya.
3. 03StorageUntuk menyimpan file seperti foto produk.
4. 04FunctionsDipakai kalau website perlu berhubungan dengan pihak ketiga. Di gomuda.id, Functions memproses pembayaran melalui payment gateway yang memerlukan API, sekaligus menerima notifikasi pembayaran secara otomatis sehingga status pesanan langsung berubah begitu pelanggan membayar. Functions juga bisa dipakai untuk mengirim notifikasi email atau WhatsApp.

Agar website bisa terhubung dengan Firebase, ada konfigurasi npm yang perlu disiapkan. npm adalah pengelola paket bawaan Node.js, semacam toko aplikasi untuk komponen-komponen yang dibutuhkan website. Di dalam proyek React + Vite, paket Firebase perlu dipasang melalui npm, lalu konfigurasi proyek Firebase (berisi apiKey, projectId, dan sejenisnya dari Firebase Console) dimasukkan ke dalam satu file khusus yang menjadi penghubung antara website dan Firebase.

Claude bisa menyiapkan file ini beserta daftar paketnya, sehingga kita cukup mengisi nilai konfigurasinya. Untuk Functions, kita juga perlu memasang Firebase CLI melalui npm, lalu login ke akun Firebase dan menghubungkan folder proyek dengan proyek Firebase yang sudah dibuat. Semua perintahnya bisa ditanyakan ke Claude satu per satu, tinggal disalin ke Command Prompt.

Tahap pengamanan

Website yang cantik tapi tidak aman adalah bom waktu. Tahap ini tidak boleh dilewati, terutama untuk toko online yang menyimpan data pelanggan dan transaksi.

09Buat Firestore dan Storage Rules yang benar dan aman

Rules adalah aturan yang menentukan siapa boleh membaca dan menulis data di database maupun file di penyimpanan. Rules yang longgar sama saja dengan membiarkan pintu toko terbuka lebar: data pelanggan, pesanan, bahkan harga modal bisa dibaca atau diubah siapa pun.

Jangan pernah membiarkan database dalam mode uji coba (test mode) saat website sudah live. Setelah rules dipasang, uji kembali setiap fitur, termasuk mencoba mengakses data yang seharusnya tidak boleh diakses.

10Lindungi website dari spam dan penyalahgunaan

Formulir pendaftaran, kontak, checkout, dan login adalah sasaran empuk bot spam. Pasang reCAPTCHA pada formulir-formulir tersebut agar hanya manusia yang bisa mengirimkannya.

Jika diperlukan, aktifkan juga Firebase App Check, yang memastikan hanya website atau aplikasi kita sendiri yang boleh mengakses layanan Firebase, sehingga orang lain tidak bisa menumpang memakai database atau function kita dari luar. Untuk Functions yang menerima notifikasi dari payment gateway, pastikan Claude menambahkan verifikasi tanda tangan (signature) agar notifikasi palsu tidak bisa mengubah status pesanan menjadi lunas.

11Tambahkan CSP Header dan header keamanan lainnya

CSP (Content Security Policy) adalah daftar sumber yang diizinkan memuat script, gambar, dan konten lain di website kita. Dengan CSP, script berbahaya yang disisipkan pihak lain akan ditolak browser. Di Netlify, header ini cukup ditulis dalam file _headers atau netlify.toml, dan Claude bisa membuatkannya.

Sekalian minta header keamanan lain seperti perlindungan dari clickjacking (website kita disematkan diam-diam di website lain) dan paksaan koneksi HTTPS. Setelah dipasang, uji ulang seluruh website, karena CSP yang terlalu ketat bisa memblokir layanan yang sah seperti payment gateway, Google Analytics, atau Meta Pixel.

Tahap penyempurnaan

12Koneksikan dengan Analytics, Search Console, Google Merchant Center, Meta Pixel, Google Ads, dan alat lain yang diperlukan

Website yang sudah live perlu bisa diukur. Tanpa data, kita tidak tahu dari mana pengunjung datang, halaman mana yang diminati, dan iklan mana yang benar-benar menghasilkan penjualan.

Pastikan event penting seperti melihat produk, menambah ke keranjang, dan pembelian tercatat dengan benar, karena data inilah yang membuat iklan bekerja lebih efisien. Jangan lupa perbarui CSP Header agar alat-alat ini tidak ikut terblokir.

13Tahap akhir: optimalkan kecepatan dan SEO

Setelah semuanya berjalan, uji website di WebPageTest atau Google PageSpeed Insights. Hasil pengujiannya berikan ke Claude, lalu minta perbaikan untuk bagian-bagian yang masih bisa ditingkatkan. Ada lima hal yang menurut saya paling penting diperhatikan.

Pertama, alamat halaman (URL) harus rapi. Website React terkadang memakai URL berbentuk hash, misalnya gomuda.id/#/produk/sweater-rajut. Tanda pagar ini membuat Google kesulitan membaca setiap halaman sebagai halaman terpisah, sehingga halaman produk bisa tidak muncul di pencarian. Pastikan Claude membuat URL yang bersih seperti gomuda.id/produk/sweater-rajut, dan menambahkan aturan pengalihan di Netlify agar halaman tersebut tetap terbuka saat diakses langsung atau dimuat ulang. URL yang rapi juga lebih mudah dibaca dan dibagikan oleh pelanggan.

Kedua, meta deskripsi di setiap halaman. Meta deskripsi adalah ringkasan singkat yang muncul di bawah judul pada hasil pencarian Google. Setiap halaman, terutama halaman produk, sebaiknya punya judul dan meta deskripsi sendiri yang unik dan menggambarkan isinya, bukan satu deskripsi yang sama untuk seluruh website. Deskripsi yang menarik membuat orang lebih tertarik untuk mengklik.

Ketiga, foto produk yang ringan. Foto adalah penyebab paling umum website terasa lambat. Setiap foto produk sebaiknya dibuat dalam format WebP, atau JPG yang sudah dikompres, dengan ukuran yang sesuai kebutuhan tampilan. Foto dari kamera atau HP yang berukuran beberapa megabyte cukup diperkecil menjadi puluhan hingga ratusan kilobyte tanpa terlihat berbeda di layar. Tambahkan juga lazy loading, yaitu foto baru dimuat saat pengunjung menggulir ke bagiannya, kecuali foto utama di bagian paling atas halaman.

Keempat, teks alternatif (alt text) di setiap foto produk. Google tidak bisa melihat foto seperti manusia. Mesin pencari memahami isi foto dari teks alternatif yang kita tuliskan. Tanpa alt text, foto produk kita sulit muncul di Google Gambar, padahal banyak orang mencari produk lewat gambar. Alt text juga dibacakan oleh aplikasi pembaca layar untuk pengunjung dengan gangguan penglihatan, dan ditampilkan sebagai pengganti kalau foto gagal dimuat. Tulis alt text yang deskriptif dan spesifik, misalnya "Sweater rajut pria warna navy lengan panjang", bukan sekadar "foto1" atau "produk". Pastikan juga panel admin menyediakan kolom alt text saat mengunggah foto, agar tidak ada foto yang terlewat.

Kelima, sesuaikan target skor dengan jenis website. Untuk website yang penuh foto seperti gomuda.id, apalagi yang terhubung dengan Google Tag dan Meta Pixel, skor mobile di PageSpeed Insights akan sulit menembus angka 80. Setiap script pelacakan menambah beban, dan foto produk yang banyak tetap perlu dimuat. Dari pengalaman saya, skor mobile di atas 50 untuk website toko sudah cukup baik, selama pengalaman pengunjung sungguhan tetap terasa cepat. Lain halnya dengan blog seperti aimoim.id yang sebagian besar isinya berupa teks. Untuk website seperti ini, saya memastikan skor performanya di atas 90, karena tidak ada alasan untuk lebih rendah dari itu.

Yang perlu diperhatikan justru LCP (Largest Contentful Paint), yaitu waktu sampai elemen terbesar di layar, biasanya foto utama, selesai tampil. Perlu dipahami, angka LCP dari pengujian simulasi bisa terlihat tinggi karena PageSpeed Insights meniru HP kelas menengah dengan jaringan lambat. Karena itu, lihat juga data pengunjung sungguhan di bagian atas hasil PageSpeed Insights atau di laporan Core Web Vitals pada Search Console. Di data inilah Google menetapkan standarnya: LCP 2,5 detik atau kurang tergolong baik.

Selain itu, lengkapi juga sitemap dan robots.txt, serta data terstruktur (schema) untuk produk agar informasi harga dan ketersediaan bisa dibaca Google. Data terstruktur ini sekaligus membantu Google Merchant Center membaca produk kita dengan benar. Ulangi pengujian sampai hasilnya memuaskan. Website yang cepat dan mudah dibaca mesin pencari bukan hanya disukai Google, tetapi juga membuat pengunjung betah dan lebih mungkin membeli.

Aturan emas: data yang haram dibagikan ke Claude

Claude cukup tahu cara memakai sebuah kunci, tapi tidak perlu tahu isi kuncinya.

Selama proses membangun website, kita akan sering berurusan dengan kunci akses dan data rahasia. Mintalah Claude menulis kode yang membaca kunci dari tempat penyimpanan rahasia, lalu isi sendiri nilainya di sana, misalnya di Environment Variables Netlify atau fitur Secrets di Firebase Functions.

Soal biaya: langganan, model, dan pembayaran layanan

Selain perangkat yang mumpuni, ada beberapa biaya yang perlu disiapkan untuk membangun dan menjalankan website sendiri. Berikut rinciannya berdasarkan pengalaman saya.

Claude. Ini biaya terbesar, terutama di awal. Di bulan pertama pengerjaan, saya sengaja memaksimalkan langganan dengan paket Claude Max 20x, atau minimal Max 5x. Alasannya sederhana: proses mendesain dan membangun website itu panjang dan berulang-ulang. Dengan kuota yang besar, pekerjaan tidak terputus di tengah jalan, dan saya bisa menyelesaikan sebuah website dalam hitungan tiga hari hingga live.

Kenapa tidak paket lebih kecil lalu menambah biaya saat kuota habis? Saya pernah mencobanya, dan ternyata kuota cepat habis justru di fase paling krusial, yaitu saat memperbaiki bug. Bug pasti banyak, dan jauh lebih nyaman bekerja tanpa khawatir kehabisan kuota. Setelah website live dan berjalan stabil, mulai bulan kedua langganan cukup diturunkan ke Claude Pro seharga $20 per bulan untuk perbaikan kecil dan pengembangan fitur.

Tapi itu pilihan saya karena ingin cepat. Kalau tidak sedang dikejar waktu, Claude Pro seharga $20 per bulan sebenarnya sudah cukup untuk membangun dari nol. Bedanya cuma ritme: kuotanya lebih kecil, jadi begitu habis kita menunggu sampai pulih, lalu lanjut lagi. Websitenya tetap jadi, cuma tidak dalam hitungan tiga hari. Jadi pilihannya bukan antara bisa dan tidak bisa, melainkan antara membayar lebih supaya cepat selesai, atau membayar lebih sedikit dan mengerjakannya santai.

Untuk model, saya membaginya sesuai tahap pekerjaan. Di awal, untuk membuat logo dan desain website, saya menggunakan Fable 5. Kapasitas kecerdasannya membuat fondasi desain jauh lebih kokoh. Setelah prototype jadi, saya turun ke Opus 5 untuk pengerjaan lanjutan. Karena desainnya sudah ada, Opus 5 cukup meneruskan tanpa mengurangi kualitas, dan pemakaian kuotanya jauh lebih hemat dibanding Fable 5. Akhir-akhir ini Opus 5 menjadi model yang paling sering saya pakai.

Netlify. Biaya hosting di Netlify relatif ringan, sekitar $20 per bulan atau bahkan kurang, tergantung trafik website. Untuk website kecil dengan pengunjung yang belum banyak, paket gratisnya pun sering sudah cukup.

Firebase. Paket Blaze dibayar sesuai pemakaian dan sudah termasuk kuota gratis, sehingga untuk toko skala kecil hingga menengah biayanya relatif kecil. Satu hal yang perlu diwaspadai, karena dihitung berdasarkan pemakaian, tagihannya bisa membengkak kalau ada kesalahan kode atau serangan spam.

Domain. Domain .id dibayar tahunan, dengan kisaran ratusan ribu rupiah per tahun tergantung penyedianya. Biaya ini paling kecil dibanding yang lain, tetapi jangan sampai lupa diperpanjang, karena website akan langsung tidak bisa diakses kalau domainnya kedaluwarsa.

Cara membayar layanan. Kebanyakan layanan di atas meminta pembayaran dengan kartu kredit, yang tidak semua orang punya atau ingin gunakan. Solusi yang saya pakai adalah kartu debit Jago Syariah. Kelebihannya, kita bisa membuat beberapa kartu digital (virtual) yang masing-masing terhubung ke kantong berbeda, dan kartu digital ini bisa dipakai sebagai pengganti kartu kredit untuk berlangganan Claude, Netlify, Firebase, maupun layanan lain yang berhubungan.

Cara ini juga membantu mengatur keuangan. Saya bisa memisahkan kantong khusus untuk biaya operasional digital, sehingga pengeluaran untuk website tidak tercampur dengan kebutuhan lain. Satu kartu digital untuk satu atau beberapa layanan juga memudahkan pemantauan tagihan, dan kalau terjadi masalah, kartu tersebut cukup diblokir tanpa mengganggu kartu lainnya.

Sekilas dibandingkan dengan platform website builder

Tabel berikut bukan ulasan lengkap setiap platform, melainkan rangkuman dari pengalaman saya menggunakan masing-masing platform, ditambah kisaran harga saat tulisan ini dibuat.

Angka saja belum cukup, karena yang membedakan kelima platform ini bukan cuma harganya. Berikut rangkuman pengalaman saya memakai masing-masing.

1. 01WordPressHarga. Softwarenya gratis. Hosting mulai puluhan ribu rupiah per bulan, ditambah tema dan plugin premium yang umumnya berbayar dalam dolar.Kelebihan. Sangat fleksibel, pilihan tema dan plugin sangat banyak, plugin SEO lengkap, dan bisa jadi toko online dengan WooCommerce.Kekurangan. Makin banyak plugin makin berat. Perlu rutin update agar tidak dibobol, hosting dan perawatan diurus sendiri, dan biaya plugin premium bisa menumpuk.Cocok untuk. Blog, website konten, dan bisnis yang siap merawat website secara rutin.
2. 02ShopifyHarga. Basic $29 per bulan kalau bayar tahunan, atau $39 per bulan kalau bayar bulanan, hingga Advanced $299–$399 per bulan. Ditambah biaya transaksi kalau memakai payment gateway pihak ketiga.Kelebihan. Fitur toko online sangat lengkap, stabil, banyak aplikasi tambahan, dan cepat jadi.Kekurangan. Biaya dalam dolar, banyak aplikasi berbayar terpisah, desain terikat tema, dan ada potongan per transaksi.Cocok untuk. Toko online yang ingin cepat jalan dengan fitur standar yang matang.
3. 03SquarespaceHarga. Sekitar $16–$99 per bulan kalau bayar tahunan. Paket termurah untuk toko dikenai biaya transaksi.Kelebihan. Template sangat elegan, mudah dipakai, dan semua dalam satu paket.Kekurangan. Kustomisasi terbatas, fitur toko kurang lengkap, integrasi pembayaran dan pengiriman lokal Indonesia terbatas, dan biaya dalam dolar.Cocok untuk. Portofolio, website profil, dan brand yang mengutamakan tampilan.
4. 04PlugoHarga. Gratis untuk maksimal 30 produk, Basic Rp149.900 per bulan, Business Rp449.900 per bulan. Biaya transaksi 3,4%–8% tergantung paket.Kelebihan. Buatan lokal, sudah terhubung dengan pembayaran dan ekspedisi Indonesia, berbahasa Indonesia, biayanya dalam rupiah, dan ada paket gratis.Kekurangan. Desain dan fitur terbatas pada yang disediakan platform, jumlah produk dibatasi per paket, dan potongan transaksi cukup besar di paket kecil.Cocok untuk. UMKM yang ingin toko online praktis dengan ekosistem lokal.
5. 05Claude AIHarga. Bulan pertama saat membangun: Max $100–$200 per bulan kalau ingin cepat, atau tetap Pro $20 per bulan kalau dikerjakan santai. Setelah live: Claude Pro $20 per bulan, Netlify $20 per bulan atau kurang, Firebase Blaze sesuai pemakaian dengan kuota gratis, dan domain .id sekitar ratusan ribu rupiah per tahun.Kelebihan. Desain bebas tanpa batas template, sistem dibuat persis sesuai kebutuhan, website toko bisa terhubung langsung dengan POS dan stok, ringan tanpa tumpukan plugin, tanpa potongan transaksi dari platform, biaya bulanan murah setelah live, dan bisa dikembangkan jadi aplikasi Android.Kekurangan. Perlu belajar di awal, biaya bulan pertama cukup besar, harus teliti menguji dan memperbaiki bug, keamanan dan perawatan jadi tanggung jawab sendiri, serta butuh taste desain dan perangkat yang mumpuni.Cocok untuk. Bisnis dengan kebutuhan spesifik yang ingin punya sistem sendiri dan siap terlibat langsung dalam prosesnya.

Soal harga, ada satu hal yang sering luput diperhatikan: biaya langganan bukan satu-satunya biaya. Shopify, Squarespace, dan Plugo mengenakan potongan per transaksi di paket tertentu, dan nilainya ikut membesar seiring naiknya penjualan. Di WordPress, biaya justru sering datang dari plugin premium yang ditambah satu per satu.

Dengan Claude, polanya terbalik. Biaya terbesar ada di bulan pertama saat membangun. Setelah website live dan berjalan stabil, biayanya turun drastis. Tidak ada potongan per transaksi dari platform. Yang tetap ada hanyalah biaya payment gateway, dan biaya ini memang berlaku di platform mana pun.

Tidak ada platform yang paling sempurna untuk semua orang. Setiap pilihan punya harga yang harus dibayar, entah dalam bentuk uang, waktu, atau keterbatasan.

Penutup: mana yang lebih baik?

Jawabannya tergantung kebutuhan. Kalau Anda ingin website cepat jadi, standar, dan tidak mau repot urusan teknis, platform website builder masih pilihan yang masuk akal. Tetapi kalau Anda punya kebutuhan spesifik, ingin desain yang benar-benar mencerminkan brand, ingin semua sistem bisnis saling terhubung, dan siap meluangkan waktu untuk belajar serta menguji, membangun sendiri dengan Claude memberi kebebasan yang tidak bisa ditandingi template mana pun.

Bagi saya, semuanya kembali ke tiga bekal utama tadi: ide yang dikembangkan dengan matang, taste yang terus dilatih, serta ketelitian dan keuletan dalam menguji. Ditambah kebiasaan mengamankan website sejak awal dan menjaga kerahasiaan kunci akses, AI akan benar-benar menjadi alat yang mempercepat pekerjaan. Tetapi hasil terbaik tetap lahir dari orang yang tahu persis apa yang ia bangun dan untuk siapa.

Kalau ingin melihat hasilnya dari dekat, Buat Brand memuat sebagian karya di atas beserta cakupan pengerjaannya, dan Bahas Brand berisi pembahasan brand lain yang jadi bahan belajarnya.