Tips & Tricks

5 Teknik Prompt untuk Mendapatkan Hasil Lebih Baik dari Claude Code [Dengan Contoh]

Tingkatkan kualitas output Claude Code secara drastis dengan 5 teknik prompt yang sudah terbukti. Dilengkapi contoh Before/After dan potongan kode praktis yang bisa kamu gunakan hari ini.

Pendahuluan

Kualitas output Claude Code berhubungan langsung dengan cara kamu menulis prompt. Dengan teknik yang tepat, task yang sama bisa berubah dari menghasilkan “kode yang tidak bisa dipakai” menjadi “kode siap produksi”.

Dalam artikel ini, kita akan membahas lima teknik prompt praktis dengan contoh Before/After yang bisa langsung kamu gunakan. Jika kamu baru mengenal Claude Code, cek dulu panduan memulai.

1. Berikan Context yang Spesifik

Teknik paling berdampak adalah mengkomunikasikan latar belakang dan tujuan task-mu dengan jelas. Claude Code bisa membaca file project-mu, tapi tidak bisa membaca pikiranmu. Sampaikan bukan hanya apa yang kamu inginkan, tapi juga mengapa, dan akurasi output akan meningkat drastis.

Before (prompt lemah):

Buat fitur login

After (prompt kuat):

Tambahkan autentikasi login email/password ke project Next.js 14 App Router ini.
Route API sudah ada di src/app/api/, dan tabel user sudah didefinisikan
via Prisma + PostgreSQL. Gunakan NextAuth.js v5 sebagai library autentikasi.

Before (prompt lemah):

Perbaiki bug-nya

After (prompt kuat):

Perbaiki bug di src/components/UserList.tsx di mana setState dipanggil
setelah komponen unmount saat fetch daftar user di useEffect.
Tambahkan logic cleanup menggunakan AbortController.

2. Pecah Task Menjadi Langkah-Langkah

Ketika kamu memberikan task besar sekaligus ke Claude Code, ia bisa kehilangan gambaran besar. Pecah pekerjaan kompleks secara sengaja menjadi tahapan dan pastikan setiap langkah selesai sebelum melanjutkan.

Before (prompt lemah):

Bangun sistem manajemen produk lengkap. Butuh listing, detail, buat, edit,
hapus, upload gambar, manajemen kategori, manajemen stok, dan filter pencarian.

After (prompt kuat):

Kita bangun manajemen produk bertahap. Untuk Langkah 1,
buat API CRUD produk:

- POST /api/products (buat)
- GET /api/products (daftar dengan pagination)
- GET /api/products/:id (detail)
- PUT /api/products/:id (update)
- DELETE /api/products/:id (hapus)

Gunakan zod untuk validasi dan Prisma client yang sudah ada di src/lib/db.ts.

Before (prompt lemah):

Tulis semua test-nya

After (prompt kuat):

Tulis unit test untuk src/utils/calculatePrice.ts.
Mulai dari kasus happy-path yang mencakup:
- Kalkulasi harga dasar
- Penerapan diskon (10%, 20%, 50%)
- Kalkulasi termasuk pajak (tarif pajak 10%)
Gunakan Vitest dan ikuti pattern yang sudah ada di direktori tests/.

3. Tentukan Format Output yang Diharapkan

Menyebutkan secara eksplisit bahasa pemrograman, framework, coding style, dan ekspektasi format lainnya secara signifikan mengurangi rework. Terutama jelaskan definisi tipe TypeScript dan pola error handling.

Before (prompt lemah):

Buat API client

After (prompt kuat):

Buat class client untuk API pembayaran eksternal di src/lib/api-client.ts.

Persyaratan:
- Definisi tipe TypeScript kompatibel strict mode
- Berbasis fetch (tanpa axios)
- Custom error class (PaymentApiError) untuk error handling
- Logic retry (maksimal 3 percobaan, exponential backoff)
- Tipe respons generik
- Komentar JSDoc di semua method public

