Tulis Prompt untuk Apps ANDA
Semua prompt dalam bengkel ini ialah contoh. Kekuatan sebenar vibe coding ialah bila anda boleh tulis prompt sendiri untuk masalah anda sendiri. Panduan ini menunjukkan caranya.
1 Formula CTFC — Tulang Belakang Setiap Prompt
Setiap prompt yang baik ada 4 komponen ini. Ingat formula CTFC:
C
CONTEXT — Latar Belakang
Beritahu AI: Siapa pengguna? Konteks apa?
"Untuk guru Sains Tingkatan 1 di sekolah menengah Malaysia. Pengguna utama: murid umur 13 tahun."
T
TASK — Tugas Spesifik
Apa anda nak AI bina? Specific!
"Bina kuiz interaktif berkenaan topik 'Sel & Hidupan' — 10 soalan objektif."
F
FORMAT — Cara Hasil Dipaparkan
Bagaimana UI/UX patut kelihatan?
"Satu soalan per skrin, 4 pilihan A/B/C/D, animasi betul/salah, paparkan skor di akhir."
C
CONSTRAINTS — Had & Syarat
Apa yang WAJIB / TAK BOLEH ada?
"Bahasa Melayu sepenuhnya, warna pastel mesra kanak-kanak, font besar (≥18px), mobile-friendly."
2 Cara Adaptasi Prompt Sedia Ada
Cara paling cepat: ambil prompt yang ada dalam bengkel ini, salin, kemudian ubah 4 elemen CTFC sahaja. Contoh:
PROMPT ASAL (dari Level 1)
Bina kuiz interaktif untuk murid Tahun 4 sekolah rendah: Topik: Operasi tambah & tolak dalam lingkungan 10,000 Bilangan soalan: 10 Format: 4 pilihan jawapan A/B/C/D Reka bentuk: Mesra kanak-kanak, warna cerah biru-hijau Bahasa: Bahasa Melayu
DIADAPTASI UNTUK ANDA
Bina kuiz interaktif untuk pelajar Tingkatan 3: Topik: Sejarah - Tamadun Awal Asia Tenggara Bilangan soalan: 10 Format: 4 pilihan jawapan A/B/C/D Reka bentuk: Profesional, warna merah-emas tema Sejarah Bahasa: Bahasa Melayu
Hanya 4 perubahan dibuat: tahap pelajar, topik subjek, tema warna, gaya reka bentuk. Selebihnya kekal!
3 Templat Prompt untuk Idea Lazim Guru
📊 Sistem Pengurusan Markah / Rekod
Bina sistem rekod [JENIS REKOD - cth: markah ujian / kehadiran / aktiviti] untuk [PERANAN PENGGUNA - cth: guru kelas 5 Bestari]: Data yang direkod: - [FIELD 1 - cth: nama murid (text)] - [FIELD 2 - cth: tarikh (date)] - [FIELD 3 - cth: nilai/status (dropdown)] - [FIELD 4...] Ciri-ciri: - Borang masuk data - Jadual paparan semua rekod - Butang padam setiap rekod - Statistik ringkas (total, purata, dsb) - Export ke CSV Reka bentuk: [STYLE - cth: warna biru korporat, mobile-friendly] Bahasa: Bahasa Melayu
🎮 Kuiz / Permainan Pembelajaran
Bina [JENIS - cth: kuiz / flashcard / memory game / word puzzle] untuk [TAHAP - cth: murid Tahun 5]: Topik: [TOPIK SPESIFIK - cth: Pecahan Tahun 5, bukan "Matematik" sahaja] Bilangan item: [BERAPA - cth: 10 soalan / 15 flashcard] Mekanik permainan: - [MEKANIK 1 - cth: pilih jawapan A/B/C/D] - [MEKANIK 2 - cth: skor + butang Cuba Lagi] - [BONUS - cth: animasi confetti bila 100%] Reka bentuk: [STYLE - cth: mesra kanak-kanak, warna pastel, font besar] Bahasa: Bahasa Melayu
🏫 Borang / Sistem Pentadbiran Sekolah
Bina sistem [TUJUAN - cth: tempahan bilik / aduan pelajar / pendaftaran aktiviti] untuk [PENGGUNA - cth: staf sekolah menengah]: Borang isi: - [INPUT 1 - cth: Nama pengguna (text)] - [INPUT 2 - cth: Tarikh (date picker)] - [INPUT 3 - cth: Pilihan (dropdown dengan options X, Y, Z)] - [INPUT 4 - cth: Catatan (textarea)] Selepas hantar: - Toast notification "Berjaya dihantar" - Paparkan dalam jadual rekod yang ada - Highlight rekod hari ini Reka bentuk: Profesional, warna [PILIH - cth: biru korporat sekolah] Bahasa: Bahasa Melayu
📚 Alat Bantu Mengajar (PdP)
Bina alat bantu mengajar berbentuk [JENIS - cth: timer countdown / random name picker / wheel spinner / matching exercise]: Tujuan dalam PdP: [JELASKAN - cth: untuk pilih murid menjawab soalan secara rawak supaya semua terlibat] Ciri-ciri: - [CIRI 1 - cth: senarai murid boleh di-edit (tambah/padam)] - [CIRI 2 - cth: animasi spinning yang menarik] - [CIRI 3 - cth: bunyi 'ding' bila tamat] Reka bentuk: [STYLE - cth: full-screen, font sangat besar untuk classroom display] Bahasa: Bahasa Melayu
🧮 Kalkulator Khusus / Tools Pengiraan
Bina kalkulator [JENIS - cth: gred SPM / nilai BMI / tarikh cuti panjang / kos cetakan]: Input dari pengguna: - [INPUT 1 - cth: markah peperiksaan (number)] - [INPUT 2 - cth: ...] Logik pengiraan: - [PENJELASAN - cth: Jika markah 80-100 = A+, 70-79 = A, ...] Output yang dipaparkan: - [OUTPUT 1 - cth: gred dalam huruf besar] - [OUTPUT 2 - cth: penerangan ringkas] - [BONUS - cth: cadangan tindakan susulan] Reka bentuk: [STYLE - cth: clean & minimalist, mobile-first] Bahasa: Bahasa Melayu
4 5 Kesilapan Biasa & Cara Elak
❌ Prompt terlalu vague
"Bina apps belajar bahasa" — AI tak tahu bahasa apa, untuk siapa, apa ciri.
✓ Betulkan: "Bina flashcard untuk belajar vocab Bahasa Inggeris Tingkatan 1 — 20 perkataan tema 'School', dengan butang flip & shuffle."
❌ Campur 5 idea dalam satu prompt
"Bina sistem yang ada kuiz, sistem markah, login, jadual kelas, dan ramalan PT3..." — AI akan keliru & hasil tidak fokus.
✓ Betulkan: Bina SATU ciri pada satu prompt. Mula kuiz dulu, kemudian prompt susulan tambah sistem markah.
❌ Tidak nyatakan bahasa
AI default ke Bahasa Inggeris kalau tak diberitahu. Murid sekolah rendah akan keliru.
✓ Betulkan: Selalu tambah "Bahasa Melayu sepenuhnya" atau "BM untuk UI, English OK untuk variable code."
❌ Lupa nyatakan platform target
Tak sebut "mobile" → AI bina layout desktop. Kemudian guru frust bila tunjuk di phone.
✓ Betulkan: Selalu nyatakan "mobile-friendly", "responsive", atau "tablet & phone".
❌ Stop selepas hasil pertama
Vibe coding bukan one-shot. Hasil pertama hampir mesti perlu iterasi.
✓ Betulkan: Sentiasa iterate: "Buat butang lebih besar", "Tukar warna ke ungu", "Tambah animasi confetti". Setiap prompt susulan = penambahbaikan.
5 Frasa Prompt Berguna untuk Iterasi
Selepas apps pertama siap, gunakan frasa ini untuk tambah baik:
Untuk Reka Bentuk
- "Tukar tema warna ke [warna] dengan aksen [warna]"
- "Buat font lebih besar — minimum 18px"
- "Tambah dark mode toggle"
- "Buat lebih clean & minimalist"
Untuk Ciri Baru
- "Tambah butang Reset"
- "Tambah export ke CSV/Excel"
- "Tambah filter / search bar"
- "Tambah validation (input mesti antara X dan Y)"
Untuk Engagement
- "Tambah animasi confetti bila berjaya"
- "Tambah sound effect 'ding' / 'buzz'"
- "Tambah progress bar"
- "Tambah leaderboard / pencapaian"
Untuk Pembaikan
- "Audit kod ini & tambah baik aksesibiliti"
- "Test mobile responsiveness — perbetulkan jika ada isu"
- "Tambah error handling bila input kosong"
- "Refactor kod supaya lebih clean & maintainable"
6 Cheat Sheet — Template Universal
Salin template ini dan isi sahaja [KOTAK KOSONG]:
Bina [JENIS APPS - cth: kuiz / sistem / kalkulator] untuk [PENGGUNA - cth: guru / murid Tahun X]. KONTEKS: - Dipakai untuk [BILA / KONTEKS - cth: semasa PdP / pentadbiran] - Pengguna utama: [USIA / TAHAP] CIRI-CIRI: - [CIRI 1] - [CIRI 2] - [CIRI 3] INPUT pengguna: - [INPUT 1 dengan jenis: text/number/dropdown] - [INPUT 2] OUTPUT yang dipaparkan: - [APA YANG NAMPAK SELEPAS PENGGUNA INTERACT] REKA BENTUK: - Warna: [PALET WARNA] - Mood: [mesra kanak-kanak / profesional / playful] - Mobile-friendly: ya - Font: besar & jelas BAHASA: Bahasa Melayu sepenuhnya (UI & teks). Komen kod boleh BM atau BI. OUTPUT FORMAT: [satu fail HTML / projek multi-fail Node.js / Apps Script]
Sekarang Cuba Sendiri!
Pilih satu masalah sebenar yang anda hadapi di kelas / sekolah. Gunakan formula CTFC. Tulis prompt anda sendiri. Lihat keajaiban berlaku.
Kembali ke Dashboard →