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

10 Latihan Prompt

10 latihan progresif dari tahap mudah hingga lanjutan. Selesaikan mengikut urutan untuk hasil pembelajaran yang optimum.

📊 Progress Anda

0 / 10 Latihan Selesai
1 2 3 4 5 6 7 8 9 10
1
Generate Teks — Pengenalan Diri
Mudah Claude + Codex

🎯 Objektif

Menulis prompt ringkas untuk mendapatkan teks pengenalan diri. Fokus pada penggunaan Context yang jelas.

📝 Arahan

Tulis prompt yang meminta AI menghasilkan perenggan pengenalan diri untuk profil LinkedIn atau portfolio. Beritahu AI tentang latar belakang, kemahiran, dan matlamat kerjaya anda.

📋 Template Prompt

Tulis satu perenggan pengenalan diri untuk profil LinkedIn saya. Konteks: Saya seorang [jawatan/role] yang berpengalaman dalam [bidang]. Saya pakar dalam [kemahiran utama]. Matlamat saya adalah [matlamat kerjaya]. Gunakan nada profesional tapi mesra. Maksimum 100 patah perkataan. Sertakan kata kunci yang relevan untuk pencari bakat.

📊 Kriteria Lengkap

  • Prompt mengandungi konteks peribadi (latar belakang, kemahiran, matlamat)
  • Output adalah perenggan pengenalan diri yang koheren
  • Nada sesuai untuk LinkedIn (profesional tapi mesra)
  • Memenuhi kekangan yang dinyatakan (maksimum perkataan, nada)
2
Generate Elemen HTML
Mudah Claude + Codex

🎯 Objektif

Menulis prompt untuk menghasilkan elemen HTML asas. Fokus pada Instruction yang jelas dan spesifik.

📝 Arahan

Minta AI mencipta satu kad profil ringkas menggunakan HTML dan CSS. Nyatakan dengan jelas apa yang perlu ada dalam kad tersebut.

📋 Template Prompt

Bina satu kad profil HTML/CSS ringkas. Kad perlu mengandungi: 1. Gambar profil (guna placeholder bulat) 2. Nama dan jawatan 3. Penerangan ringkas (2-3 baris) 4. Tiga butang sosial (email, LinkedIn, GitHub) 5. Background kecerunan (gradient) dari gelap ke lebih gelap Buat dalam SATU file HTML sahaja. CSS guna inline dalam tag <style>. Kad perlu lebar 320px dan berada di tengah page.

📊 Kriteria Lengkap

  • Prompt mengandungi arahan yang jelas tentang apa yang perlu dibina
  • Output adalah satu file HTML yang berfungsi
  • Kad profil mengandungi semua elemen yang dinyatakan (gambar, nama, jawatan, penerangan, butang sosial)
  • Kad berpusat di tengah halaman
3
Prompt dengan Constraint Spesifik
Mudah Claude + Codex

🎯 Objektif

Menulis prompt dengan Constraint yang ketat — warna, saiz, dan format output yang spesifik.

📝 Arahan

Minta AI mencipta button komponen dengan spesifikasi warna, saiz, dan keadaan (state) yang tepat.

📋 Template Prompt

Bina satu komponen button menggunakan HTML dan CSS dengan spesifikasi berikut: Warna: - Background: kecerunan (gradient) dari #06d6f0 (cyan) ke #e040fb (magenta) - Teks: putih (#ffffff) - Hover: kecerunan terbalik (reverse gradient) - Active/ditekan: scaling 0.95 Saiz & Bentuk: - Padding: 14px 32px - Font-size: 16px - Border-radius: 50px (pill shape) - Font-weight: 700 Keadaan (states): - Normal: gradient seperti di atas - Hover: bertukar arah gradient + bayang meningkat - Active: skala mengecil sedikit - Disabled: opacity 0.5, cursor not-allowed Buat dalam satu file HTML. CSS guna inline.

📊 Kriteria Lengkap

  • Prompt menyatakan constraint warna, saiz, dan bentuk dengan jelas
  • Output button mempunyai semua keadaan (normal, hover, active, disabled)
  • Warna dan saiz tepat seperti yang diminta
  • Kod berfungsi tanpa perubahan
4
Role-Play Prompt
Sederhana Claude + Codex

🎯 Objektif

