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

Mengapa Prompt Engineering Adalah Skill Utama Vibe Coding

Banyak developer mencoba vibe coding lalu menyerah. Kode hasil generasi AI sering memuat bug, memakai fungsi deprecated, atau merusak arsitektur aplikasi. Masalah mendasar jarang terletak pada kemampuan model AI. Penyebab utama kegagalan adalah cara pemberian instruksi (prompting) yang tidak presisi.

Dalam paradigma vibe coding, prompt berperan sebagai pengganti kode sintaksis tradisional. Saat instruksi abstrak atau ambigu, AI mengisi celah informasi tersebut dengan asumsi acak. Prinsip Garbage In, Garbage Out (GIGO) berlaku mutlak pada Large Language Model (LLM). AI bekerja berdasarkan kalkulasi probabilitas token. Tanpa batasan ketat, AI memilih jalur probabilitas umum yang sering kali tidak cocok dengan spesifikasi proyek Anda.

Penerapan prompt engineering vibe coding bukan tentang merangkai kata-kata ajaib. Praktik ini adalah disiplin menyampaikan konteks teknis, variabel lingkungan, batasan arsitektur, dan ekspektasi luaran secara eksplisit. Penguasaan teknik ini memangkas waktu iterasi dari hitungan jam menjadi menit.

Anatomi Prompt Vibe Coding Yang Bagus

Prompt yang langsung menghasilkan kode siap pakai memiliki struktur terukur. Komponen ini memastikan AI bekerja dalam koridor teknis yang benar.

1. Role (Peran Teknis)

Tetapkan spesialisasi spesifik untuk AI. Langkah ini mengaktifkan bobot konseptual relevan pada model dasar, yang memengaruhi standar penulisan kode, pemilihan pola desain, dan aspek keamanan.

• Buruk: "Bantu saya nulis kode backend."
• Bagus: "Bertindaklah sebagai Principal Backend Engineer yang ahli dalam Node.js, TypeScript, dan Microservices Architecture."

2. Context (Konteks Sistem & Lingkungan)

Sediakan informasi spesifikasi stack, versi runtime, library aktif, serta kondisi codebase. AI tidak memiliki akses otomatis ke isi repositori lokal Anda tanpa diberikan konteks.

• Contoh: "Saya membangun API autentikasi menggunakan Node.js v20, Express v4.19, PostgreSQL v16, dan Prisma ORM v5. Structure folder mengikuti TypeScript Clean Architecture (Domain, UseCase, Controller, Repository)."

3. Task (Tugas Spesifik)

Tulis deskripsi tugas tunggal yang terisolasi. Gunakan kata kerja operasional dan hindari instruksi multitafsir.

• Contoh: "Buat endpoint POST /api/v1/auth/refresh-token untuk menerbitkan access token baru berdasarkan refresh token valid yang dikirim via HTTP-only cookie."

4. Constraints (Batasan Mutlak)

Daftarkan aturan teknis yang melarang atau mewajibkan penggunaan cara tertentu. Bagian ini krusial untuk mencegah AI menambahkan dependensi yang tidak diperlukan.

• Contoh: "Gunakan package `jsonwebtoken` dan `zod`. Jangan gunakan library pihak ketiga lain. Tangani expired token dengan mengembalikan HTTP status 401 dan response body JSON terstruktur. Wajib jalankan validasi schema pada payload cookie."

5. Output Format (Format Luaran)

Tentukan bentuk akhir dari tanggapan AI untuk mempercepat proses penyalinan kode.

• Contoh: "Keluarkah kode terpisah untuk file `RefreshTokenController.ts` dan `RefreshTokenUseCase.ts`. Jangan sertakan teks penjelasan naratif. Tuliskan inline comment ringkas hanya pada logika enkripsi token."

Contoh Prompt: Jelek vs Bagus

Berikut perbandingan langsung dua pendekatan prompt pada skenario pembuatan komponen antarmuka pengguna.

Skenario: Membuat Komponen Form Login React

Prompt Jelek:

Bikin form login pake React dan Tailwind dong yang keren.

Analisis Kegagalan: AI tidak memiliki parameter mengenai state management, pustaka validasi, struktur penanganan respons HTTP, skema penanganan error, hingga standar aksesibilitas. Hasilnya: AI menghasilkan kode generik dengan state lokal sederhana yang tidak dapat diintegrasikan ke sistem produksi.

Prompt Bagus:

