Lewati ke konten
Vibe Coding 101

Teknik Prompting Efektif

Sebuah prompt yang berkualitas tinggi mengikuti formula yang terstruktur. Jika kamu lupa langkah-langkahnya, ingat jembatan keledai dari Google: Thoughtfully, Create, Really, Excellent, Inputs (T-C-R-E-I).

Framework ini terdiri dari 5 pilar utama:

  1. Task (Tugas, Persona, dan Preferensi Format)
  2. Context (Konteks, Audiens, Batasan)
  3. References (Referensi atau Contoh Nyata)
  4. Evaluate (Evaluasi Output)
  5. Iterate (Iterasi & Penyempurnaan)

1. Anatomi Framework T-C-R-E-I

Section titled “1. Anatomi Framework T-C-R-E-I”

1. Task (Tugas & Peran)

Section titled “1. Task (Tugas & Peran)”

Tentukan secara spesifik peran AI (persona) dan apa tugas utama yang harus diselesaikan.

2. Context (Konteks & Batasan)

Section titled “2. Context (Konteks & Batasan)”

Berikan informasi latar belakang yang relevan dan batasan teknologi (constraints), seperti: “Gunakan HTML & CSS murni tanpa framework”.

3. References (Referensi & Format)

Section titled “3. References (Referensi & Format)”

Sertakan contoh potongan kode, skema data JSON, atau template desain yang ingin ditiru polanya.

4. Evaluate & Iterate (Evaluasi & Iterasi)

Section titled “4. Evaluate & Iterate (Evaluasi & Iterasi)”

Periksa output yang dihasilkan (cek console error, kesesuaian styling, fungsionalitas), lalu berikan prompt lanjutan untuk menyempurnakannya.

Contoh Kasus Prompting

Section titled “Contoh Kasus Prompting”

Contoh 1: Ide Konseptual & Perencanaan (Framework Google)

Section titled “Contoh 1: Ide Konseptual & Perencanaan (Framework Google)”
[PERSONA]
You are an expert chef and a party planner.


[TASK]
- Help me surprise a friend with a fun dinner menu idea.
- Provide a structured 3-course menu with preparation tips.


[CONTEXT]
- Age: 20 years old university student.
- Preferences: Big fan of beef and pork.
- Restrictions: Does not like any alcohol drinks.
- Favorite food styles: Korean barbecue and Chinese hotpot.


[OUTPUT FORMAT]
1. Appetizer / Starter
2. Main Course (Interactive style)
3. Non-alcoholic Dessert & Mocktail Pairing

Contoh 2: Vibe Coding (Aplikasi Presensi)

Section titled “Contoh 2: Vibe Coding (Aplikasi Presensi)”
[PERSONA]
Bertindaklah sebagai asisten UI/UX dan Frontend Web Developer.


[TASK]
- Buatkan antarmuka web untuk aplikasi absensi presensi di Google Apps Script (file Index.html lengkap dengan styling CSS).
- Pastikan form absensi terhubung langsung ke backend Google Sheets.


[CONTEXT]
- Formulir presensi: Nama Lengkap, Status (Hadir, Izin, Sakit), dan Catatan.
- Tabel riwayat: Menampilkan Waktu, Nama, Status badge, Catatan, dan Tombol hapus baris.
- Desain bertema Deep Charcoal (#121212 - #181818) yang responsif untuk HP dan laptop.


[OUTPUT FORMAT]
File Index.html lengkap (struktur form, tabel presensi, dan CSS di dalam tag <style>...</style>).

Cara Melakukan Perbaikan (Evaluate & Iterate)

Section titled “Cara Melakukan Perbaikan (Evaluate & Iterate)”

Jika hasil pertama dari AI belum pas, jangan panik atau mengetik ulang dari awal. Cukup beritahu apa yang perlu diubah dengan bahasa sehari-hari:

  1. Memperbaiki tampilan atau tata letak: 
    Tampilannya sudah bagus! Tapi tombol "Kirim Presensi" terlalu kecil di layar HP. Tolong buat tombolnya lebih lebar dan beri jarak sedikit dari form di atasnya.
  2. Memperbaiki jika ada data yang belum muncul: 
    Saya sudah klik kirim dan datanya masuk ke Google Sheets, tapi di tabel web belum otomatis muncul. Tolong periksa bagian Code.gs agar data terbaru langsung tampil setelah disubmit.

Checkpoint

Section titled “Checkpoint”
  • Memahami 5 pilar T-C-R-E-I (Thoughtfully Create Really Excellent Inputs).
  • Mampu mendefinisikan Persona dan Format yang jelas dalam setiap instruksi.
  • Siap menyusun prompt terstruktur untuk proyek di modul berikutnya.