Menggunakan teknik Role-Play Prompting — suruh AI memainkan peranan tertentu untuk mendapatkan output yang lebih kontekstual.

📝 Arahan

Gunakan role-play untuk meminta AI bertindak sebagai frontend developer senior yang melakukan code review. Beri AI kod HTML/CSS yang ringkas dan minta ia review berdasarkan best practices.

📋 Template Prompt

Anda seorang frontend developer senior dengan 10+ tahun pengalaman. Anda pakar dalam HTML semantik, accessibility (WCAG), dan CSS best practices. Sila review kod HTML/CSS di bawah. Berikan maklum balas dalam format: 1. ✅ Apa yang sudah bagus 2. ❌ Apa yang perlu diperbaiki 3. 🚀 Cadangan penambahbaikan (dengan kod contoh) Kod untuk review: [Jika tiada kod yang hendak di-review, tulis kod ringkas yang sengaja ada beberapa isu — contoh: guna tag <div> untuk button, tiada alt text, warna kontras rendah, tiada responsive design]
Tip

Cuba tulis kod HTML/CSS ringkas yang sengaja ada beberapa kesilapan (guna div untuk button, lupa alt text, warna kontras rendah) dan lihat sama ada AI dapat mengesannya.

📊 Kriteria Lengkap

  • Prompt menggunakan role-play (suruh AI jadi pakar)
  • Output mengandungi analisis berstruktur (bagus, perlu diperbaiki, cadangan)
  • AI berjaya mengenal pasti isu dalam kod yang diberikan
5
Betulkan Kod yang Rosak
Sederhana Claude + Codex

🎯 Objektif

Menulis prompt untuk diagnosis dan pembetulan kod. Fokus pada teknik Chain-of-Thought — minta AI terangkan masalah sebelum memberi penyelesaian.

📝 Arahan

Berikut adalah kod HTML yang ada beberapa isu. Tulis prompt yang meminta AI untuk mendiagnosis masalah, menerangkan puncanya, dan kemudian membetulkannya.

📋 Template Prompt

