𝗗𝗮𝗿𝗶𝗽𝗮𝗱𝗮 𝗣𝗿𝗼𝗺𝗽𝘁 𝗸𝗲𝗽𝗮𝗱𝗮 𝗘𝗷𝗲𝗻 𝗔𝗜: 𝗣𝗮𝗻𝗱𝘂𝗮𝗻 𝗣𝗲𝗺𝗯𝗮𝗻𝗴𝘂𝗻 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱

Pembangun frontend mesti melangkaui sekadar prompt ringkas.

Jika anda ingin membina antara muka pengguna (UI) yang pintar, anda perlu memahami hierarki AI.

  1. Prompt: Satu arahan tunggal dengan satu output.
  2. Chatbot: Model dengan memori yang membolehkan perbualan.
  3. Ejen AI: Sistem yang menggunakan alatan, mengikut pelan pelbagai langkah, dan bertindak bagi pihak anda.

Ejen melakukan lebih daripada sekadar berbual. Ia boleh mengambil data, memanggil API, dan membuat keputusan untuk mencapai sesuatu matlamat.

Mengapa ini penting untuk kerja anda:

  • Ia mencipta UI yang dinamik dan peka konteks.
  • Ia mengautomasikan tugas berulang seperti sokongan pengguna atau penyediaan papan pemuka (dashboard).
  • Ia merapatkan jurang antara alatan reka bentuk dan kod yang berfungsi.

Cara menulis prompt yang lebih baik: Berhenti menulis arahan yang samar. Anggap prompt seperti spesifikasi teknikal.

Prompt yang buruk: Write a function to format a date.

Prompt yang baik: Write a TypeScript function that takes a JS Date and returns a string like "3 hours ago". Handle future dates by returning "just now". Use no external libraries.

Gunakan senarai semak ini untuk tugas frontend:

  • Nyatakan peranan: "Reply with code only."
  • Berikan contoh: Tunjukkan kepada model bentuk output tepat yang anda perlukan.
  • Takrifkan stack: "Use React and Tailwind. No CSS-in-JS."
  • Senaraikan kes terpinggir (edge cases): "Handle null values and empty arrays."
  • Minta konsistensi: "Use only documented APIs."

Cara membina aliran kerja (workflow) ejen:

  • Pilih model: Gunakan OpenAI atau yang serupa melalui fungsi sisi pelayan (server-side) yang selamat.
  • Takrifkan alatan: Beritahu ejen API atau fungsi mana yang boleh digunakannya.
  • Tetapkan aliran kerja: Pastikan ejen boleh menjejaki konteks dan merancang langkah-langkah.
  • Sambungkan ke UI anda: Gunakan laluan API (API route) untuk memanggil ejen daripada frontend anda.

Cabaran biasa:

  • Latensi: Gunakan keadaan pemuatan (loading states) atau tugas latar belakang supaya UI kekal responsif.
  • Halusinasi: Sentiasa labelkan kandungan AI dan gunakan pengawasan manusia untuk keputusan besar.
  • Had konteks: Ringkaskan mesej lama untuk memastikan model kekal fokus.

Peranan pembangun frontend sedang berubah. Anda akan meluangkan kurang masa menulis templat dan lebih banyak masa mentakrifkan matlamat serta kekangan untuk dilaksanakan oleh ejen.

Bermula secara kecil-kecilan. Automasikan satu tugas berulang atau satu komponen. Bina logiknya hari ini.

Sumber: https://dev.to/davekurian/from-prompts-to-ai-agents-a-frontend-developers-guide-to-mastery-2mlh