Cara Ubah Ide Jadi Website Jalan Pakai ChatGPT + Codex (Rahasianya Bukan di AI-nya — di PRD-nya)

TAHAP 1 — Ubah ide jadi PRD

Buka ChatGPT (chat biasa dulu, belum Codex), dan paste:

Gw mau bikin website, dan sebelum dibangun gw mau kamu bantuin nulis
PRD (Product Requirements Document) yang jelas dulu.

Ide gw: [ISI - satu-dua kalimat, contoh: "direktori tools AI buat
UMKM Indonesia, dikelompokkan per kebutuhan (jualan, konten, admin)"]

Target pengunjung: [ISI - siapa dan lagi nyari apa]
Satu aksi utama pengunjung: [ISI - contoh: "klik link ke tools-nya"
atau "subscribe newsletter gw"]

Susun PRD-nya dengan bagian:
1. TUJUAN — satu paragraf, website ini sukses kalau apa
2. HALAMAN — daftar halaman + isi tiap halaman (spesifik)
3. STRUKTUR ITEM — buat direktori: field apa aja per item
   (nama, kategori, deskripsi, link, dst)
4. YANG TIDAK DIBANGUN DI V1 — sama pentingnya dengan yang dibangun
5. KRITERIA SELESAI — checklist yang bisa dicek satu-satu

Tanya gw maksimal 5 pertanyaan klarifikasi dulu SEBELUM nulis PRD-nya.
Tulis dalam bahasa yang gw pahami — ini dokumen kerja, bukan skripsi.

Jawab pertanyaannya, baca PRD-nya, dan edit sampai kalian setuju tiap barisnya. Bagian 4 (yang TIDAK dibangun) itu penyelamat: fitur login, komentar, pembayaran — kalau gak ditulis eksplisit "nanti", dia bakal nyelinap masuk dan bikin build-nya 3x lebih lama.

TAHAP 2 — Serahin PRD ke Codex

Buka Codex, mulai task baru, dan paste:

Bangun website sesuai PRD di bawah ini.

Ketentuan teknis:
- Pakai Astro (static site) — cepat, ringan, gampang di-deploy
- Data item direktori disimpan di file terpisah yang gampang gw edit
  (satu file per item, atau satu file daftar) — JANGAN ditanam keras
  di dalam kode halaman
- Wajib enak dibuka di HP
- Selesaikan sesuai KRITERIA SELESAI di PRD, jangan nambah fitur
  di luar itu

Kalau ada bagian PRD yang ambigu atau bertentangan, TANYA dulu —
jangan pilih sendiri diam-diam.

Setelah jadi, kasih gw: link preview + ringkasan apa yang dibangun,
dipetakan ke tiap poin KRITERIA SELESAI.

[TEMPEL PRD LENGKAP DI SINI]

Dua ketentuan di situ yang bakal kalian syukuri belakangan: data terpisah dari kode (nambah item ke direktori = ngedit satu file teks, bukan minta AI bongkar halaman) dan laporan yang dipetakan ke kriteria (kalian ngecek pakai checklist, bukan pakai perasaan).

TAHAP 3 — Review preview + revisi terarah

Buka preview-nya, dan review pakai PRD di tangan — bukan pakai selera sesaat:

1. Jalanin KRITERIA SELESAI satu-satu. Yang gak lolos, tandain nomornya.
2. Tes jadi pengunjung beneran: buka dari HP, cari satu item, klik aksi utamanya. Nyangkut di mana?
3. Baru soal rasa: warna, jarak, urutan section.

Terus revisinya kirim terarah, satu batch:

Revisi round 1, berdasarkan PRD:

Yang belum lolos kriteria:
- [ISI - contoh: "Kriteria 4: filter kategori belum jalan di HP"]

Perbaikan pengalaman:
- [ISI - contoh: "Tombol aksi utama ketutup menu pas di-scroll"]

Selera (kerjain terakhir, jangan sampai ngerusak yang udah lolos):
- [ISI - contoh: "Jarak antar-card kesempitan"]

Kerjain urut dari atas. Laporin per item: udah dibenerin gimana.

Pemisahan tiga level itu ngajarin AI-nya prioritas kalian — dan nyelametin kalian dari revisi selera yang gak ada habisnya sementara fungsi utamanya masih bolong.

TAHAP 4 — Tayangin

Dua jalur, pilih sesuai kondisi:

Jalur cepat — Codex/ChatGPT punya fasilitas buat langsung nayangin hasil build (preview link yang bisa dibagi, atau fitur publish kalau tersedia di akun kalian). Cukup buat validasi ide: bagiin linknya ke 10 calon pengguna, lihat reaksinya.

Jalur serius — kalau ini mau jadi aset jangka panjang dengan domain sendiri: alur GitHub → Vercel → domain yang udah kita bedah tuntas di panduan website sebelumnya berlaku persis sama di sini (TAHAP 3–4 di artikel itu). Astro dan Vercel itu pasangan yang mulus — minta Codex "siapin project ini buat deploy ke Vercel via GitHub, pandu gw step by step," dan dia yang ngurus detailnya.

Saran gw: jalur cepat dulu buat validasi, jalur serius setelah kebukti ada yang peduli.

Checklist sebelum sebar linknya

• Semua KRITERIA SELESAI di PRD lolos — dicek satu-satu, bukan diinget-inget
• Dibuka dari HP orang lain, bukan cuma punya kalian
• Nambah 1 item baru ke direktori udah kalian coba sendiri (dan ternyata gampang)
• Aksi utama kebukti bisa diklik sampai selesai
• Nol placeholder "[ISI]" atau teks contoh yang lupa keganti
• PRD final disimpan — itu dokumentasi proyek kalian

Kalau gagal

1. PRD-nya jadi panjang banget dan malah bikin overwhelmed. PRD kalian kebanyakan mikirin masa depan. V1 itu: halaman utama + halaman item + satu aksi. Pindahin sisanya ke bagian "TIDAK DIBANGUN DI V1" tanpa rasa bersalah — bagian itu memang tempat parkir, bukan tempat sampah.

2. Codex nanya terus, gak mulai-mulai. Bagus dari sisi kepatuhan (dia nurut aturan "tanya kalau ambigu"), tapi tanda PRD kalian masih bolong di struktur item atau kriteria selesai. Jawab pertanyaannya, terus minta ChatGPT (chat biasa) rapihin jawaban-jawaban itu masuk ke PRD — baru serahin ulang.

3. Hasilnya beda dari bayangan kalian padahal PRD udah jelas. Cek dulu: bedanya di hal yang TERTULIS di PRD, atau di hal yang cuma ada di kepala kalian? Kalau yang pertama, tagih pakai nomornya — itu gunanya kontrak. Kalau yang kedua: itu bukan salah AI, itu baris yang belum masuk PRD. Tambahin, revisi.

4. Nambah item direktori ternyata ribet. Ketentuan "data terpisah dari kode" gak kejalan. Minta eksplisit: "restrukturisasi biar semua item ada di satu folder data, satu file per item, dan kasih gw contoh nambah item baru step by step." Ini layak diperjuangin — direktori yang susah di-update bakal mati dalam sebulan.

5. Preview jalan, tapi pas mau serius deploy jadi bingung. Normal — deploy emang dunia sendiri. Jangan campurkan ke sesi build: buka panduan website bagian TAHAP 3–4, ikutin dari situ. Satu masalah, satu panduan.

Setelah website kalian jadi

Yang paling berharga dari alur ini bukan website-nya — tapi kebiasaan PRD dulu, baru build. Kalian baru aja ngerasain bedanya nyuruh AI pakai kontrak vs pakai harapan: revisinya terarah, "selesai"-nya jelas, dan scope-nya gak lari.

Kebiasaan itu portabel. Bikin iklan? Brand kit-nya itu PRD. Nyuruh agent riset? Job desc-nya itu PRD. Makin jelas kontraknya, makin murah revisinya — di semua tools, di semua model.

Ide berikutnya di kepala kalian sekarang jaraknya satu PRD dari jadi kenyataan. Tulis dulu, baru suruh bangun.