Langkau ke kandungan
WANCODE
EN

Menulis Prompt Pembangunan yang Lebih Baik

15 minitPertengahanHTML · CSS · JS

Dalam pelajaran ini

  • Masukkan lima ramuan prompt pembangunan yang berguna: context, tugasan, kekangan, output yang dijangka dan contoh
  • Laporkan bug seperti rakan sepasukan yang baik: langkah, jangkaan vs sebenar, error yang tepat
  • Minta perubahan kecil yang mudah disemak, bukan tulis semula keseluruhan

Idea utama

Pembantu AI hanya tahu apa yang anda masukkan dalam context-nya. Prompt yang boleh difahami oleh rakan sepasukan baharu — dengan error sebenar, kekangan dan bentuk jawapan yang anda mahu — memberi anda kod yang betul-betul boleh disemak.

Ini satu bug yang nampak macam kes sebenar. Satu halaman kedai kecil ada butang "Add". Kopi O dan Teh tarik berfungsi, tetapi bila klik Add pada Milo ais, jumlah berhenti dikemas kini.

cart.js
const products = {
  kopi: { name: "Kopi O", price: 2.5 },
  teh: { name: "Teh tarik", price: 2.2 },
  miloAis: { name: "Milo ais", price: 3.2 },
};

function renderTotal() {
  const total = cart.reduce((sum, line) => sum + products[line.id].price * line.qty, 0);
  document.querySelector("#total").textContent = "RM " + total.toFixed(2);
}
index.html
<button data-id="kopi">Add</button>
<button data-id="teh">Add</button>
<button data-id="milo-ais">Add</button>
Text
TypeError: Cannot read properties of undefined (reading 'price')
    at renderTotal (cart.js:8)

Apa yang console tunjukkan selepas klik Add pada Milo ais.

Ramai orang akan taip sesuatu seperti "fix my code it doesnt work". Pembantu AI terpaksa meneka kod yang mana, apa maksud "tak jalan", dan apa yang boleh diubah. Tekaan menghasilkan penulisan semula yang besar dan yakin, yang susah untuk disemak.

Lima ramuan

  1. Context — projek apa, kod yang berkaitan (atau fail mana yang perlu dibuka), versi jika penting.
  2. Tugasan — satu kerja yang jelas. Untuk bug: langkah untuk menghasilkan semula, apa yang dijangka vs apa yang sebenarnya berlaku, dan teks error yang tepat.
  3. Kekangan — apa yang tidak boleh berubah: jangan tambah library baharu, kekalkan nama function awam, sentuh satu fail sahaja…
  4. Output yang dijangka — bentuk jawapan: "terangkan punca dahulu, kemudian pembaikan paling kecil dalam bentuk diff".
  5. Contoh — satu input dan output yang anda jangka. Satu contoh konkrit menghapuskan banyak kekaburan.

Prompt yang kabur

Markdown
fix my code it doesnt work

Prompt yang boleh disemak

Markdown
Vanilla JS shop page. Clicking "Add" on Milo ais throws
TypeError: Cannot read properties of undefined (reading 'price')
in renderTotal() (cart.js). Kopi O and Teh tarik work.

Expected: total goes up by RM 3.20.
Code: <products object + the buttons' HTML>

Only fix this bug — no new libraries, don't rename products.
Explain the cause first, then give the smallest fix as a diff.

Prompt kedua lebih panjang, tetapi setiap baris menghapuskan satu tekaan.

Minta perubahan kecil yang boleh disemak

  • Satu isu bagi setiap permintaan. "Baiki bug ini" dan "refactor troli sekali" ialah dua prompt berbeza.
  • Minta penerangan atau pelan sebelum kod, supaya anda boleh tangkap andaian yang salah lebih awal.
  • Minta ia beritahu bila ia tidak pasti atau perlukan fail yang belum dilihat, bukannya meneka.
  • Dengan tool agent, tunjukkan fail ("tengok cart.js dan index.html") daripada menampal kod yang panjang.

Jangan sekali-kali tampal rahsia

Jangan masukkan API key, kata laluan, token, kandungan .env atau data peribadi pelanggan ke dalam prompt. Gantikan dengan placeholder seperti <API_KEY>. Semak peraturan organisasi anda tentang kod mana yang boleh dikongsi dengan tool mana.

Prompt yang lebih baik meningkatkan peluang jawapan yang baik. Ia tidak menjaminnya. Anda tetap perlu membaca, menjalankan dan menguji hasilnya — itulah baki track ini. Untuk templat yang boleh diguna semula, lihat perpustakaan prompt.

Tulis semula prompt.md untuk bug Milo ais yang diterangkan di atas. Prompt anda mesti ada:

- mesej error yang tepat (salin), - di mana ia berlaku (renderTotal, cart.js atau addToCart), - tingkah laku yang dijangka vs sebenar, - context yang cukup supaya ia boleh difahami sendiri — sekurang-kurangnya 40 patah perkataan.

Pratonton menunjukkan apa yang pembantu AI akan terima. Anda boleh tulis dalam bahasa Inggeris atau Melayu.

Semakan

  • Ada mesej error yang tepat
  • Nyatakan di mana ia berlaku
  • Terangkan tingkah laku dijangka vs sebenar
  • Sekurang-kurangnya 40 patah perkataan context

Uji kefahaman

Q1

Kenapa tampal mesej error yang tepat dan bukannya tulis "ia crash"?

Q2

Permintaan manakah yang paling mudah disemak dengan selamat?

Apa yang anda pelajari

  • Context, tugasan, kekangan, output dijangka, contoh — setiap satu menghapuskan satu tekaan.
  • Untuk bug: langkah, dijangka vs sebenar, dan teks error yang tepat.
  • Minta penerangan dahulu dan perubahan paling kecil dalam bentuk diff.
  • Jangan sekali-kali tampal rahsia atau data peribadi ke dalam prompt.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 2