Project Brief

Apa ini

Project brief ialah file yang kamu simpan di akhir langkah planning.

Ia duduk dalam project folder kamu sebagai project-brief.md dan memberitahu kamu — dan AI agent kamu — dengan tepat apa yang sedang dibina.

Kenapa penting

Setiap prompt yang kamu hantar ke AI agent semasa build patut berpandukan file ini.

Tanpanya, AI agent tiada context. Ia akan buat andaian, tambah benda yang kamu tak minta, dan hasilkan code yang tersasar dari idea asal kamu.

Apa nak buat

Semak file wujud

Buka project folder kamu. Kamu patut nampak project-brief.md di root level, bersebelahan dengan files project lain.

Kalau ia tak wujud, balik ke Macam Mana Nak Plan dan siapkan Langkah 5.

Semak file ada bahagian yang betul

Buka project-brief.md. Ia patut ada semua ni:

✓ Goal — satu ayat yang jelas
✓ Audience — siapa website ini untuk
✓ Stack — tools dan kenapa ia cukup
✓ Pages — 3 pages atau kurang, setiap satu ada purpose
✓ Features — max 3 features
✓ Non-goals — benda yang belum dibina lagi
✓ Build order — langkah bernombor
✓ Success check — macam mana tahu version 1 sudah cukup baik

Kalau mana-mana bahagian hilang atau kabur, balik ke ChatGPT dan minta ia isi bahagian yang kurang.

Baca sekali sebelum teruskan

Baca brief dari atas ke bawah. Tanya diri sendiri:

• Adakah ini sepadan dengan apa yang saya sebenarnya nak bina?
• Adakah stack sesuatu yang boleh saya guna hari ini?
• Adakah features benar-benar boleh dicapai dalam satu sesi?
• Adakah build order logik?

Kalau sesuatu rasa tak kena, betulkan sekarang. Jauh lebih mudah tukar plan di sini daripada tukar tengah-tengah build.

Contoh project brief yang bagus

# Project Brief

## Goal
Bantu pelanggan cepat decide nak order apa dan macam mana nak datang ke kafe.

## Audience
Pelanggan berdekatan yang guna phone sebelum atau semasa datang.

## Stack
Next.js + Tailwind CSS + Vercel. Ini cukup sebab site kebanyakannya static pages dengan styling simple dan tiada login.

## Pages
- Home — intro pendek, gambar terbaik, waktu operasi, dan main call-to-action
- Menu — minuman dan makanan dikumpulkan dengan jelas bersama harga
- Contact — alamat, link Waze, nombor telefon, dan social link

## Features (max 3)
1. Papar menu dengan harga
2. Tunjuk details contact dan link map
3. Layout responsive untuk mobile

## Non-goals
- Tiada online ordering
- Tiada payment
- Tiada customer login

## Build order
1. Scaffold projek Next.js
2. Create basic layout dan navigation
3. Bina Home page
4. Bina Menu page
5. Bina Contact page
6. Apply styling dari `design-spec.md`
7. Test kat localhost dan mobile width
8. Push ke GitHub dan deploy ke Vercel

## Success check
Seseorang boleh buka site di mobile, cari menu, check waktu operasi, dan tekan link Waze dalam bawah satu minit.

Mistake biasa

• Tak simpan brief sebagai file — simpan dalam ChatGPT window sahaja bermakna kamu akan hilangkannya.
• Brief yang terlalu kabur — "bina website yang cantik" bukan brief.
• Skip baca semula — ketidakpadanan kecil di sini jadi masalah besar kemudian.
• Letak file dalam folder yang salah — ia mesti ada di project root, bukan dalam subfolder.