Panduan Web AI

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

AI = juru masak. Lo = chef. Tulis dulu mau apa, baru suruh AI, cek di HP, baru online.

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

Jawab di notes / chat Hermes:

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

Pilih satu cara:

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

Pilih satu tool bangun: Cursor, OpenCode, Cline, Hermes, v0…

Kasih AI: rencana + arah tampilan + “mobile dulu + 1 tombol WA”.

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

Biasanya: GitHub + Cloudflare Pages (atau Vercel). Dapat URL → kirim ke orang / portfolio.

Hermes bisa bantu deploy kalau lo minta di chat TB3.

Ibarat warung

Rencana = catat pesanan · Tampilan = gambar plating · Bangun = masak · Cek = cicip · Live = antar ke meja.

Pilih alat

Aturan emas

1 tool desain + 1 tool bangun per website. Ganti di project berikutnya, bukan di tengah jalan.

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

R artinya Recipe (resep). Contoh kombinasi tool. Lo boleh pakai stack sendiri.

Saran A · Hemat

Desain: Open Design / s2c · Bangun: OpenCode · Pasang: Hermes + CF Pages

Saran B · Ada ref

Desain: s2c dari screenshot · Bangun: Cursor atau OpenCode · Poles: Cline kalau macet

Saran C · Stack lo

Isi sendiri: Desain = ___ · Bangun = ___ · Pasang = ___

Hermes di mana?

Chat TB3 = tempat lo bilang “lanjut rencana / bangun / deploy”. Mini app ini cuma panduan. Tool desain/bangun di PC atau app lain.

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

Tulis 5 baris rencana (siapa, CTA, 4 section) Pilih 1 tool desain + 1 tool bangun (catat di notes) Generate / tulis page (meski masih jelek) Buka di HP, perbaiki 3 hal paling mengganggu Dapat URL live (Pages/Vercel) atau file HTML kirim ke diri sendiri

Centang tersimpan di HP ini saja.

Kirim ke Hermes (template)

Salin, ganti […], tempel di chat TB3.

Setelah 1 site selesai

Baru boleh pikir: “perlu papan project?” “perlu SOP?”. Sistem tanpa pengalaman 1 ship = pusing.