← Kembali ke Modul πŸ‘¨β€πŸ« Panduan Pengajar ✏️ 10 Latihan πŸ“„ Cheatsheet
Fasa 2 β€” Modul Pelajar

Seni Prompting

Pelajari cara menulis prompt yang berkesan untuk mendapatkan hasil yang tepat dan berkualiti dari AI.

πŸ—ΊοΈ Perjalanan Anda β€” Apa Yang Anda Akan Capai

Bayangkan anda boleh "bercakap" dengan AI untuk hasilkan kod, bina laman web, dan selesaikan masalah β€” hanya dengan menulis ayat yang betul. Itu bukan mimpi. Selepas fasa ini, anda bukan lagi "tak tahu coding" β€” anda seorang prompt engineer.

Dalam fasa "Seni Prompting" ini, anda akan belajar cara menulis arahan yang tepat untuk AI β€” macam mana nak bagi konteks, arahan yang jelas, dan batasan yang spesifik supaya AI faham apa yang anda mahu. Anda akan dapat hasilkan kod yang berkualiti, walaupun anda tiada latar belakang programming. Yang penting bukanlah berapa banyak kod yang anda tahu β€” tapi bagaimana anda berkomunikasi dengan AI.

Di akhir fasa ini, anda akan mampu menulis prompt berstruktur (Context + Instruction + Constraint), menggunakan teknik seperti role-play dan chain-of-thought, membuat iterative refinement, dan membandingkan output Claude Code vs Codex. Lebih penting lagi: anda akan yakin bahawa coding bukanlah penghalang β€” cuma perlukan prompt yang betul.

🧩

Anatomi Prompt yang Baik

Setiap prompt yang berkesan terdiri daripada tiga komponen utama.

πŸ“ Rumus Emas Prompting

Context + Instruction + Constraint = Output Berkualiti

Formula ini adalah asas kepada semua prompt yang baik. Jika prompt anda kurang salah satu elemen ini, output AI kemungkinan besar akan mengecewakan.

🌍
Context
Latar belakang, situasi, dan tujuan projek. Beritahu AI siapa anda, apa yang anda buat, dan untuk siapa.
"Saya seorang graphic designer membina portfolio untuk tarik klien baru. Target saya adalah startup teknologi."
πŸ“‹
Instruction
Arahan spesifik tentang apa yang perlu dilakukan. Gunakan kata kerja aktif dan senarai yang jelas.
"Bina satu halaman HTML dengan header, hero section, gallery projek, dan footer. Setiap bahagian perlu ada penerangan."
πŸ”’
Constraint
Batasan dan keperluan khusus: format output, teknologi, gaya, saiz, warna, dan deadline.
"Guna CSS sahaja (no frameworks). Responsive mobile & desktop. Warna gelap dengan aksen cyan. Satu file HTML."

πŸ“ Contoh Prompt Lengkap

Perhatikan bagaimana ketiga-tiga komponen digabungkan dalam prompt ini:

