✦ AizuDemy
Beranda › Tutorial › Prompt Engineering Buat Vibe Coding: Cara Ngomong ke AI Biar Hasilnya Nggak Ngaco (Part 3/10)

Prompt Engineering Buat Vibe Coding: Cara Ngomong ke AI Biar Hasilnya Nggak Ngaco (Part 3/10)

A
Aizu Dev
16 jam lalu · 7 views
#Tutorial
Prompt Engineering Buat Vibe Coding: Cara Ngomong ke AI Biar Hasilnya Nggak Ngaco (Part 3/10)

Mengapa Prompt Engineering Adalah Core Skill Vibe Coding

Banyak developer pemula menganggap vibe coding sekadar mengetik keinginan asal-asalan ke kolom chat Large Language Model seperti ChatGPT, Claude, atau GitHub Copilot, lalu berharap AI secara ajaib menghasilkan aplikasi skala produksi. Realitas di lapangan tidak seperti itu. Saat instruksi diberikan secara samar, AI mengisi kekosongan informasi dengan tebakan acak. Hasilnya berupa kode dipenuhi bug, pustaka usang, serta celah keamanan fatal.

Prompt engineering dalam vibe coding bukan tentang merangkai kalimat puitis, melainkan seni menyusun spesifikasi teknis yang terstruktur, eksplisit, dan kaya konteks. AI beroperasi sebagai eksekutor yang sangat patuh terhadap panduan yang Anda berikan. Jika panduan tersebut kabur, hasil eksekusinya akan serba tidak pasti. Menguasai teknik komunikasi ini dapat memangkas waktu debugging hingga 80 persen, menekan tingkat halusinasi model, dan menjaga konsistensi arsitektur basis kode.

Perubahan paradigma utama yang harus dipahami adalah menggeser persepsi terhadap kolom prompt. Kolom input AI bukan bot instruksi kasual, melainkan berkas spesifikasi fungsi sementara (temporary spec file). Makin tinggi derajat kejelasan variabel input, batasan eksekusi, serta ekspektasi output, makin dekat hasil kode yang digenerasi dengan kebutuhan standar produksi.

Anatomi Prompt yang Efektif untuk Vibe Coding

Prompt teknis yang tangguh memiliki struktur anatomi jelas agar AI memahami batasan dan ekspektasi yang diinginkan. Terdapat empat komponen utama dalam anatomi prompt berkualitas tinggi:

1. Peran dan Konteks (Role & Context)

Beri tahu AI posisi peran dan lingkungan sistem tempat kode berjalan. Sebutkan tech stack, versi spesifik bahasa pemrograman, kerangka kerja, serta pustaka pendukung yang digunakan. Penetapan peran membantu AI mempersempit distribusi statistik token yang paling relevan dengan standar industri yang Anda sasar.

Contoh konkret: Bertindaklah sebagai Senior Backend Developer yang ahli dalam arsitektur microservices berbasis Node.js v20 dan TypeScript v5.3. Aplikasi menggunakan Express.js dengan Prisma ORM.

2. Tugas Utamanya (Clear Task)

Definisikan tugas menggunakan kata kerja aksi yang spesifik. Hindari instruksi ambigu seperti "buatkan fitur user" atau "rapikan kode ini". Gunakan batas cakupan kerja yang jelas agar AI tidak membuat asumsi liar mengenai logika bisnis yang tidak diminta.

Contoh konkret: Buat fungsi Server Action pada Next.js 14 untuk memperbarui profil pengguna, mencakup skema validasi data serta logika penanganan unggah foto ke AWS S3 bucket.

3. Batasan dan Aturan (Constraints & Rules)

Batasan adalah benteng pertahanan utama dari kode buruk. Tentukan pustaka yang boleh dan dilarang dipakai, pola penulisan kode seperti functional programming vs OOP, aturan penanganan kesalahan, batas memori, serta standar penamaan variabel.

Contoh konkret: Dilarang menggunakan pustaka eksternal selain Zod untuk validasi. Semua penanganan error harus melempar Custom AppError. Gunakan async/await tanpa callback tradisional.

4. Format Output yang Diharapkan (Expected Output)

Tentukan bentuk luaran yang dibutuhkan secara presisi. Apakah Anda hanya butuh blok kode TypeScript tanpa teks pengantar, skema basis data Prisma, unit test lengkap dengan Jest, atau struktur hierarki direktori folder?

Contoh konkret: Berikan luaran berupa satu blok kode TypeScript utuh beserta seluruh pernyataan import yang diperlukan. Jangan sertakan penjelasan naratif di luar komentar di dalam kode.