Bertindaklah sebagai Senior Frontend Engineer berpengalaman dalam React dan TypeScript.

Konteks:
Saya membuat halaman login untuk dashboard enterprise.
Tech Stack: React 18, TypeScript 5, Tailwind CSS v3, React Hook Form v7, Zod v3, Lucide Icons.

Tugas:
Buat komponen React reusable bernama `LoginForm.tsx`.

Persyaratan & Constraints:
1. Form memiliki input 'email' dan 'password'.
2. Skema Zod: Email wajib format valid; Password minimal 8 karakter dengan minimal 1 angka dan 1 simbol.
3. Integrasikan Zod dengan React Hook Form menggunakan `@hookform/resolvers/zod`.
4. Tampilkan pesan kesalahan validasi tepat di bawah input field terkait dengan teks warna red-500.
5. Fitur visibility toggle (show/hide) password menggunakan ikon `Eye` dan `EyeOff` dari Lucide Icons.
6. State loading: Saat `isSubmitting` bernilai true, tombol Submit mengalami disabled dan menampilkan komponen spinner inline.
7. Terapkan atribut aksesibilitas WAI-ARIA lengkap (aria-invalid, aria-describedby, role="alert").
8. Styling Tailwind: Dark mode native, background input slate-900, border slate-700, focus ring indigo-500, button background indigo-600.

Output:
Berikan kode lengkap untuk `LoginForm.tsx` termasuk TypeScript type/interface untuk Props dan FormValues. Tanpa teks pengantar atau penutup.

Hasil dari prompt kedua dapat langsung dipakai di dalam proyek tanpa memerlukan proses refactoring ulang.

Teknik Iterasi: Dari Draf Awal ke Kode Production

Proses vibe coding profesional berjalan secara inkremental. Penulisan kode kompleks memerlukan teknik kontrol bertahap.

1. Chain-of-Thought (Pikirkan Langkah demi Langkah)

Untuk kalkulasi atau algoritma rumit, instruksikan AI memetakan logika sebelum menulis sintaksis. Cara ini mereduksi tingkat eror logika pada keluaran akhir.

Contoh instruksi: "Sebelum menulis kode untuk algoritma reconciliation transaksi keuangan ini, urutkan alur logika penanganan selisih kas dalam bentuk poin-poin terstruktur. Tunggu konfirmasi saya sebelum menulis kodenya."

2. Incremental Prompting

Hindari meminta pembuatan seluruh aplikasi dalam satu instruksi. Pecah alur kerja menjadi modul terisolasi:

Kode yang Anda berikan menghasilkan error berikut saat dijalankan pada rintisan build:

[Paste Stack Trace Error Persis di Sini]

Konteks kode saat ini:
[Paste file kode terkait]

Analisis akar masalah (root cause) error ini. Berikan kode perbaikan lengkap untuk file terkait tanpa merusak fungsi yang sudah berjalan.

Role: [Backend/Frontend/Fullstack Engineer]
Stack: [Bahasa, Framework, Library, Versi Runtime]

Tugas: Buat fungsi/komponen [Nama Fitur] untuk kebutuhan [Tujuan Fitur].

Spesifikasi & Requirements:
- [Requirement 1]
- [Requirement 2]

Constraints:
- Terapkan prinsip SOLID dan Clean Code.
- Hindari penggunaan dependensi luar tambahan.
- Tangani edge case: [Sebutkan edge cases, misal: null input, connection timeout].

Output: Kode lengkap beserta interface/type definition tanpa penjelasan naratif.

Role: Senior Systems Debugger.

Masalah: [Deskripsikan bug atau isu performa].
Ekspektasi: [Perilaku sistem yang benar].
Hasil Saat Ini: [Pesan error atau log perilaku salah].

Kode Terkait:
```[bahasa]
[Paste Kode]
```

Tugas:
1. Identifikasi penyebab utama masalah.
2. Berikan kode perbaikan lengkap.
3. Jelaskan perbaikan teknis secara ringkas dalam 2 kalimat.

Role: Software Architect.

Tugas: Refactor kode berikut agar memenuhi standar [Scalability / Maintainability / Performance].

Kode Saat Ini:
```[bahasa]
[Paste Kode]
```

Constraints:
- Jangan mengubah luaran (return value) atau perilaku eksternal fungsi.
- Turunkan Cyclomatic Complexity.
- Pastikan strict typing TypeScript terpenuhi tanpa penggunaan `any`.

Output: Kode hasil refactoring.