← Kembali ke Modul 👨‍🏫 Panduan Pengajar 📖 Modul Pelajar ✏️ 10 Latihan
Fasa 2 — Cheatsheet

Prompting Cheatsheet

Rujukan pantas satu halaman — struktur prompt, power keywords, cheat codes, dan template siap guna.

📐

Struktur Prompt Template

Guna template ini untuk sebarang prompt. Isikan bahagian yang digariskan.

Template Universal
[KONTEKS — Siapa anda, apa projek, untuk siapa] [ARAHAN — Apa yang perlu dibuat. Guna numbered list untuk multi-step] 1. [Langkah pertama] 2. [Langkah kedua] 3. [Langkah ketiga] [BATASAN — Format output, teknologi, gaya, saiz] - [Satu file HTML / CSS / JS] - [Warna, font, saiz] - [Responsive / mobile-first] [FORMAT OUTPUT — Bagaimana nak sampaikan hasil] - [Dengan komen / tanpa komen] - [Format tertentu]

10 Power Keywords

Kata kunci yang menjadikan prompt anda lebih tepat dan berkesan.

1. "Bina"

Arahan kuat yang menghasilkan output dari awal. Ganti "buat" dengan "bina" untuk hasil yang lebih tersusun.

"Bina satu komponen..."

2. "Sebagai"

Memulakan role-play. Suruh AI jadi pakar untuk hasil yang lebih berautoriti.

"Sebagai frontend developer..."

3. "Konteks"

Memaksa anda memberikan latar belakang. Trigger untuk pemikiran kontekstual.

"Konteks: Saya nak bina..."

4. "Langkah"

Memecahkan arahan kompleks kepada bahagian kecil. Lebih mudah AI fokus.

"Langkah 1: ... Langkah 2: ..."

5. "Contoh"

Memberi contoh input/output (few-shot). AI pandai meniru pattern.

"Contoh: Input X → Output Y"

6. "Kenapa"

Minta AI terangkan reasoning. Sesuai untuk pembelajaran dan code review.

"Terangkan kenapa pilihan ini..."

7. "Jangan"

Constraint negatif — beritahu AI apa yang TIDAK boleh dilakukan. Sangat efektif.

"Jangan guna framework."

8. "Ubah"

Untuk iterative refinement. Ganti "tambah" dengan arahan yang lebih spesifik.

"Ubah warna button kepada..."

9. "Bandingkan"

Minta AI buat analisis perbandingan. Berguna untuk memilih antara pendekatan.

"Bandingkan pendekatan A vs B"

10. "Ringkaskan"

Untuk mendapatkan intipati tanpa detail berlebihan. Selamatkan masa.

"Ringkaskan kod ini dalam..."
⚔️

Claude Code vs Codex — Cheat Codes

Prompt yang dioptimumkan untuk setiap platform. Guna cheat code yang sesuai.

🧠 Claude Code — Nuanced

"Anda seorang arkitek frontend. Saya nak bina sistem reka bentuk. Konteks: Pasukan saya ada 5 developer. Kami guna React + Tailwind. Cadangkan: 1. Struktur komponen 2. Sistem token reka bentuk 3. Strategi testing Terangkan kebaikan dan keburukan setiap cadangan."

⚡ Codex — Direct

"Create a Button component in React + Tailwind. Props: variant (primary/secondary), size (sm/md/lg), disabled, onClick Include: - TypeScript types - Tailwind classes - Loading state - Default export No explanation, just code."

🔄 Bila Guna Apa

Claude Code untuk:

  • Architecture planning
  • Code review & debugging
  • Refactoring besar
  • Mempelajari kod baru
  • Dokumentasi & explanation
  • Projek kompleks

Codex untuk:

  • Implementasi cepat
  • Snippet & komponen kecil
  • CRUD boilerplate
  • Tugas repetitif
  • Prototaip pantas
  • Auto-complete inline
🚀

Example Prompts — Copy & Paste