Perbandingan Direct: Contoh Prompt Jelek vs Prompt Bagus

Berikut adalah contoh perbandingan konkret bagaimana perbedaan struktur instruksi memengaruhi kualitas kode yang dihasilkan oleh Large Language Model.

Skenario 1: Membuat Endpoint Autentikasi

Prompt Jelek:

Bikin fungsi login buat Express js pake JWT

Mengapa buruk? AI tidak mengetahui pustaka validasi yang dipakai, struktur respons JSON yang diinginkan, jenis hashing kata sandi yang digunakan, serta mekanisme penanganan error pada aplikasi. AI akan menebak sendiri dan sering kali menggunakan metode hashing usang seperti bcrypt standar tanpa salt kustom atau menyimpan rahasia JWT secara hardcoded.

Prompt Bagus:

Kamu adalah Senior Backend Developer Node.js. Buat handler controller untuk endpoint POST /api/v1/auth/login menggunakan Express.js dan TypeScript.

Aturan & Spesifikasi:
1. Gunakan Zod untuk validasi skema request body (email harus format email valid, password minimal 8 karakter).
2. Cari pengguna di PostgreSQL menggunakan Prisma ORM.
3. Bandingkan password menggunakan library argon2.
4. Jika valid, buat JWT access token (expiresIn: 1h) berisi payload userId dan role, serta refresh token (expiresIn: 7d).
5. Jika kredensial salah, kembalikan HTTP Status 401 dengan format JSON: { "success": false, "message": "Kredensial tidak valid" }.
6. Gunakan blok try-catch dan teruskan error yang tidak ditangani ke middleware error handler via next(error).
7. Tulis hanya kode TypeScript clean tanpa penjelasan naratif berlebihan.

Hasil: AI memberikan kode modular, siap pakai, aman, terstruktur, dan sesuai standar arsitektur backend modern tanpa membutuhkan refactoring besar-besaran.

Skenario 2: Refactoring dan Optimasi Performa Kode

Prompt Jelek:

Bisa tolong perbaiki kode ini biar gak lemot?
[tempel kode di sini]

Mengapa buruk? Kata "lemot" sangat subjektif. AI tidak tahu apakah bottleneck terjadi pada alokasi memori CPU, query basis data N+1, keterbatasan I/O, atau kompleksitas algoritma Big O.

Prompt Bagus:

Bertindaklah sebagai Performance Engineer. Analisis fungsi TypeScript berikut yang mengalami bottleneck saat memproses 10.000 data array di server Node.js.

Tugas:
1. Identifikasi masalah kompleksitas waktu Big O pada algoritma saat ini.
2. Refactor kode menggunakan pendekatan asynchronous batch processing atau struktur data Map/Set untuk meningkatkan kecepatan eksekusi.
3. Pastikan alokasi memori tetap efisien dan hindari blocking pada Event Loop.
4. Berikan komentar ringkas pada baris kode yang diubah untuk menjelaskan alasan optimasinya.

Berikut kodenya:
[tempel kode di sini]

Teknik Iterasi: Dari Output Acak Menjadi Kode Presisi

Jika AI tidak langsung menghasilkan solusi sempurna dalam satu kali proses, hindari menghapus prompt awal lalu memulai dari nol. Gunakan alur kerja bertahap berikut:

1. Scaffolding (Kerangka Dasar Pertama)

Minta AI membuat struktur utama atau fungsi dasar terlebih dahulu. Hindari meminta seluruh penanganan kasus khusus dalam satu perintah tunggal. Fokus pada fondasi logika aplikasi terlebih dahulu.

2. Incremental Layering (Penambahan Fitur Bertahap)

Setelah fungsi dasar berjalan dan terverifikasi di lingkungan lokal, tambahkan instruksi baru secara spesifik. Pendekatan ini menjaga batas context window AI tetap jernih.

Contoh instruksi susulan: Sekarang tambahkan rate limiting maksimum 5 percobaan per menit pada handler login yang baru saja kamu buat menggunakan Express-rate-limit dan Redis.

3. Feedback Loop & Error Feeding (Siklus Umpan Balik Error)

Jika kode menghasilkan error saat dijalankan, salin teks stack trace error dan pesan terminal secara utuh ke AI tanpa mengubah atau memotong teks. Hindari menceritakan ulang error dengan bahasa sendiri karena detail baris dan tipe error bisa hilang.

Saat menjalankan kode di atas, terminal mengembalikan error berikut:
[paste error stack trace utuh]

Jelaskan penyebab utama error ini dalam 1 kalimat, lalu berikan perbaikan kodenya saja.

