A.I.T.A
Modul 8 · A.I.T.A

Vibe Coding

Di akhir modul ini kamu bisa membuat 1 halaman web sederhana dengan AI coding assistant, tanpa menulis kode manual dari nol.

Critical thinking, bukan cuma cara pakai

Bab 1 / 3

Intro vibe coding

Selama ini kalau dengar kata "coding", bayangannya mungkin layar hitam penuh baris teks aneh, tanda kurung di mana-mana, dan butuh bertahun-tahun belajar bahasa pemrograman sebelum bisa bikin apa-apa. Modul ini mau membongkar bayangan itu. Ada cara membuat halaman web yang jalan, terlihat bagus, dan bisa dipakai orang lain — tanpa kamu harus menghafal satu baris sintaks pun. Namanya vibe coding.

Istilah ini sebenarnya sederhana: kamu ngobrol dengan AI coding assistant seperti kamu ngobrol dengan orang yang jago bikin website, tapi dia yang menuliskan semua kodenya. Kamu bilang "aku mau halaman dengan judul besar di atas, tiga kotak fitur di bawahnya, dan tombol daftar warna hijau", dan AI menerjemahkan itu jadi kode yang beneran jalan di browser.

1Deskripsikan websiteDalam bahasa biasa
2AI tulis kodeHTML/CSS/JS otomatis
3Lihat hasilnyaPreview langsung di browser
4Minta perbaikanUlangi sampai sesuai
Vibe coding tetap berupa siklus coba-lihat-perbaiki, bukan sekali prompt langsung jadi.

Bukan kamu yang belajar bahasa mesin — AI-nya yang menerjemahkan bahasa manusia jadi bahasa mesin.

Kenapa ini bukan trik "sekali klik jadi"

Ini bagian yang penting dipahami dari awal, supaya ekspektasimu tidak meleset: vibe coding bukan sulap. Kamu tidak bisa cuma bilang "bikinin aku website ekskul" sekali, terus langsung dapat hasil sempurna yang siap dipakai.

Perhatian

Yang lebih realistis terjadi: kamu minta sesuatu, AI membuatkan versi pertama, lalu kamu lihat hasilnya — dan hampir selalu ada bagian yang belum pas. Warnanya kurang cocok, teksnya kepanjangan, tombolnya kegedean, atau posisi elemen berantakan di layar HP.

Di situ kerja sebenarnya dimulai:

  1. Minta. Kasih tahu AI apa yang kamu mau — bukan "kurang bagus", tapi sespesifik mungkin.
  2. Lihat. Cek hasilnya, klik-klik tiap bagian, jangan cuma dilihat sekilas dari jauh.
  3. Perbaiki. Kasih tahu AI apa yang salah — misalnya "tombol daftarnya kegedean, kecilin, dan pindahkan ke tengah".
  4. Ulangi. AI perbaiki, kamu cek lagi, ada yang masih kurang pas, kamu minta perbaikan lagi.

Proses ini disebut iterasi, dan justru siklus minta-lihat-perbaiki inilah inti dari vibe coding — bukan permintaan tunggal yang langsung sempurna.

Membaca, bukan cuma menerima

Kebiasaan yang paling penting dibangun sejak bab pertama ini: jangan asal terima apa pun yang AI hasilkan. Ini menyambung langsung dari yang sudah kamu pelajari soal AI di modul-modul awal — AI bisa terlihat yakin sambil sebenarnya keliru.

Contoh

Dalam konteks coding, ini bisa berarti AI membuat halaman yang terlihat oke di layar tapi tombolnya sebenarnya tidak berfungsi, atau teksnya salah ketik, atau ada bagian yang dia asal isi karena kamu tidak kasih instruksi jelas.

Jadi kebiasaan yang harus kamu bangun: setiap kali AI selesai bikin atau mengubah sesuatu, coba dulu — klik tombolnya, isi formnya, buka di ukuran layar HP kalau memungkinkan. Baca juga penjelasan singkat yang biasanya diberikan AI tentang apa yang baru saja dia lakukan, jangan langsung skip. Kalau ada yang aneh atau tidak sesuai maksudmu, itu bahan buat instruksi perbaikan berikutnya, bukan sesuatu yang kamu biarkan saja karena "yang penting sudah ada tampilannya".

Modul ini akan membawamu langsung praktik: bab berikutnya kamu bikin landing page sungguhan untuk ekskul A.I.T.A kamu sendiri, dan bab penutup modul mengembangkannya jadi lebih besar lagi. Tapi semua itu bergantung pada satu kebiasaan yang kamu bangun dari sekarang — jangan cuma minta dan terima, tapi minta, lihat, dan perbaiki terus sampai benar-benar sesuai yang kamu mau.

1 / 4