[CONTEXT] Saya seorang frontend developer yang nak bina portfolio peribadi. Saya ada 6 projek yang nak ditunjukkan. Target saya adalah majikan yang mencari developer junior. [INSTRUCTION] Bina satu halaman HTML portfolio dengan: 1. Hero section β€” nama, tagline, CTA "Lihat Portfolio" 2. Projek grid β€” 6 kad projek dengan thumbnail, tajuk, dan penerangan ringkas 3. Skills section β€” senarai kemahiran teknikal 4. Contact section β€” form ringkas dengan nama, email, dan mesej [CONSTRAINT] - Satu file HTML sahaja (inline CSS) - Tema gelap (#0b0d17) dengan aksen cyan (#06d6f0) - Font: 'Segoe UI', system-ui, sans-serif - Responsive: desktop 3 column, tablet 2 column, mobile 1 column - Setiap kad projek ada hover effect - Loading animation untuk page entry
Tip Penting

Anda TIDAK perlu menulis "Context:", "Instruction:", "Constraint:" secara literal. Yang penting kandungan prompt anda mengandungi ketiga-tiga elemen ini. Gunakan struktur yang paling selesa untuk anda.

🎯

Teknik Prompting

Empat teknik utama yang akan menjadikan prompt anda lebih berkuasa.

🎭 Role-Play Prompting

Suruh AI memainkan peranan tertentu. Ini memberikan konteks yang kuat dan membantu AI mengadaptasi gaya yang sesuai.

"Anda seorang frontend developer senior yang pakar dalam accessibility. Review kod HTML ini dan cadangkan penambahbaikan untuk WCAG compliance."

πŸ“š Few-Shot / Contoh-Based

Beri AI contoh input dan output yang dikehendaki. AI pandai meniru pattern dari contoh yang diberikan.

"Tukar format data berikut mengikut contoh: Input: {nama: 'Ali', umur: 25} Output: Nama: Ali | Umur: 25 Input: {nama: 'Siti', umur: 30} Output: [biar AI sambung]"

🧠 Chain-of-Thought (CoT)

Minta AI berfikir langkah demi langkah sebelum memberi jawapan. Sangat berkesan untuk tugas logik dan penyelesaian masalah.

"Saya ada fungsi JavaScript yang tak berfungsi macam yang dijangka. Terangkan langkah demi langkah apa yang mungkin salah, kemudian cadangkan pembetulan. Jangan terus bagi kod β€” fikir dulu."

πŸ”„ Iterative Refinement

Mulakan dengan prompt ringkas, dapatkan output, nilai, dan refine secara berperingkat. Jangan harap sempurna pada percubaan pertama.

Iterasi 1: "Bina navigation bar." Iterasi 2: "Jadikan responsive dengan hamburger menu." Iterasi 3: "Tambah animasi smooth pada dropdown."
βš”οΈ

Claude Code vs Codex β€” Gaya Prompting

Setiap platform AI mempunyai "personaliti" yang berbeza. Optimumkan prompt anda untuk setiap satu.

🧠 Claude Code β€” Nuanced, Detailed, Reasoning

Claude Code cemerlang dengan prompt yang deskriptif dan kaya konteks. Ia suka meneroka pelbagai sudut pandangan, memberikan reasoning yang mendalam, dan boleh mengendalikan arahan yang kompleks dan bernuansa.

// Gaya Prompt untuk Claude Code β€” detailed & reasoning "Bina satu komponen kad produk untuk laman e-commerce. Konteks: Saya nak guna komponen ni di halaman utama dan halaman kategori. Produk mungkin ada diskaun, dan saya nak tanda 'SALE' dengan jelas. Sila: 1. Design kad dengan gambar produk (placeholder), nama, harga, dan rating bintang 2. Jika ada diskaun, tunjuk harga asal (strikethrough) dan harga selepas diskaun dengan tag SALE 3. Guna CSS Grid supaya senang di-gridkan 4. Tambah hover effect β€” kad naik sikit dan bayang bertambah 5. Responsive β€” ikut parent container width Terangkan kenapa setiap pilihan reka bentuk anda buat. Guna pendekatan mobile-first."

⚑ Codex β€” Direct, Action-Oriented

Codex bertindak balas lebih baik kepada prompt ringkas, langsung, dan berorientasikan kod. Ia tidak perlukan naratif yang panjang β€” beri arahan yang jelas dan terus ke titik.

// Gaya Prompt untuk Codex β€” direct & action-oriented "Build a product card component for e-commerce. Requirements: - Product image (placeholder), name, price, star rating - If discount: show original price (strikethrough) + sale price + SALE tag - CSS Grid for layout - Hover: lift card + shadow increase - Responsive to parent width - Mobile-first CSS"

πŸ“Š Side-by-Side Comparison

Aspek Claude Code Codex
Gaya Prompt Deskriptif, naratif, reasoning Ringkas, langsung, bullet points
Panjang Prompt 200+ words β€” lebih detail lebih baik 50–150 words β€” ringkas dan fokus
Reasoning Cemerlang β€” explain, strategi, alternatif Minima β€” fokus pada hasil kod
Iterasi Sangat sesuai β€” ingat konteks perbualan Sederhana β€” perlu ulang konteks
Kekuatan Utama Kod yang tersusun, documented, well-explained Kod yang cepat, praktikal, straight to the point
Sesuai Untuk Projek kompleks, architecture, refactoring Tugas cepat, snippet, implementasi pantas
Tip Praktikal

Guna kedua-duanya! Claude Code untuk perancangan, architecture, dan code review. Codex untuk implementasi cepat dan snippet. Gabungan kedua-duanya memberikan produktiviti maksimum.

⚠️

Kesilapan Biasa & Cara Membetulkannya

Kenal pasti dan betulkan kesilapan prompting yang paling kerap dilakukan.

πŸ› 6 Kesilapan Utama

# Kesilapan Contoh Salah Cara Betul
1 Terlalu ringkas "Buat website" "Bina landing page untuk startup AI β€” 4 sections, tema gelap, responsive"
2 Campur aduk arahan "Buat navbar, pastu tambah footer, pastu bagi warna biru" "Bina layout: (1) Navbar β€” logo + 4 menu, (2) Footer β€” copyright + social links. Warna: #0b0d17 bg, #06d6f0 accent."
3 Tak nyatakan format output "Generate code untuk contact form" "Bina contact form HTML dengan CSS inline. Satu file sahaja. Include validation untuk email."
4 Guna istilah kabur "Buat design yang menarik" "Guna tema gelap dengan gradient aksen, font sans-serif, ruang putih yang luas, dan micro-animations pada hover."
5 Puasa hati tanpa refine (Terima output pertama tanpa semakan) "Tukar warna button kepada gradient. Kecilkan padding. Tambah border-radius."
6 Lupa beri konteks "Tolong betulkan kod ni" "Kod JavaScript ni tak jalan. Saya nak validate form registration. Error dia: button submit tak trigger apa-apa."
βœ…

Do's & Don'ts Prompting

Panduan ringkas tentang apa yang perlu dan tidak perlu dilakukan semasa menulis prompt.

βœ“ DO β€” Beri Konteks Yang Jelas

Terangkan latar belakang, tujuan, dan siapa target pengguna.

"Saya nak bina dashboard untuk pemilik kedai kecil yang nak pantau jualan harian."
βœ— DON'T β€” Mulak Terus tanpa Konteks

AI akan buat tekaan sendiri yang mungkin tak tepat.

"Buat dashboard."
βœ“ DO β€” Guna Format Berstruktur

Bullet points, numbered lists, headings membantu AI memahami.

"Requirements: 1. Header dengan logo dan nav 2. Hero dengan CTA button 3. Footer 3 column"
βœ— DON'T β€” Tulis dalam Satu Perenggan

AI mudah tertinggal detail penting dalam perenggan panjang.

"Saya nak header ada logo nav hero dan footer dan semuanya kena responsive dan guna warna gelap...."
βœ“ DO β€” Nyatakan Format Output

Beritahu AI dengan tepat bagaimana nak sampaikan hasil.

"Berikan dalam satu file HTML. Sertakan komen dalam kod. Letak CSS dalam tag <style>."
βœ— DON'T β€” Biar AI Tentukan Format

AI mungkin bagi output dalam format yang menyusahkan.

"Generate code."
βœ“ DO β€” Iterate dan Refine

Minta perubahan spesifik. AI boleh adjust dengan tepat.

"Tukar button dari biru ke gradient cyan-magenta. Jadikan lebih besar."
βœ— DON'T β€” Terima Output Pertama Sahaja

Kebanyakan output pertama boleh diperbaiki dengan refinement.

"Ok dah siap." (tanpa semak dan refine)
βœ“ DO β€” Uji Prompt pada Pelbagai AI

Prompt yang sama mungkin beri hasil berbeza pada Claude vs Codex.

"Jalankan prompt ni pada Claude Code dan Codex. Bandingkan output."
βœ— DON'T β€” Bergantung pada Satu Tool Sahaja

Setiap tool ada kekuatan berbeza. Guna yang sesuai untuk tugas tertentu.

"Claude Code je dah cukup." (padahal Codex lebih cepat untuk snippet ringkas)
🎯

Case Studies β€” Pelajar Sebenar

Kisah benar pelajar yang menggunakan teknik prompting untuk menyelesaikan masalah sebenar.

πŸ“Œ Masalah

Seorang pelajar yang langsung tidak tahu coding ingin membina laman web untuk perniagaan kek homemade ibunya. Tiada bajet untuk sewa developer. Cuma ada modal untuk subskripsi Claude Code.

πŸ’‘ Approach

Pelajar menggunakan teknik iterative refinement β€” mulakan dengan prompt ringkas, minta output, nilai, dan refine langkah demi langkah. Setiap kali tambah satu seksyen baru.

πŸ“ Prompt Digunakan (Contoh)
Bina landing page untuk kedai kek homemade. Iterasi 1: "Bina satu halaman HTML ringkas untuk kedai kek. Ada header dengan nama kedai, hero section, dan footer." Iterasi 2: "Tambah gallery gambar kek β€” 6 kad dalam grid 3 column. Setiap kad ada gambar placeholder, nama kek, dan harga." Iterasi 3: "Tambah section 'Cara Order' β€” 3 langkah mudah. Guna icon untuk setiap langkah. Background section warna berbeza sedikit." Iterasi 4: "Jadikan responsive β€” mobile version ubah grid jadi 1 column. Tambah whatsapp button untuk order terus."
βœ… Hasil

Selepas 4 iterasi, pelajar berjaya menghasilkan landing page profesional untuk kedai kek β€” lengkap dengan gallery produk, sistem order WhatsApp, dan responsive design. Ibunya mula terima order online dalam masa seminggu.

πŸ“š Lesson Learned

"Saya sangka coding susah dan mahal. Rupanya dengan prompting, saya boleh bina website sendiri. Kuncinya: jangan cuba sempurna dalam satu prompt. Mulakan kecil, tambah satu-satu." β€” Pelajar, 22 tahun

πŸ“Œ Masalah

Seorang graduan baru dalam bidang reka bentuk grafik tak punya portfolio online yang profesional. Permohonan kerja selalu gagal sampai ke peringkat interview. Nak upah developer terlalu mahal.

πŸ’‘ Approach

Pelajar menggunakan teknik role-play prompting β€” suruh AI bertindak sebagai frontend developer dan pakar UX. Dia describe visi reka bentuk dalam perkataan, AI translate ke kod.

πŸ“ Prompt Digunakan (Contoh)
Anda seorang frontend developer yang pakar dalam portfolio design. Saya seorang graphic designer dengan 5 projek utama. Bina portfolio page yang: 1. Hero β€” nama saya, tagline "Graphic Designer | Visual Storyteller", dan showcase animated 2. Projek grid β€” 5 kad dengan thumbnail, kategori, dan preview link 3. About section β€” cerita ringkas, pengalaman, dan skill bars 4. Contact β€” form ringkas dengan social media links Tema: Minimalist, putih dengan aksen warna-warni (saya nak tunjuk versatility) Font: Sans-serif yang clean Responsive: ya, mobile-first
βœ… Hasil

Portfolio profesional siap dalam masa 2 jam β€” padahal sebelum ni dia fikir nak belajar coding selama 3 bulan. Portfolio ini diguna untuk memohon kerja sebagai graphic designer. Dalam masa 2 minggu, dia dapat panggilan interview dari 3 syarikat.

πŸ“š Lesson Learned

"Role-play prompting adalah game changer. Saya cuma perlu describe apa yang saya nak dalam bahasa rekaan, AI akan translate ke kod. Tak perlu jadi programmer untuk hasilkan website yang cantik." β€” Pelajar, 24 tahun

πŸ“Œ Masalah

Seorang pelajar yang sedang belajar frontend development stuck dengan CSS bug selama 3 hari. Layout flexboxnya tak menjadi macam yang diharapkan β€” elemen bertindih dan tak responsif. Google search tak jumpa penyelesaian.

πŸ’‘ Approach

Pelajar menggunakan teknik chain-of-thought (CoT) prompting β€” minta AI untuk berfikir langkah demi langkah tentang apa yang mungkin salah, diagnosis punca masalah, dan kemudian cadangkan pembetulan.

πŸ“ Prompt Digunakan (Contoh)
Kod CSS layout saya tak menjadi. Saya dah cuba google tapi tak jumpa solution. Saya nak anda: 1. Terangkan apa yang layout ni cuba capai 2. Diagnosis apa yang salah β€” langkah demi langkah 3. Kenapa ia salah (terangkan konsep flexbox/grid yang relevan) 4. Betulkan kod Jangan terus bagi kod betul. Fikir dan terangkan dulu. Kod saya: [Flexbox layout dengan sidebar + main content + footer β€” pelajar paste kod yang bermasalah] Masalah spesifik: - Sidebar dan main content bertindih pada mobile - Footer tak berada di bawah - Gap antara elemen tak konsisten
βœ… Hasil

AI menerangkan bahawa masalah utama adalah penggunaan flex: 1 tanpa flex-wrap, dan ketiadaan min-width pada flex items. Pelajar bukan sahaja dapat fix bug β€” dia faham konsep flexbox yang sebelum ni tak pernah difahami. Masa penyelesaian: 10 minit (vs 3 hari sebelum ni).

πŸ“š Lesson Learned

"Chain-of-thought prompting ubah cara saya belajar. Daripada minta jawapan terus, saya minta AI ajar saya kenapa sesuatu jadi masalah. Ini macam ada tutor peribadi 24/7." β€” Pelajar, 20 tahun

πŸ’Ž

Ringkasan & Ingatan Utama

Konsep paling penting yang perlu diingat dari modul ini.

πŸ“Œ 5 Perkara Utama

  • Guna formula CIC: Context + Instruction + Constraint = Output Berkualiti. Jika satu elemen hilang, output akan terjejas.
  • Spesifik adalah kunci: Lebih detail yang anda beri, lebih tepat output AI. Jangan biar AI meneka apa yang anda mahu.
  • Format itu penting: Gunakan bullet points, numbered lists, dan headings untuk menstrukturkan prompt anda.
  • Iterasi adalah rakan anda: Output pertama jarang sempurna. Refine, minta perubahan, dan ulang sehingga puas hati.
  • Kenali tool anda: Claude Code untuk reasoning dan konteks mendalam. Codex untuk implementasi cepat dan langsung.

πŸ“– Seterusnya: Latihan

Sekarang anda sudah faham teori prompting, tiba masanya untuk praktik! Buka halaman 10 Latihan Prompt dan mula dari Latihan 1. Setiap latihan direka untuk mengukuhkan satu konsep tertentu.