Kalian mungkin udah liat website gw yang baru di andreasrtobing.com. Itu gw revamp total—dan yang bikin gw excited: desain se-detail itu dibangun pakai AI. Di artikel ini gw bongkar cara bikin website profesional dari nol, step by step, plus prompt yang bisa kalian pakai langsung.
⚡ DIBANGUN PAKAI CLAUDE FABLE 5
Biar transparan: website baru gw itu gw bangun pakai Claude Fable 5—salah satu model AI paling baru & paling canggih dari Anthropic (rilis Juni 2026). Dari layout, animasi, sampai styling detail, AI yang bantu nulis semuanya. Poin-nya buat kalian: kalian gak perlu jadi web designer buat punya website yang keliatan mahal. Yang kalian perlu itu tau cara ngarahin AI-nya—dan itu yang gw ajarin di sini.
Sebelum masuk teknis, satu hal penting: bikin website itu bukan soal ngoding. Itu soal tau apa yang kalian mau, gimana strukturnya, dan gimana ngarahin tools (termasuk AI) buat mewujudinnya. Ngoding cuma salah satu cara—dan sekarang AI bisa handle bagian itu buat kalian.
Kenapa Website Masih Penting (di Era Sosmed)
"Ngapain bikin website? Kan udah ada Instagram/TikTok." Bener, tapi ada bedanya fundamental: sosmed itu tanah sewaan, website itu tanah milik kalian.
- Di sosmed, kalian main di aturan platform. Algoritma berubah, jangkauan turun, akun bisa kena banned. Website: kalian yang pegang penuh.
- Website itu "markas" kalian—tempat orang serius nyari info lengkap, bukti kredibilitas, dan ngambil aksi (beli, daftar, hubungin).
- Buat yang jualan atau bangun personal brand: website bikin kalian keliatan legit + profesional. Beda kesan antara "punya link toko online" vs "punya website sendiri".
Gak semua orang butuh website. Tapi kalau kalian serius bangun bisnis atau brand, cepat atau lambat kalian bakal butuh satu.
Build Website Step by Step
Ini urutan yang gw pakai—dan urutan yang gw saranin kalian ikutin. Jangan loncat ke "bikin"-nya duluan. Website yang bagus dimulai dari perencanaan, bukan dari kode.
1. Tentuin Tujuan & Isi (Fondasi)
Sebelum apa-apa: website ini BUAT APA? Satu tujuan utama yang jelas. Jualan course? Portfolio? Kumpulin email calon customer? Website dengan tujuan kabur bakal jadi biasa-biasa aja.
Yang harus kalian jawab dulu: tujuan utama (1 aja), target audience (siapa yang buka), section apa aja yang perlu (home, tentang, harga, kontak, dll), dan 1 aksi utama yang kalian mau visitor lakuin (CTA—Call To Action).
📍 Studi kasus: website gw: Tujuan tunggal website gw: bikin orang daftar course. Semua section ngarah ke situ—hero, bukti sistem yang jalan, testimoni, harga—dan CTA "Daftar Course" gw ulang berkali-kali. Satu tujuan, satu aksi.
2. Pilih Jalur: No-Code atau Code
Ada 2 jalan buat bikin website, dua-duanya sah, dan AI bisa bantu dua-duanya:
No-code (Framer, Webflow, Carrd, Wix): drag-and-drop, cepet, gak perlu ngoding sama sekali. Cocok buat mayoritas orang. AI bisa bantu generate konten + saranin struktur.
Code (kayak website gw—Next.js + Vercel): kontrol penuh, paling fleksibel, bisa bikin efek custom. Tapi lebih teknis. Kabar baiknya: AI (kayak Fable 5) bisa nulis kodenya buat kalian.
Saran buat pemula: Mulai dari no-code kecuali kalian emang pengen belajar coding atau butuh sesuatu yang sangat custom. No-code sekarang udah bisa bikin website yang bagus banget. Kalian bisa pindah ke code nanti pas butuh lebih. Website gw pakai code karena gw mau efek-efek spesifik + integrasi ke sistem agent gw—tapi itu kebutuhan gw, belum tentu kebutuhan kalian.
3. Desain: Identitas Visual + Struktur
Ini bagian yang nentuin website kalian keliatan mahal atau murahan. Dua hal:
Identitas visual: pilih warna (1-2 warna utama + netral, jangan pelangi), font (1 buat heading, 1 buat body—jangan kebanyakan), dan vibe (clean? premium? playful?). Konsistensi ini yang bikin keliatan profesional.
Struktur/layout: hierarki visual—yang paling penting harus paling menonjol (paling gede/paling atas). Hero dulu (headline + CTA), terus section pendukung ngalir ke bawah.
📍 Studi kasus: website gw: Identitas visual gw: hitam pekat + aksen amber (2 warna, konsisten di seluruh halaman). Font: Space Grotesk buat heading, Instrument Serif buat aksen, JetBrains Mono buat elemen "teknis". Vibe-nya sengaja: gelap, teknikal, premium—nyocokin ke positioning gw sebagai AI builder. Semua pilihan ini gw kasih tau ke AI, dan dia yang eksekusi konsisten.
4. Copywriting: Kata-kata yang Jual
Orang sering ngeremehin ini, padahal kata-kata lebih penting dari desain. Website cakep tapi pesannya gak jelas = gagal.
Kuncinya: headline yang jelas (apa value kalian dalam 1 kalimat), bahasa yang ngomong ke audience (bukan jargon sok keren), dan 1 CTA yang jelas + diulang. Visitor harus ngerti "ini apa & kenapa gw harus peduli" dalam 5 detik.
📍 Studi kasus: website gw: Headline gw: "Berhenti kerjain semuanya sendiri. Bikin sistemnya jalan buat kalian." Langsung nyentuh masalah audience (kewalahan kerja sendiri) + solusinya. Gak ada jargon. Satu kalimat, langsung ngerti.
5. Build Pakai AI
Sekarang baru generate. Mau no-code atau code, prinsipnya sama:
Kasih AI konteks selengkap mungkin: tujuan, audience, vibe, warna, font, konten, dan referensi website yang kalian suka. Makin lengkap konteks, makin bagus hasilnya.
Generate → review → iterate. Jangan expect sekali jadi. Bikin struktur dulu, pastiin oke, baru styling, baru polish. Dan minta AI jelasin bagian yang kalian gak ngerti—kalian tetep harus paham website kalian.
Prinsip penting: Iterasi bertahap, jangan sekaligus. Kesalahan umum: minta AI bikin seluruh website sekaligus dalam 1 prompt, hasilnya berantakan, terus bingung mau benerin dari mana. Mending: struktur dulu → oke → warna & font → oke → section per section → polish. Tiap tahap yang udah jalan jadi pondasi tahap berikutnya. (Ini prinsip yang sama kayak building agent—mulai simpel, tambahin bertahap.)
6. Domain, Hosting, Deploy: Bikin Live
Website kalian udah jadi—sekarang bikin bisa diakses orang di internet. Tiga hal:
Domain: nama alamat website kalian (misal namakalian.com). Beli di Namecheap, Cloudflare, dll—biasanya ratusan ribu per tahun.
Hosting: tempat website kalian "tinggal" online biar nyala 24/7. Buat code: Vercel / Netlify (ada free tier). Buat no-code: platform-nya udah include hosting.
Deploy: proses "naikin" website ke internet. Di platform no-code tinggal klik "publish". Buat code, AI bisa pandu prosesnya.
📍 Studi kasus: website gw: Website gw: Vercel buat hosting + deploy, Cloudflare buat domain/DNS. Tiap gw update, tinggal deploy dan langsung live. Buat pemula, kombinasi ini overkill—platform no-code jauh lebih simpel. Tapi prinsipnya sama: domain + hosting + deploy = website kalian online.
7. Polish: Responsive, Kecepatan, SEO
Ini yang misahin website "jadi" vs website "profesional":
Mobile responsive: MAYORITAS orang buka dari HP. Pastiin website kalian rapi di layar kecil, bukan cuma di laptop. Ini wajib, bukan opsional.
Kecepatan: website lambat = orang kabur sebelum kebuka. Optimize gambar (jangan upload foto 10MB), dll.
SEO dasar: kasih title + description yang bener biar ke-index Google + keliatan rapi pas di-share. AI bisa bantu ini.
8. Iterate Terus
Website gak pernah beneran "selesai". Yang bagus itu yang terus diperbaiki.
Pasang analytics (misal Google Analytics) buat liat orang ngapain di website kalian—section mana yang dibaca, di mana mereka kabur. Terus perbaiki yang kurang jalan, update konten, tambahin yang perlu. Website gw sendiri masih terus gw improve sampai sekarang.
Prinsip Website yang Bagus
Di luar langkah teknis, ini prinsip yang bikin website keliatan pro. Cek website gw sambil baca ini—kalian bakal ngenalin polanya:
✓ Value prop jelas dalam 5 detik
Begitu kebuka, visitor langsung ngerti "ini apa & buat siapa". Kalau butuh scroll lama buat ngerti, udah gagal.
✓ Hierarki visual yang jelas
Yang penting menonjol, yang pendukung lebih kecil. Mata visitor harus otomatis ke-guide ke hal yang paling penting (biasanya headline + CTA).
✓ Design system konsisten
Warna, font, jarak—konsisten di seluruh halaman. Inkonsistensi (font ganti-ganti, warna acak) itu yang bikin keliatan murahan.
✓ Social proof (bukti sosial)
Testimoni, angka, logo—apa pun yang nunjukin orang lain udah percaya. Di website gw, gw pajang testimoni member apa adanya (typo & caps lock termasuk) biar keliatan asli, bukan dibikin-bikin.
✓ CTA yang jelas & diulang
Satu aksi utama, diulang beberapa kali di sepanjang halaman. Jangan bikin visitor mikir "terus gw harus ngapain?".
✓ Cepet + rapi di HP
Dua hal yang sering dilupain pemula tapi paling kerasa. Website cakep tapi lambat/berantakan di HP = percuma.
Prompt Guide: Bikin Website Pakai AI
Ini prompt yang bisa kalian pakai langsung—dipecah jadi 3 tahap sesuai alur di atas (rencanain → build → poles). Ganti bagian [ISI] sesuai website kalian.
3 prompt siap pakai
Drop email kalian, 3 prompt-nya langsung kebuka.
Prompt buat rencanain → build → poles website kalian, tinggal copy-paste ke AI. Gratis, langsung kebuka di halaman ini.
Penutup
Bikin website profesional sekarang jauh lebih accessible dari dulu. Kalian gak perlu jadi designer atau programmer—kalian perlu tau apa yang kalian mau, gimana strukturnya, dan gimana ngarahin AI buat mewujudinnya. Website gw yang baru itu bukti: desain se-detail itu dibangun pakai AI (Fable 5), dan yang gw lakuin sebagian besar cuma ngarahin dengan jelas.
Inget urutannya: tujuan dulu, baru desain, baru build. Mulai dari yang simpel, iterate bertahap. Dan jangan lupa yang paling sering dilupain—responsive di HP + kata-kata yang jelas. Itu yang misahin website "jadi" dari website yang beneran kepake.
Mau bikin website tapi bingung mulai, atau stuck di tengah jalan? Mulai aja dari prompt pertama di atas—jelasin website yang kalian mau ke AI-nya, dan iterate pelan-pelan. Happy building! 🚀