Before (prompt lemah):

Buat komponen React

After (prompt kuat):

Buat komponen tabel yang reusable di src/components/DataTable.tsx.

- Client component ("use client"), bukan React Server Component
- Props di-type dengan generics untuk menerima definisi kolom
- Dukungan sorting dan pagination
- Styling dengan Tailwind CSS, sesuaikan design token dari src/components/Button.tsx
- Aksesibilitas: role WAI-ARIA table yang tepat

4. Referensikan Codebase yang Sudah Ada

Salah satu kekuatan terbesar Claude Code adalah memahami seluruh project-mu. Maksimalkan ini dengan secara eksplisit menginstruksikan untuk mengikuti kode yang sudah ada. Menunjukkan path file spesifik membuatnya lebih efektif lagi.

Before (prompt lemah):

Tambahkan endpoint API baru

After (prompt kuat):

Mengikuti pattern yang sama seperti src/app/api/users/route.ts,
buat endpoint API manajemen pesanan di src/app/api/orders/route.ts.

Ikuti API users yang sudah ada untuk:
- Validasi dengan schema Zod
- Pola error handling try-catch
- Gaya return NextResponse
- Pendekatan query Prisma

Before (prompt lemah):

Buat halaman pengaturan

After (prompt kuat):

Menggunakan src/app/dashboard/profile/page.tsx sebagai referensi,
buat src/app/dashboard/settings/page.tsx.

Pertahankan struktur layout yang sama (komponen DashboardLayout, Breadcrumb,
penggunaan PageHeader) sambil menambahkan form pengaturan notifikasi
dan pengaturan keamanan.
Gunakan react-hook-form + zod untuk manajemen form, sama seperti halaman profil.

5. Iterasi dengan Feedback Loop

Jangan mengharapkan kesempurnaan dari percobaan pertama. Gunakan percakapan dengan Claude Code untuk meningkatkan kualitas secara bertahap. Perlakukan output awal sebagai fondasi dan berikan feedback yang spesifik dan actionable.

Before (prompt lemah):

Itu salah, ulangi

After (prompt kuat):

Terima kasih. Dua perubahan ya:
1. Di fungsi handleSubmit, bedakan antara network error dan
   validation error saat menampilkan pesan ke user
2. Ganti spinner sederhana di loading state dengan skeleton UI
   dari src/components/Skeleton.tsx

Before (prompt lemah):

Buat lebih bagus

After (prompt kuat):

Saya ingin peningkatan performa. Secara spesifik:
1. Terapkan React.memo pada rendering daftar produk untuk mencegah re-render yang tidak perlu
2. Tambahkan debounce (300ms) pada input pencarian
3. Implementasikan lazy loading untuk gambar
Tambahkan komentar di setiap titik perubahan agar saya bisa menilai
dampaknya terhadap skor Lighthouse.

Kesimpulan

Rangkuman lima teknik:

  1. Berikan context spesifik agar Claude Code memahami maksudmu dengan akurat
  2. Pecah task menjadi langkah agar cakupan setiap interaksi tetap terkelola
  3. Tentukan format output untuk meminimalkan rework
  4. Referensikan kode yang sudah ada untuk menjaga konsistensi project
  5. Iterasi dengan feedback untuk meningkatkan kualitas secara bertahap

Setiap teknik efektif secara mandiri, tapi benar-benar bersinar saat dikombinasikan. Menulis aturan project di file CLAUDE.md mengurangi jumlah konteks yang perlu kamu sertakan di setiap prompt, sehingga meningkatkan efisiensi lebih jauh.

Untuk penggunaan lebih lanjut, lihat tips produktivitas Claude Code kami.

Untuk konsep dasar prompt engineering, baca juga panduan resmi prompt engineering dari Anthropic.

#prompts #techniques #productivity #Claude Code #prompt engineering