Prompt siap guna untuk tugasan harian. Copy, paste, dan ubah suai mengikut keperluan.

🌐 Build a Full Page

Bina landing page lengkap dengan AI.

Bina satu landing page untuk [produk/perkhidmatan]. Konteks: Target saya adalah [target audience]. Matlamat: [contoh: dapatkan leads, jual produk]. Seksyen: 1. Hero — headline besar + CTA button 2. Features — 3-4 kotak kelebihan produk 3. Testimonial — 3 testimoni pelanggan 4. Pricing — 3 tier pricing 5. Footer — copyright + social links Teknologi: HTML + CSS sahaja (satu file) Tema: [gelap/terang/pudina] Responsive: desktop, tablet, mobile Animasi: fade-in pada scroll

🐛 Fix a Bug

Diagnosis dan betulkan kod yang bermasalah.

Kod [HTML/CSS/JS] saya ada bug. Saya nak anda: 1. Terangkan apa yang tak kena 2. Terangkan kenapa ia jadi masalah 3. Betulkan kod Masalah: [penerangan ringkas tentang apa yang berlaku vs apa yang sepatutnya berlaku] Kod: [paste kan kod di sini] Jangan terus beri jawapan — fikir dan terangkan dulu. Guna pendekatan step-by-step debugging.

Add a Feature

Tambah fungsi baru pada projek sedia ada.

Saya nak tambah feature [nama feature] pada projek saya. Konteks: Projek saya adalah [penerangan ringkas]. Stack: [teknologi yang digunakan]. Feature yang nak ditambah: - [keperluan 1] - [keperluan 2] - [keperluan 3] Kod sedia ada: [paste kan kod relevant] Sila: 1. Cadangkan pendekatan terbaik 2. Tunjukkan kod yang perlu diubah 3. Terangkan bagaimana ia berfungsi

📖 Explain Code

Fahami kod yang kompleks atau tak dikenali.

Terangkan kod di bawah secara terperinci. Saya nak tahu: 1. Apa fungsi kod ini? 2. Bagaimana ia berfungsi step-by-step? 3. Apa pattern/teknik yang digunakan? 4. Apa potensi isu atau penambahbaikan? Kod: [paste kan kod di sini] Guna analogi mudah untuk terangkan konsep. Saya level: [beginner/intermediate/advanced]

🎨 Design Component

Bina komponen UI dengan spesifikasi tepat.

Bina komponen [jenis komponen] yang: Fungsi: - [fungsi 1] - [fungsi 2] - [fungsi 3] Reka Bentuk: - Warna: [warna utama dan aksen] - Font: [font family] - Saiz: [saiz dan spacing] - Responsive: [breakpoints] Keadaan (states): - Default, Hover, Active, Disabled, Error - Loading state (jika relevan) Teknologi: [HTML+CSS / React / Tailwind / etc.] Format: satu komponen standalone Sertakan komen dalam kod.

🔍 Code Review

Minta AI review kod untuk kualiti dan best practices.

Anda seorang senior developer. Review kod saya. Fokus pada: 1. HTML semantik & accessibility 2. CSS best practices & responsive 3. JavaScript performance & patterns 4. Security vulnerabilities 5. Code organisation & readability Kod: [paste kan kod] Format output: ✅ Bagus: ... ❌ Perlu dibaiki: ... 🚀 Cadangan: ... Beri priority (High/Medium/Low) untuk setiap isu.
📋

Quick Reference — Prompt Formula

Formula ringkas untuk pelbagai situasi biasa.

🌐 Landing Page

"Bina landing page untuk [produk]. Target: [audience]. Seksyen: Hero, Features, Testimonials, CTA, Footer. Tema: [gelap/terang]. Responsive: ya. Satu file HTML."

🧩 Komponen UI

"Bina komponen [nama] dengan [teknologi]. Props: [senarai props]. States: default, hover, active, disabled. Responsive: ya."

