Mulai di sini
Cara bikin website pakai AI — tanpa pusing
Ini buku panduan, bukan papan project. Baca urut, coba 1 website sederhana, baru pikir sistem.
Inti 1 kalimat
Jalan pintas
Yang sering bikin pusing
- Langsung buka 5 tool AI bareng
- Belum nulis “buat siapa / tombol apa”
- Bikin “sistem agency” sebelum pernah selesai 1 site
- Mengira mini app = tempat generate website
Urutan belajar (rekomendasi)
- Baca tab Alur (5 menit)
- Baca tab Alat — pilih 1 desain + 1 bangun
- Tab Latihan — kerjakan 1 landing fiktif
- Baru nanti: papan project / SOP (kalau butuh)
5 langkah
Ini “tahap”. Bukan nama tool. Tool diganti bebas; urutan ini tetap.
1 · Rencana
Tulis dulu, baru AI
- Buat siapa? (contoh: tourist di Bali)
- Orang harus klik apa? (WA / form / booking) — 1 saja
- Contoh site yang disuka (link) + yang dibenci
- Halaman apa saja atas→bawah (hero, harga, lokasi…)
Tanpa ini, AI tebak-tebakan → cantik tapi gak nyambung.
2 · Tampilan
1 arah visual saja
- Ada foto/screenshot ref → tool “gambar jadi kerangka” (s2c dll)
- Cuma teks → tool explore desain (Open Design / Fable / sejenis)
Jangan 3 app desain bareng di 1 project.
3 · Bangun
Jadiin page yang bisa dibuka
4 · Cek
Cicip di HP
- Buka di HP / lebar 375px
- Tombol utama kebuka?
- Teks kebaca? Gambar pecah?
- Kesan “template AI” berlebihan? rapiin
5 · Live
Pasang online
Hermes bisa bantu deploy kalau lo minta di chat TB3.
Ibarat warung
Pilih alat
Aturan emas
Peran (bukan merek)
| Peran | Buat apa |
|---|---|
| Catat / orkestrasi | Chat Hermes (TB3) |
| Ide tampilan | Open Design, Fable, Superdesign… |
| Dari screenshot | screenshot-to-code (s2c) |
| Bangun kode | OpenCode, Cursor, Cline, Hermes |
| Online | Cloudflare Pages / Vercel |
Kalau situasinya…
| Situasi | Arah |
|---|---|
| Cuma brief teks | Explore desain dulu |
| Ada foto ref bagus | Dari gambar → kerangka |
| Mau hemat | OpenCode / model murah + Hermes |
| File berantakan | Cursor / Cline |
| Bingung deploy | Minta Hermes di chat |
Resep = saran, bukan hukum
Saran A · Hemat
Saran B · Ada ref
Saran C · Stack lo
Hermes di mana?
Latihan 1 project
Jangan bikin sistem dulu. Selesaikan satu landing fiktif end-to-end.
Project latihan (pilih 1)
- Barbershop Denpasar — CTA WA booking
- Kafe kopi Bali — CTA menu + WA
- VR theme park fiktif — CTA WA (mirip Zoneout, rebrand)
Checklist latihan
Centang tersimpan di HP ini saja.