PANDUAN PRAKTIKAL · 5 BAHAGIAN
Apa yang perlu diisi sebelum guna prompt
Tuliskan jenis bisnes, lokasi, sasaran pelanggan, senarai servis, sebab pelanggan memilih anda, bukti sebenar, gaya bahasa dan CTA. Gunakan placeholder jika fakta belum tersedia.
Penting: Jangan benarkan AI mencipta review, sijil, jumlah pelanggan atau harga yang tidak disahkan.
Prompt 1 — Rancang struktur website
Anda ialah web strategist untuk SME Malaysia. Bisnes saya: [nama/jenis]. Pelanggan sasaran: [siapa/lokasi]. Servis utama: [senarai]. Objektif website: [WhatsApp/quotation]. Cadangkan struktur one-page website (hero, masalah, penyelesaian, servis, bukti, FAQ, CTA). Bagi setiap section, tulis tujuan dan maklumat yang perlu saya sahkan. Jangan reka fakta.
Jalankan prompt ini dahulu sebelum menghasilkan HTML.
Prompt 2 — Tulis copy website
Berdasarkan struktur yang dipersetujui, tulis kandungan Bahasa Melayu yang mesra pengguna untuk [nama bisnes]. Gaya: jelas, ringkas, profesional dan tidak hiperbola. Gunakan kerangka Masalah → Penyelesaian → Bukti → Tindakan. Jika tiada bukti sebenar, letak [PERLU BUKTI]. CTA utama: [teks dan nombor WhatsApp].
Periksa ejaan nama, kawasan servis, nombor telefon dan testimoni satu per satu.
Prompt 3 — Jana HTML website
Hasilkan satu fail index.html yang mengandungi HTML semantik, CSS responsif dan JavaScript minimum berdasarkan copy yang diluluskan. Gunakan layout mobile-first, warna [warna], navigation anchor yang berfungsi, CTA WhatsApp dengan pautan wa.me, meta title, meta description dan alt text yang sesuai. Jangan guna dependency luar yang tidak perlu. Jangan cipta imej, logo atau fakta. Tandakan placeholder dengan jelas. Keluarkan kandungan penuh fail dalam satu code block HTML.
Simpan output sebagai index.html, bukan index.html.txt.
Prompt 4 — Audit sebelum publish
Semak HTML yang saya berikan dari sudut mobile usability, accessibility asas, struktur heading, SEO on-page, link rosak, placeholder yang belum diganti, pautan WhatsApp dan kandungan yang mungkin tidak tepat. Berikan checklist pembetulan mengikut tahap penting.
AI boleh terlepas kesilapan. Uji website itu sendiri dalam browser.
WI-01 · WORK INSTRUCTION · 25–40 MINIT
Ikut langkah ini dari brief sehingga kod HTML
Contoh latihan kita ialah Sinar Bina Renovasi, bisnes fiksyen. Semua nama, lokasi dan servis hanya contoh. Gantikan dengan maklumat sebenar sebelum publish.
1. Brief bisnes
Catat nama bisnes, lokasi, servis, sasaran pelanggan, bukti sebenar dan CTA. Contoh latihan: Sinar Bina Renovasi (fiksyen), kontraktor ubah suai rumah di Selangor, servis dapur/bilik air, CTA minta quotation. Jangan gunakan nombor telefon atau testimoni rekaan.
NAMA: Sinar Bina Renovasi [BISNES REKAAN]
SASARAN: Pemilik rumah di Selangor
SERVIS: Renovasi dapur, bilik air, mengecat
BUKTI: [GAMBAR PROJEK SEBENAR JIKA ADA]
WHATSAPP: [NOMBOR SEBENAR]Expected result: Ada brief lengkap, semua maklumat yang belum disahkan ditandakan.
2. Prompt struktur website
Tampal brief ke dalam AI dan jalankan prompt berikut sebelum menulis kod.
Anda seorang web strategist untuk SME Malaysia. Daripada brief bisnes saya, rancang one-page website berobjektifkan enquiry. Sertakan section Hero, Services, About, Proof (jika ada bukti), FAQ dan Contact. Bagi setiap section: tujuan, headline BM, kandungan yang diperlukan, CTA dan fakta yang perlu disahkan. Jangan cipta harga, review, sijil, pengalaman atau gambar. Gunakan [PERLU SAHKAN] apabila tiada data.
Expected result: AI menyediakan outline halaman yang boleh disemak oleh pemilik.
3. Prompt copywriting
Betulkan outline supaya tepat, kemudian hasilkan copy sebenar.
Tulis copy Bahasa Melayu untuk struktur yang saya sudah setujui. Ikut Masalah → Penyelesaian → Bukti → Tindakan. Gunakan fakta daripada brief sahaja. Bagi setiap section sediakan headline dan 1–3 ayat pendek. Jangan gunakan claim palsu atau janji hasil. Jika tiada bukti, jangan hasilkan testimoni. Akhiri dengan checklist fakta yang perlu saya sahkan.
Expected result: Headline, servis, FAQ dan CTA jelas; tiada fakta rekaan.
4. Prompt HTML
Selepas copy diluluskan, hasilkan kod untuk digunakan pada WI seterusnya.
Hasilkan satu fail index.html lengkap menggunakan copy yang diluluskan. Guna HTML semantik, lang=ms, satu H1, CSS responsif dalaman, meta title/description, viewport, navigasi anchor, focus styles dan kontras jelas. Jangan gunakan CDN, framework atau gambar luar. Gunakan placeholder jelas jika tiada nombor WhatsApp, dan jangan cipta link palsu. Keluarkan keseluruhan HTML dari <!doctype html> hingga </html> dalam satu code block.
Expected result: Kod HTML lengkap, tidak terpotong; semua placeholder disenaraikan.
5. Prompt QA
Serahkan kod HTML kepada AI untuk audit, kemudian sahkan secara manual.
Audit HTML ini: fakta dan placeholder, satu H1, SEO metadata, mobile, accessibility keyboard, imej, menu anchor dan CTA. Senaraikan 'Wajib Betulkan' dan 'Cadangan'. Jangan dakwa sudah menguji dalam browser jika anda belum menjalankannya. Hasilkan kod lengkap yang diperbaiki selepas saya sahkan.
Expected result: Kod akhir boleh disimpan sebagai index.html dan diuji dalam browser.
Troubleshooting
AI cipta testimoni, harga atau nombor telefon?
Buang dan minta AI hanya gunakan brief, atau tandakan [PERLU SAHKAN].
Kod HTML terpotong?
Minta AI pulangkan seluruh fail termasuk tag penutup html. Uji dengan browser dalam WI-02.
Checkbox ini untuk semakan semasa sahaja; ia tidak menyimpan kemajuan selepas refresh.
Soalan lazim
Boleh guna prompt ini dengan ChatGPT?
Ya. Sesuaikan arahan dengan keupayaan dan had tool AI yang anda gunakan.
Perlu guna semua empat prompt?
Disyorkan mengikut turutan supaya struktur dan copy boleh disemak sebelum menjana kod.
Bagaimana jika AI bagi maklumat palsu?
Betulkan dengan fakta bisnes sendiri dan arahkan AI menandakan maklumat yang belum disahkan.
LANGKAH SETERUSNYA
Website dah siap? Pastikan pelanggan boleh jumpa.
Website yang live ialah permulaan. Jika anda perlukan bantuan dengan struktur SEO, visibility Google atau cara mendapatkan enquiry, COE.my boleh bantu kenal pasti apa yang perlu diperbaiki.
Teroka Website SEO ↗Bincang Website Saya ↗