🐛 Debugging

"Kod ni tak berfungsi. [simptom]. Saya guna [teknologi]. Error: [error msg]. Terangkan punca dan betulkan."

📖 Explain

"Terangkan kod ni macam saya beginner. Fokus: apa fungsi, bagaimana ia kerja, pattern digunakan, potensi isu."

🔄 Refactor

"Refactor kod ni untuk [matlamat: lebih bersih/lebih pantas/modular]. Guna [pattern/approach]. Jangan ubah functionality."

✅ Code Review

"Review kod ni. Fokus: security, performance, accessibility, best practices. Guna format: ✅ ❌ 🚀 dengan priority."
🐛

10 Kesilapan Biasa & Cara Baiki

Kesilapan prompting yang paling kerap dilakukan oleh pelajar — dan bagaimana untuk membetulkannya.

Kenapa Berlaku

Anggap AI boleh baca fikiran. Pelajar tulis prompt ringkas tanpa konteks, arahan spesifik, atau constraint. Contoh: "Buat website" — terlalu umum.

Cara Baiki

Guna struktur CIC: Context + Instruction + Constraint. Beritahu AI latar belakang projek, arahan yang spesifik, dan format output yang dikehendaki.

Contoh
"Buat website."
"Bina landing page untuk kedai kopi. Target: pelajar universiti. Seksyen: Hero, Menu, Location, Footer. Tema: gelap dengan aksen emas. Satu file HTML."
Kenapa Berlaku

Pelajar nak jimat masa dengan memasukkan semua keperluan dalam satu prompt panjang. Akibatnya, AI tertinggal detail atau fokus pada bahagian yang salah.

Cara Baiki

Asingkan kepada beberapa prompt berasingan. Satu prompt untuk satu fokus utama. Guna iterative refinement — mula dengan asas, tambah satu-satu.

Contoh
"Buatkan website portfolio dengan navbar, hero, gallery, about, contact form, blog, testimonial, pricing, footer, dark mode, responsive, animasi... (dan 20 lagi perkara)"
Iterasi 1: "Bina portfolio page dengan navbar dan hero section."
Iterasi 2: "Tambah gallery grid dengan 6 projek."
Iterasi 3: "Tambah contact form dan footer."
Kenapa Berlaku

Pelajar hanya fokus pada arahan (apa nak dibuat) tapi lupa nak tetapkan batasan (macam mana nak dibuat). AI akan buat keputusan sendiri tentang format, teknologi, dan gaya.

Cara Baiki

Sentiasa nyatakan constraint: format output, teknologi, warna, saiz, responsive, dan apa yang TIDAK boleh digunakan.

Contoh
"Bina contact form."
"Bina contact form HTML dengan CSS inline. Field: nama, email, mesej. Validation: semua field required. Guna tema gelap. Submit button gradient cyan-magenta. Satu file sahaja."
Kenapa Berlaku

Pelajar terlalu percayakan AI dan terus guna output tanpa semak. Padahal AI boleh buat kesilapan — guna library yang tak wujud, logik yang salah, atau security vulnerability.

Cara Baiki

Biasakan semak output AI sebelum guna. Test kod, baca documentation, dan minta AI explain bagian yang tak faham. Jangan trust blindly.

Contoh
(Terima output AI terus tanpa uji — lepas tu pelik kenapa tak jalan)
"Review kod yang awak hasilkan tadi. Check: adakah ada security issues? Adakah kod ni efficient? Apa yang boleh diperbaiki?"
Kenapa Berlaku

Pelajar tulis prompt dalam English (sama ada sebab bias atau sebab keyboard) tapi nak output dalam Bahasa Melayu. AI akan confuse dan mungkin campur-campur.

Cara Baiki

Tulis prompt dalam bahasa yang sama dengan output yang dikehendaki. Jika nak output BM, tulis prompt dalam BM. Jika terpaksa guna English, nyatakan dengan jelas: "Output dalam Bahasa Melayu."