Kod HTML/CSS di bawah ada beberapa masalah. Saya nak anda: 1. Terangkan APA yang tak kena (diagnosis) 2. Terangkan KENAPA ia masalah (sebab) 3. Bagi penyelesaian yang betul (fix) Kod bermasalah: <html> <head> <style> .container { width: 100%; padding: 20px; } .sidebar { width: 30%; float: left; background: #333; } .main { width: 70%; float: left; } .footer { clear: both; text-align: center; } </style> </head> <body> <div class="container"> <div class="sidebar"> <p>Navigasi</p> </div> <div class="main"> <h1>Selamat Datang</h1> <p>Kandungan utama di sini.</p> </div> <div class="footer"> <p>Hak Cipta 2026</p> </div> </div> </body> </html> Jangan terus beri kod betul. Terangkan masalah dulu. Guna pendekatan mobile-first untuk penyelesaian.

📊 Kriteria Lengkap

  • Prompt meminta diagnosis sebelum penyelesaian
  • AI berjaya mengenal pasti isu (guna float layout yang outdated, tak responsive, kontras warna sidebar rendah)
  • Penyelesaian menggunakan pendekatan mobile-first (flexbox/grid)
  • Output mengandungi penerangan + kod yang dibetulkan
6
Explain Kod — Debugging dengan AI
Sederhana Claude Code

🎯 Objektif

Menggunakan AI untuk memahami kod yang sedia ada. Fokus pada teknik Explain Code — sesuai untuk Claude Code yang cemerlang dalam reasoning.

📝 Arahan

Minta AI menerangkan kod JavaScript secara terperinci. Tujuannya adalah untuk MEMAHAMI, bukan mengubah suai.

📋 Template Prompt

Terangkan kod JavaScript di bawah secara terperinci. Saya nak faham: 1. Apa fungsi utama kod ni? 2. Bagaimana setiap bahagian berfungsi? 3. Apa pattern/teknik yang digunakan? 4. Kenapa guna pendekatan ini? 5. Apa potential bugs atau isu prestasi? Kod: function processData(items) { const result = []; for (let i = 0; i < items.length; i++) { if (items[i].status === 'active') { const formatted = { id: items[i].id, name: items[i].name.toUpperCase(), total: items[i].price * items[i].quantity, discount: items[i].price > 100 ? 0.1 : 0, finalPrice: items[i].price * items[i].quantity * (1 - (items[i].price > 100 ? 0.1 : 0)) }; result.push(formatted); } } return result; } Gunakan analogi atau contoh mudah dalam penerangan.

📊 Kriteria Lengkap

  • Prompt meminta penerangan menyeluruh tentang kod
  • Output menerangkan fungsi, struktur, dan pattern kod
  • Menunjukkan potensi isu atau penambahbaikan
  • Guna analogi untuk memudahkan kefahaman
7
Iterative Refinement (3x Refine)
Lanjutan Claude + Codex

🎯 Objektif

Mempraktikkan Iterative Refinement — mulakan dengan prompt ringkas, kemudian refine sebanyak 3 kali dengan menambah detail setiap kali.

📝 Arahan

Ini adalah latihan 3-peringkat. Anda akan menulis prompt yang SAMA sebanyak 3 kali, setiap kali dengan detail tambahan. Perhatikan bagaimana output bertambah baik dengan setiap iterasi.

📋 Langkah 1: Prompt Asas

Bina satu halaman HTML ringkas untuk blog peribadi saya.
💡 Output Dijangka: Halaman blog yang sangat ringkas tanpa banyak styling.

📋 Langkah 2: Refinement Pertama

Guna output dari Langkah 1, kemudian tulis prompt refinement:

Bagus, tapi saya nak tambah: - Tema gelap (#0b0d17) dengan teks putih - Header dengan nama blog dan navigasi (3 menu: Home, Artikel, Contact) - Footer dengan hak cipta - Setiap artikel ada kad dengan border dan padding - Responsive — 3 column pada desktop, 1 column pada mobile
💡 Output Dijangka: Halaman yang lebih terstruktur dengan tema gelap dan responsive design.

📋 Langkah 3: Refinement Kedua

Guna output dari Langkah 2, refine lagi:

Cantik! Sekarang tambah: - Animasi fade-in untuk kad artikel apabila halaman dimuat - Hover effect pada kad — naik sikit dan bayang bertambah - Gradient aksen dari cyan ke magenta pada header dan footer - Font: 'Inter' atau 'Segoe UI' untuk tajuk, system-ui untuk isi - Smooth scroll untuk navigasi

📊 Kriteria Lengkap

  • Melengkapkan ketiga-tiga peringkat iterasi
  • Setiap iterasi menambah nilai dan detail yang spesifik
  • Output akhir jauh lebih baik daripada output pertama
  • Dokumentasikan perbezaan antara output iterasi 1, 2, dan 3
8
Codex-Specific Prompt Style
Lanjutan Codex

🎯 Objektif

Menulis prompt yang dioptimumkan untuk Codex — ringkas, langsung, dan berorientasikan kod.

📝 Arahan

Tulis prompt dalam gaya Codex (direct, action-oriented, minimal narration) untuk menghasilkan fungsi JavaScript yang memproses senarai tugasan (to-do list). Prompt mesti ringkas tetapi masih mengandungi semua keperluan.

📋 Template Prompt (Gaya Codex)

Write a JavaScript function manageTodos(action, data) Actions: - 'add' — add new todo { id, title, completed: false } - 'toggle' — toggle completed status by id - 'remove' — remove todo by id - 'list' — return all todos, optionally filter by status (all/active/completed) Rules: - Use an array as storage (module-level) - Return { success: boolean, data: any, error: string|null } - Validate: title required, max 100 chars - Error messages in Malay - No classes, use pure functions - Include JSDoc comments

📊 Kriteria Lengkap

  • Prompt ringkas dan langsung (gaya Codex)
  • Menggunakan bullet points dan format yang jelas
  • Output adalah fungsi JavaScript yang berfungsi sepenuhnya
  • Tiada narasi atau penerangan yang berlebihan dalam prompt
9
Bandingkan Claude vs Codex Output
Lanjutan Claude + Codex

🎯 Objektif

Membandingkan output dari Claude Code dan Codex untuk prompt yang SAMA. Memahami perbezaan gaya dan kualiti output.

📝 Arahan

Tulis SATU prompt yang sama. Jalankan pada Claude Code dan Codex. Bandingkan output dan dokumentasikan perbezaan.

📋 Prompt yang Sama untuk Kedua-dua Platform

Bina satu komponen jadual (table) untuk memaparkan data pelajar. Keperluan: - Column: Nama, Umur, Kursus, Status (Aktif/Tidak Aktif), Tindakan - Minimum 5 row data dummy - Guna CSS untuk styling — header row warna gelap (#1a1f2e), row alternate warna berbeza - Hover effect pada row - Responsive — pada mobile, ubah ke format card (setiap row jadi kad) - Tambah search box untuk filter nama pelajar - Satu file HTML sahaja Sertakan komen dalam kod untuk menerangkan fungsi setiap bahagian.

📋 Analisis Perbandingan

Selepas menjalankan prompt pada kedua-dua platform, analisis perbezaan berikut:

📊 Kriteria Lengkap

  • Prompt yang SAMA dijalankan pada kedua-dua platform
  • Output dari kedua-dua platform didokumentasikan
  • Analisis perbandingan dibuat (sekurang-kurangnya 3 perbezaan dikenal pasti)
  • Kesimpulan tentang bila guna Claude Code vs Codex
10
Free Prompt — Topik Pilihan Anda
Lanjutan Claude + Codex

🎯 Objektif

Mengaplikasikan SEMUA teknik yang telah dipelajari dalam satu prompt pilihan anda sendiri. Gunakan Context + Instruction + Constraint, teknik role-play/few-shot/CoT, dan iterative refinement.

📝 Arahan

Pilih SATU projek mini yang anda ingin bina menggunakan AI. Ia boleh jadi apa sahaja — halaman web, alat JavaScript, komponen UI, skrip automasi, atau apa-apa yang relevan dengan minat anda.

Tulis prompt lengkap menggunakan semua teknik yang telah dipelajari:

📋 Template Prompt (Guna sebagai permulaan)

[Isikan dengan projek pilihan anda] Konteks: Saya nak bina [jenis projek] untuk [tujuan/spesifikasi]. Arahan: 1. [Langkah 1] 2. [Langkah 2] 3. [Langkah 3] Batasan: - [Teknologi / format output] - [Gaya / reka bentuk] - [Saiz / had lain] Teknik: [Role-play / Few-shot / CoT] [Gunakan satu teknik lanjutan dalam prompt]
Cadangan Projek Mini

Tiada idea? Cuba salah satu ini: (1) Halaman tribute untuk tokoh kegemaran, (2) Kalkulator BMI interaktif, (3) Galeri gambar ringkas, (4) Halaman "About Me" yang interaktif, (5) Alat penukar unit suhu/mata wang, (6) Senarai bacaan buku, (7) Papan notice/dashboard ringkas.

📊 Kriteria Lengkap

  • Prompt mengandungi Context + Instruction + Constraint yang jelas
  • Menggunakan sekurang-kurangnya satu teknik lanjutan (role-play, few-shot, atau CoT)
  • Output adalah projek mini yang berfungsi sepenuhnya
  • Melakukan sekurang-kurangnya satu refinement selepas output pertama
  • Mendokumentasikan proses dan hasil akhir
📚

Prompt Template Library

10 template siap guna untuk pelbagai situasi. Copy, isi tempat kosong [seperti_ini], dan jalankan.

1 Landing Page
Bina landing page lengkap untuk produk atau perkhidmatan. Template paling asas dan paling kerap digunakan.
Bila guna:
Memulakan projek baru, nak buat halaman promosi cepat, atau nak prototaip idea perniagaan.
Bina landing page untuk produk. Konteks: Target saya adalah target audience. Seksyen: Hero, Features, Testimonials, Pricing, Footer. Tema: gelap/terang. Responsive: ya. Satu file HTML.
2 Role-Based Build
Suruh AI扮演 peranan tertentu untuk hasilkan komponen dengan perspektif profesional.
Bila guna:
Nak hasil yang lebih berautoriti, untuk tugas khusus yang perlukan expertise, atau nak belajar dari perspektif pakar.
Sebagai role (cth: frontend developer senior), bina component untuk audience. Guna teknologi. Pastikan keperluan khusus. Sertakan best practices.
3 Fix My Code
Minta AI diagnosis dan baiki kod yang bermasalah. Sesuai untuk debugging.
Bila guna:
Kod tak jalan, ada error message, atau output tak seperti dijangka. Jangan google — minta AI diagnose.
Baiki kod ini: paste code Masalah: describe apa jadi vs apa sepatutnya jadi Teknologi: HTML/CSS/JS/etc Terangkan punca sebelum bagi fix.
4 Explain Code
Minta AI terangkan kod langkah demi langkah. Sesuai untuk pembelajaran dan code review.
Bila guna:
Nak faham kod orang lain, nak belajar konsep baru, atau nak pastikan kod yang ditulis AI selamat digunakan.
Jelaskan kod ini langkah demi langkah: paste code Saya level: beginner/intermediate Fokus: apa fungsi kod, bagaimana ia kerja, apa pattern digunakan, potensi isu. Guna analogi mudah.
5 Multiple Variations
Minta AI hasilkan beberapa variasi komponen dengan gaya berbeza untuk dipilih.
Bila guna:
Nak explore pilihan design, nak bandingkan pendekatan berbeza, atau nak dapatkan inspirasi.
Bina number variasi component dengan style berbeza. Variasi 1: minimalist/modern Variasi 2: colourful/playful Variasi 3: corporate/professional Setiap variasi dalam satu file HTML berasingan. Sertakan komen ringkas untuk setiap variasi.
6 Theme Conversion
Tukar reka bentuk sedia ada kepada tema baru tanpa mengubah struktur atau fungsi.
Bila guna:
Nak tukar tema sedia ada (light ke dark, atau sebaliknya), atau nak adjust design ikut brand guidelines.
Tukar design sedia ada kepada style theme. Kod sedia ada: paste code Perubahan yang diperlukan: 1. tukar palet warna 2. ubah font/spacing 3. adjust component style Jangan ubah struktur HTML atau fungsi JavaScript.
7 Documentation
Minta AI tulis dokumentasi untuk kod — JSDoc, README, atau comment dalam kod.
Bila guna:
Nak dokumentasikan kod untuk pasukan, nak sedia README untuk GitHub, atau nak tambah JSDoc comments.
Tulis documentation untuk kod ini: paste code Format: JSDoc/README/comments dalam kod Guna Bahasa Melayu untuk penerangan. Fokus: parameter, return value, contoh penggunaan, dan edge cases.
8 Refactor Code
Minta AI refactor kod untuk lebih efisien, bersih, atau modular tanpa ubah fungsi.
Bila guna:
Kod berfungsi tapi nampak messy, nak optimize performance, atau nak guna pattern yang lebih baik.
Refactor kod ini jadi lebih efisien: paste code Matlamat: lebih bersih/lebih pantas/lebih modular Guna pattern/approach Jangan ubah functionality asal. Sertakan penerangan ringkas tentang apa yang diubah dan kenapa.
9 Bug Hunting
Minta AI cari bug dalam kod dengan pendekatan sistematik — sesuai untuk debugging kompleks.
Bila guna:
Kod nampak betul tapi tak berfungsi, ada bug halus yang susah dikesan, atau nak second opinion.
Cari bug dalam kod ini: paste code Simptom: apa yang berlaku vs apa yang sepatutnya Guna pendekatan sistematik: 1. Scan untuk syntax errors 2. Check logic flow 3. Check edge cases 4. Check state management Terangkan setiap bug yang ditemui dan cadangkan fix.
10 Mobile Responsive
Tukar layout sedia ada kepada versi responsive untuk mobile dan tablet.
Bila guna:
Design dah siap untuk desktop tapi tak responsive, atau nak optimize mobile experience.
Bina responsive version untuk mobile: paste code Breakpoints: tablet 768px, mobile 480px Approach: mobile-first Pastikan: - Navigation jadi hamburger menu - Grid ubah dari multi-column ke single column - Font size dan spacing adjust untuk skrin kecil - Touch targets minimum 44x44px Jangan ubah kandungan atau struktur asas.

🎉 Tahniah! Anda telah melengkapkan semua latihan!

Anda kini mempunyai asas yang kukuh dalam Seni Prompting. Teruskan praktik dan explore teknik-teknik lanjutan.

📄 Rujuk Cheatsheet 📖 Ulang Modul Pelajar 📋 Kembali ke Modul Utama