MassvaiMassvai
Panduan4 menit baca

Cara Menulis Prompt untuk AI App Builder (dengan Contoh Sebelum/Sesudah)

Amati dua orang memakai AI app builder yang sama selama satu jam. Yang satu punya aplikasi yang berjalan; yang lain punya kekacauan dan opini bahwa "AI coding itu overhyped." Alatnya identik. Prompt-nya tidak.

Menulis prompt untuk app builder adalah keterampilan yang berbeda dari menulis prompt untuk chatbot. Anda tidak sedang bertanya — Anda memberi perintah kerja kepada agent yang akan mengambil puluhan keputusan berdasarkan apa yang Anda katakan dan tidak Anda katakan. Inilah yang benar-benar berhasil, dengan contoh sebelum/sesudah di sepanjang artikel.

Prompt pertama: muat keputusan di depan, lewati implementasi

Prompt pembuka Anda menentukan fondasi proyek. Agent mengisi setiap celah yang Anda tinggalkan dengan tebakan, dan meskipun agent yang bagus menebak dengan masuk akal, setiap tebakan adalah lemparan koin dalam mencocokkan maksud Anda.

Sebelum:

Buatkan saya aplikasi fitness.

Sesudah:

Buat pelacak latihan untuk penggemar angkat beban. Data: latihan punya tanggal; setiap latihan punya entri dengan nama gerakan, set, repetisi, dan beban. Layar: (1) catatan hari ini dengan input cepat, (2) riwayat yang dikelompokkan per minggu, (3) grafik kemajuan per gerakan. Satu pengguna, tanpa login. Desain gelap, minimalis.

Versi "sesudah" memutuskan audiens, model data, layar, cakupan auth, dan arah visual — lima keputusan yang mahal untuk diubah belakangan. Perhatikan apa yang tidak disertakan: tanpa tech stack, tanpa pilihan database, tanpa library komponen. Platform yang bagus mengambil keputusan itu lebih baik daripada yang bisa dilakukan sebuah prompt, dan memenuhi brief Anda dengan istilah teknis yang setengah dipahami justru merugikan ("pakai MongoDB" ketika platformnya dibangun di atas Postgres hanya menciptakan gesekan).

Struktur yang konsisten berhasil:

  1. Apa produknya, dalam satu kalimat, beserta audiensnya.
  2. Datanya, sebagai kata benda dan field yang sederhana.
  3. Layar-layarnya, diberi nomor.
  4. Pengecualian eksplisit — "tanpa login", "tanpa pembayaran". Pengecualian mencegah cakupan yang akan "dengan baik hati" diciptakan sendiri oleh agent.

Prompt iterasi: satu perubahan, ditambatkan ke satu lokasi

Setelah build pertama, karakter prompt Anda berubah: dari arsitektur menjadi pembedahan. Dua aturan mengerjakan sebagian besar tugasnya.

Satu perubahan per pesan. Permintaan yang digabung gagal sebagai satu kesatuan — ketika satu dari lima perubahan meleset, Anda harus menulis prompt ulang sambil menghindari empat lainnya.

Tambatkan setiap perubahan ke sebuah lokasi.

Sebelum:

Tanggalnya kelihatan salah.

Sesudah:

Di halaman riwayat, header minggu menampilkan "Week 32". Tampilkan rentang tanggal saja, misalnya "4 Agu – 10 Agu".

Sebutkan layarnya, kutip teks yang salah, jelaskan teks yang benar. Agent menemukan titik persisnya alih-alih menebak-nebak — lebih sedikit tebakan yang salah, lebih sedikit kredit.

Deskripsikan hasil, bukan implementasi

Anda akan tergoda bicara seperti developer. Tahan godaan itu, kecuali Anda memang developer.

Sebelum:

Tambahkan useEffect yang refetch saat mount dan memoize rendering list-nya.

Sesudah:

Ketika saya kembali ke dashboard setelah menambahkan pengeluaran, totalnya masih menunjukkan angka lama sampai saya refresh. Seharusnya langsung terkini.

Versi pertama mengikat agent pada diagnosis Anda, yang bisa saja salah. Versi kedua memberinya cacat yang sesungguhnya — hal yang Anda yakini — dan membiarkannya menemukan penyebabnya. Deskripsikan gejala dengan kepercayaan diri seorang pengguna; serahkan diagnosis pada pihak yang bisa membaca kodenya.

Gunakan referensi — mereka mengalahkan kata sifat

"Modern dan bersih" tidak berarti apa-apa; semua desain sejak 2010 mengklaimnya. Referensi membawa informasi yang jauh lebih kaya:

Buat bagian harga terasa seperti halaman harga Linear: banyak ruang kosong, border tipis, satu warna aksen.

Lebih baik lagi, lampirkan tangkapan layar — dari aplikasi yang Anda sukai, dari sketsa tangan, dari tata letak rusak spesifik yang sedang Anda jelaskan. Platform yang menerima lampiran gambar (Massvai bisa) menyelesaikan ambiguitas visual dari sebuah gambar jauh lebih cepat daripada dari prosa. Tangkapan layar sebuah bug dengan keterangan satu baris adalah format prompt paling bernilai yang ada.

Ketika semuanya melenceng: berhenti menggali

Kesalahan prompting termahal bukanlah prompt yang buruk — melainkan percobaan keempat berturut-turut untuk menambal arah yang pada dasarnya sudah salah.

Jika dua percobaan untuk perbaikan yang sama belum berhasil, ubah strategi:

  • Rollback. Pulihkan checkpoint sebelum kekacauan itu (Massvai mengabadikan setiap generasi) dan dekati lagi dengan deskripsi yang berbeda. Mundur terasa seperti kekalahan; padahal biasanya itu jalur tercepat ke depan.
  • Mundur selangkah untuk melihat gambaran besar. Alih-alih mendeskripsikan ulang perbaikannya, deskripsikan tujuannya: "Lupakan instruksi sebelumnya soal dropdown filter. Inilah yang ingin saya bantu pengguna lakukan: …" Agent menangani tujuan yang segar lebih baik daripada tumpukan instruksi tambal sulam.

Contekan singkat

SituasiLakukanJangan
Memulai proyekAudiens + data + layar + pengecualian"Buatkan saya aplikasi untuk X"
Meminta perubahanSatu perubahan, ditambatkan ke satu layarLima perubahan dalam satu pesan
Melaporkan bugGejala, lokasi, perilaku yang diharapkanTebakan Anda soal penyebab di level kode
Arah desainAplikasi referensi dan tangkapan layarSup kata sifat
Buntu setelah 2 percobaanRollback, deskripsikan ulang tujuannya"Coba lagi" untuk kelima kalinya

Tidak ada yang eksotis di sini. Ini kejelasan yang sama yang wajib Anda berikan kepada kontraktor manusia — bedanya kontraktor yang ini membaca dengan teliti, tidak pernah kesal oleh detail, dan mulai bekerja dalam hitungan detik. Berilah ia brief yang layak untuk itu.

Bangun aplikasi Anda dengan AI hari ini

Jelaskan ide Anda dan dapatkan aplikasi Next.js siap produksi dengan pratinjau langsung, kepemilikan penuh atas kode, dan deployment sekali klik.

Mulai gratis

Lanjutkan membaca

Cara Menulis Prompt untuk AI App Builder (dengan Contoh Sebelum/Sesudah) | Massvai Blog