Contoh
"Create a landing page for my cake shop. Output dalam BM." (AI mungkin hasilkan code dengan comments English)
"Bina landing page untuk kedai kek. Semua teks dan komen dalam Bahasa Melayu. Kecuali code keywords — biar dalam English."
Kenapa Berlaku

Pelajar describe style secara abstrak — "buat yang cantik", "design moden" — tanpa bagi contoh konkret. AI tak ada referensi visual tentang apa yang dimaksudkan.

Cara Baiki

Guna teknik few-shot — beri AI contoh input dan output yang dikehendaki. Atau rujuk website/style yang sedia ada: "Buat macam design Stripe" atau "Guna palette warna macam Tailwind default."

Contoh
"Buat button yang cantik."
"Bina button macam contoh ni: Contoh: Button biru dengan border radius 8px, padding 12px 24px, hover jadi lebih gelap. Guna style yang sama tapi warna magenta (#e040fb)."
Kenapa Berlaku

Pelajar puas hati dengan output pertama dan terus stop. Padahal kebanyakan output pertama boleh diperbaiki dengan refinement ringkas. Anggap "OK dah cukup" tanpa semak betul-betul.

Cara Baiki

Buat minimum 2-3 iterasi untuk setiap prompt. Selepas output pertama, tanya diri: "Apa yang boleh diperbaiki?" Kemudian refine. AI boleh jadi lebih baik dengan arahan tambahan.

Contoh
"OK siap." (selepas output pertama — tanpa semak keperluan lain)
"Bagus. Sekarang: (1) Tukar warna button kepada gradient, (2) Kecilkan padding footer, (3) Tambah animasi fade-in pada hero."
Kenapa Berlaku

Pelajar bias pada satu tool (biasanya Claude Code sebab power) dan guna untuk semua tugas — termasuk tugas yang sebenarnya lebih cepat dengan Codex (snippet ringkas, auto-complete, implementasi cepat).

Cara Baiki

Kenali kekuatan setiap tool. Claude Code untuk: reasoning, code review, architecture, refactoring besar. Codex untuk: snippet cepat, implementasi langsung, boilerplate, auto-complete.

Contoh
Guna Claude Code untuk tulis satu fungsi JavaScript ringkas (10 baris) — ambil masa lebih lama dari perlu.
Guna Codex untuk snippet ringkas — dapat dalam masa 5 saat. Simpan Claude Code untuk tugas yang perlukan reasoning mendalam.
Kenapa Berlaku

Pelajar tak puas hati dengan output dan run prompt yang SAMA berulang kali dengan harapan AI akan bagi jawapan berbeza. AI (terutamanya dengan temperature rendah) akan bagi hasil yang serupa.

Cara Baiki

Jangan repeat prompt yang sama — ubah approach. Tambah detail, tukar perspektif, atau guna teknik berbeza (role-play, few-shot, CoT). Jika tak puas hati, refine prompt, bukan ulang prompt.

Contoh
(Run prompt "Buat navbar" 5 kali — dapat hasil sama setiap kali)
"Buat navigation bar. Tambah: menu items Portfolio dan Contact. Jadikan sticky. Guna hover effect dengan underline." (prompt di-refine, bukan di-repeat)
Kenapa Berlaku

Pelajar tulis prompt yang bagus, dapat hasil yang memuaskan, tapi tak simpan prompt tu. Bila perlu buat projek serupa, terpaksa mula dari kosong dan fikir semula.

Cara Baiki

Bina library peribadi prompt yang berkesan. Simpan dalam fail markdown, notes app, atau GitHub Gist. Kategorikan mengikut jenis: landing page, component, debugging, refactoring, dll.

Contoh
(Setiap kali nak buat landing page, mula dari prompt kosong — "Buat landing page")
(Buka folder 'prompt-library/landing-page-template.txt' — ubah suai sikit, terus guna. Jimat 80% masa.)