vibe.SMK AL-MUHIBBINContoh nyataBedanyaCoba sendiriMulai
123456
SMK Al-Muhibbin
Pengenalan untuk pemula

Bikin aplikasi,
tanpa hafal kode.

Namanya vibe coding. Kamu cerita maunya apa, AI yang menuliskan kodenya. Scroll ke bawah, ikuti perjalanan satu ide sampai jadi.

Langkah 1 · Ide

Mulai dari masalah kecil.

Semua berawal dari kebutuhan sehari-hari. Catatan pelajaran berantakan, absen masih manual, bekal santri sering telat.

CONTOH IDE“Aku mau halaman catatan pelajaran yang rapi dan bisa dibuka di HP.”
Langkah 2 · Prompt

Ceritakan ke AI.

Vibe coding = menjelaskan keinginan dengan bahasa biasa, lalu AI yang menulis kodenya. Perintah yang kamu ketik disebut prompt.

PROMPT“Buatkan halaman web catatan Matematika bab Persamaan Linear. Judul besar, rumus dalam kotak, dan 3 soal latihan di bawah. Warna biru.”
Langkah 3 · Hasil

Kode muncul dalam detik.

AI menulis ratusan baris yang biasanya butuh berjam-jam. Kamu cukup membuka hasilnya dan melihat langsung.

HASILSebuah file catatan.html yang bisa dibuka di browser, tanpa instal apa pun.
Langkah 4 · Revisi

Kurang pas? Bilang lagi.

Di sinilah “vibe”-nya. Kamu melihat hasil, merasakan, lalu mengarahkan. Ulangi sampai sesuai.

REVISI“Hurufnya terlalu kecil. Tambah tombol cetak. Rumusnya warna oranye.”
Langkah 5 · Cek

Tanya ustad dulu.

AI bisa salah. Jangan telan mentah-mentah: tunjukkan hasilnya ke ustad atau guru, biar dia yang menilai layak atau tidak.

KEBIASAAN BAIKCoba semua tombol. Tanya ustad kalau ragu. Minta AI: “Jelaskan baris ini artinya apa.”
Langkah 6 · Jadi

Aplikasi jalan.

Dari ide jadi barang nyata. Tapi semakin paham dasarnya, semakin tepat arahanmu dan semakin cepat kamu menemukan salahnya.

Lihat contoh nyata ↓
Contoh nyata di sekitar kita

Apa saja yang bisa dibuat dengan vibe coding?

Klik salah satu kartu untuk melihat contoh prompt, hasilnya, dan hal yang harus diwaspadai.

Bedanya apa?

Coding biasa, vibe coding, dan belajar dengan AI.

Coding biasaVibe coding
CaranyaMenulis kode sendiri, baris demi baris, dalam bahasa pemrograman.Menjelaskan keinginan dengan bahasa sehari-hari. AI menulis kodenya.
Yang dibutuhkanHafal aturan bahasa pemrograman.Jelas soal maunya, teliti menguji, sabar merevisi.
KecepatanLebih lambat, tapi kamu tahu setiap barisnya.Sangat cepat, tapi isinya bisa tidak kamu pahami.
RisikonyaCapek dan lama di awal.Hasil terlihat jadi, padahal ada yang salah atau tidak aman.
Cocok

Prototipe, alat bantu kecil, catatan, halaman informasi, konten, dan latihan belajar.

Hati-hati

Aplikasi yang memegang uang, data pribadi, atau wajah orang. Perlu dicek ahli sebelum dipakai sungguhan.

Syarat

Tetap belajar dasarnya. Tanpa paham dasar, kamu tidak bisa tahu kapan AI salah.

Giliran kamu

Coba prompt pertamamu.

Salin salah satu prompt di bawah, tempel ke AI pilihanmu, lalu amati hasilnya. Setelah itu revisi dua kali.

LEVEL 1 · MUDAH

Buatkan satu halaman web berisi jadwal piket kelas saya. Ada 5 hari, tiap hari 4 nama. Tampilannya rapi dan warna ceria.

LEVEL 2 · SEDANG

Buatkan aplikasi web pengingat belajar. Saya bisa isi mata pelajaran dan jam, lalu muncul daftar pengingat hari ini. Simpan datanya di browser.

LEVEL 3 · TANTANGAN

Buatkan kalkulator kasir sederhana untuk kantin. Pilih menu, jumlah, lalu tampil total dan kembalian. Jelaskan cara kerjanya setelah selesai.

Prompt disalin