Semua sistem OK

Product Catalog + WhatsApp Checkout

Laluan: Idea -> Prompt -> Generate -> Catalog -> Mobile -> Deploy -> Siap Check -> Showcase

Langkah2 / 813% lengkap
MULASIAP
MISI02

Misi 02: Write first app prompt

Objektif: Tulis prompt yang jelas untuk hasilkan katalog produk lengkap dengan page, data field, style dan flow.

FAHAM DULU

Faham cara tulis prompt yang terstruktur, dan hasilkan prompt pertama yang cukup lengkap untuk AI builder jana app katalog sebenar.

Macam bagi arahan kepada kontraktor renovasi: kalau cakap 'buat cantik', dia teka sendiri. Kalau tulis 'bilik 10x12, cat putih, 2 soket elektrik', dia bina apa yang anda mahu.

Apa & kenapa

  • Prompt adalah arahan bertulis kepada AI builder. Makin jelas arahan, makin dekat output dengan apa yang anda bayangkan.
  • Prompt yang baik ada lima bahagian: role (siapa AI itu), keperluan (apa perlu ada), data fields (maklumat apa yang dipaparkan), output format (HTML atau komponen), dan style direction (rupa dan rasa).
  • Prompt samar seperti 'buat katalog untuk kedai saya' menghasilkan app generik yang mungkin tiada WhatsApp CTA, tiada harga, atau tiada kategori yang anda perlukan.
  • Prompt pertama tidak perlu sempurna, tetapi perlu ada cukup konteks supaya AI tidak teka terlalu banyak.
promptdata fieldsoutput format

Kenapa penting: AI builder yang bagus pun hanya boleh bina apa yang anda terangkan. Pelaburan 10 minit untuk tulis prompt yang jelas boleh jimat berjam-jam kerja membetulkan output yang salah arah.

Contoh: prompt samar vs prompt jelas

  1. Prompt samar: 'Buat katalog produk untuk kedai saya'. AI teka jenis bisnes, produk, dan rupa app.
  2. Tambah role: 'Anda pakar pembangunan web. Bina katalog produk untuk kedai cookies SME Malaysia'.
  3. Tambah data fields: 'Setiap produk ada nama, gambar, harga, kategori, stok, dan deskripsi ringkas'.
  4. Tambah output dan flow: 'Pelanggan boleh tapis kategori, cari produk, dan tekan butang Order di WhatsApp'.
  5. Tambah style: 'Paparan mobile-first, Bahasa Melayu, kod bersih, guna dummy data'.
Awas
  • Tulis hanya satu ayat seperti 'buat katalog'. AI perlu konteks bisnes, data fields, dan flow untuk hasil app yang berguna.
  • Masukkan semua idea dalam satu prompt termasuk login, payment, dan tracking. Fokus kepada MVP scope yang sudah ditentukan dalam misi Idea.
  • Tidak sebut format output seperti HTML atau komponen. AI mungkin pilih teknologi yang builder anda tidak sokong.

Arahan

  1. Salin template prompt di bawah.
  2. Tukar maklumat bisnes supaya sesuai dengan produk anda.
  3. Tampal di ChatGPT, Claude, Gemini, v0, Lovable, Bolt, atau builder pilihan.
  4. Pastikan output mengandungi pages list, data fields, dan style direction.

Template prompt

Anda adalah pakar pembangunan web.
Bina modul Katalog Produk untuk perniagaan SME di Malaysia.

Keperluan:
- Senarai produk dengan gambar, nama, harga, stok, kategori dan deskripsi ringkas
- Fungsi carian dan penapis kategori
- Paparan responsif (mobile-first)
- Bahasa Melayu (BM)
- Kod bersih, mudah diselenggara
- Guna data contoh (dummy data)

Output:
Berikan kod HTML, CSS, JavaScript atau komponen jika guna framework pilihan.
Pastikan pelanggan boleh klik WhatsApp untuk bertanya atau order produk.

Prompt packs

Free + Pro
FreeBase catalog generator

Bina app katalog produk BM, mobile-first, dengan product cards, search, kategori, dan CTA WhatsApp.

ProProduct copy upgrade

Tambah copywriting produk yang persuasive, kategori tersusun, empty state, dan microcopy untuk WhatsApp checkout.

Pro · terkunci

Mission community

Open mission
No public notes for this misi yet.

Publish a build log after saving proof, then prompt shares and fix notes will show here.

Checklist

Pergi lebih jauh: Cuba tulis dua versi prompt dan bandingkan output

Hantar prompt samar dahulu dan catat apa yang AI hasilkan. Kemudian hantar prompt terstruktur yang ada semua lima bahagian dan bandingkan output. Perhatikan berapa banyak kerja fix yang anda jimat dengan prompt yang lebih jelas. Ini latihan paling berguna untuk bina intuisi prompt writing anda sendiri.

Fikir & banding

Dalam ayat sendiri: apa perbezaan output kalau anda hantar prompt samar berbanding prompt yang ada role, data fields, dan style direction?

Tip jalan: Prompt yang baik menghasilkan output yang lebih tepat.
Simpan progress anda

Nama ringkas cukup. Laluan masih boleh jalan tanpa akaun penuh.

Open dashboard