4. Negative Prompting (Instruksi Larangan Explicit)

Beritahu AI secara jelas apa yang tidak boleh dilakukan. Langkah ini sangat ampuh mencegah AI menggunakan metode yang sudah deprecated atau cara instan yang tidak aman.

Contoh: Dilarang menggunakan type 'any' pada TypeScript. Dilarang melakukan mutation langsung pada React state. Dilarang menyimpan credential di dalam source code.

Template Prompt Reusable untuk Developer

Simpan dan gunakan template prompt standar berikut untuk mempercepat alur kerja harian Anda.

Template 1: Implementasi Fitur Baru

[Peran]: Senior [Frontend/Backend] Developer ([Stack Teknologi & Versi])
[Tugas]: Buat fitur [nama fitur] pada file [nama_file/komponen].

[Persyaratan Teknis]:
- Pustaka yang digunakan: [Library A, Library B]
- Arsitektur: [Clean Architecture / Feature-First / dsb.]
- Error handling: Harus mencakup case [Case 1, Case 2]

[Format Response]: Berikan kode lengkap beserta import yang dibutuhkan.

Template 2: Debugging Bug Membandel

[Konteks]: Saya mengalami bug pada [nama fitur/komponen].
[Perilaku Diharapkan]: [Penjelasan apa yang seharusnya terjadi]
[Perilaku Saat Ini]: [Penjelasan apa yang justru terjadi]
[Pesan Error/Logs]:
```
[Paste Log Error]
```
[Kode Terkait]:
```
[Paste Kode]
```
[Tugas]: Identifikasi akar masalahnya dan berikan kode solusinya.

Template 3: Unit Testing & Integration Testing

[Konteks]: Saya ingin membuat tes otomatis untuk fungsi berikut menggunakan [Jest / Vitest / Playwright].
[Tugas]: Buat unit test lengkap mencakup happy path dan edge cases (nilai null, input invalid, network timeout).

Kode yang akan diuji:
[Paste Kode]

Kesalahan Umum Saat Prompting dan Cara Menghindarinya

Berikut jebakan yang sering membuat sesi vibe coding berantakan beserta langkah solusinya:

  • Prompt Multi-Intent (Terlalu Banyak Keinginan Sekaligus): Meminta AI membuat basis data, API backend, tampilan UI frontend, dan integrasi pembayaran dalam satu prompt tunggal menghasilkan potongan kode menggantung. Pecah tugas menjadi beberapa langkah kecil.
  • Mengabaikan Versi Framework: AI sering mencampur sintaks versi lama dan baru seperti React Class Component dengan Hooks, atau Next.js Pages Router dengan App Router. Selalu sebutkan versi framework secara eksplisit.
  • Kepercayaan Buta (Blind Trust): Menyalin kode tanpa membaca logika atau menjalankannya di lingkungan lokal berisiko tinggi. AI dapat mengalami halusinasi dengan memanggil fungsi atau pustaka yang tidak tersedia.
  • Lupa Memberikan Konteks Tipe Data: Pada bahasa berjenis statis seperti TypeScript, Rust, atau Go, ketiadaan definisi skema data membuat AI memprediksi tipe data secara acak sehingga memicu type mismatch error.

Checklist Sebelum Push Prompt ke AI

Sebelum mengirimkan prompt ke sistem AI, pastikan seluruh poin berikut telah terpenuhi:

  • [ ] Sudah menentukan peran AI dan versi tech stack secara jelas?
  • [ ] Apakah tugas utama dijelaskan dengan spesifik tanpa istilah ambigu?
  • [ ] Sudah mencantumkan pustaka wajib atau pustaka yang dilarang?
  • [ ] Apakah format keluaran seperti kode saja, penjelasan, atau unit test sudah ditegaskan?
  • [ ] Jika melakukan debugging, apakah pesan error dan kode terkait sudah dilampirkan secara utuh?

Langkah Berikutnya: Belajar Vibe Coding Part 4

Menguasai prompt engineering vibe coding memberikan kontrol penuh atas kualitas hasil generasi kode AI. Instruksi yang terstruktur menghasilkan kode yang presisi, aman, dan sesuai standar proyek.

Ketika skala basis kode proyek bertambah besar, sistem AI dapat kehilangan konteks akibat batasan ruang memori context window. Pada Belajar Vibe Coding Part 4 dari 10, pembahasan berlanjut ke strategi Context Window Management & File Architecture agar AI konsisten memahami seluruh codebase tanpa kehilangan riwayat instruksi. Lanjut ke bagian berikutnya.

📖 Artikel Terkait