21.5.1 Sentiasa Minta AI Buat Documentation
Dokumentasi adalah perkara pertama yang akan dilupakan oleh Vibe Coder baru. Rasa nak coding laju-laju, dokumentasi boleh buat kemudian. Ini adalah perangkap! Dokumentasi yang baik adalah asas kepada projek yang mampan. Tanpa dokumentasi, projek anda akan menjadi "legacy code" yang menakutkan dalam masa 3 minggu.
Kenapa Wajib? AI boleh generate kod dengan pantas, tetapi tanpa dokumentasi, hanya AI yang sama boleh faham kod tersebut. Apabila anda atau AI lain perlu mengubah suai kod 3 bulan kemudian, dokumentasi adalah penyelamat. Dokumentasi juga memaksa AI untuk menulis kod yang lebih bersih dan teratur — kerana ia tahu strukturnya perlu dijelaskan.
Contoh Prompt:
# Prompt Documentation
"Selepas generate kod ni, tambah comment penuh untuk:
1. Setiap function — apa dia buat, parameter, return value
2. Setiap class — purpose, properties, methods
3. Setiap file — apa kandungan file ni
4. README — cara setup, run, deploy
Guna JSDoc format untuk JavaScript."
# Lebih baik:
"Bina function untuk validate email. Lepas tu:
1. Tambah JSDoc documentation penuh
2. Tulis README untuk app ni
3. Tulis CODE_COMMENTS.md yang explain logic flow
Semua dalam Bahasa Melayu untuk non-technical stakeholders."
Tip Praktikal: Buat peraturan: "Satu prompt coding, satu prompt documentation." Setiap kali AI hasilkan kod, prompt seterusnya mesti untuk dokumentasi. Disiplin ini akan menjimatkan berjam-jam masa dimasa hadapan.
21.5.2 Guna Prompt Helper Pattern — Two-AI Pattern
Prompt Helper Pattern adalah teknik menggunakan dua "peranan" AI secara serentak: satu AI bertindak sebagai "helper" yang menulis prompt terbaik untuk AI yang satu lagi. Teknik ini amat berguna apabila anda kurang pasti cara yang paling efektif untuk meminta sesuatu daripada AI, atau apabila tugasan itu rumit dan memerlukan prompt yang tersusun rapi.
Bila Nak Guna? Apabila tugasan cukup kompleks sehingga anda perlu memikirkan strukturnya dengan teliti. Contohnya: membina sistem authentication penuh, mereka bentuk database schema dengan RLS, atau menulis dokumentasi API yang komprehensif. Daripada terus menulis prompt terus terang, anda minta AI pertama membantu menstrukturkan prompt yang sempurna untuk AI kedua.
Langkah-Langkah:
- Terangkan tugasan secara ringkas kepada AI Helper
- Minta AI Helper sediakan prompt lengkap (dengan konteks, arahan, constraint, contoh output)
- Semak dan luluskan prompt yang dihasilkan
- Guna prompt tersebut dengan AI (sama ada AI yang sama atau AI berbeza)
- Ulang langkah 1-4 untuk setiap subtask
Contoh Prompt:
# Prompt Helper Pattern
Prompt 1 (kepada Helper): "Saya nak bina sistem authentication untuk portfolio website.
Guna Supabase Auth, email + password.
Ada signup, login, logout, protected pages, reset password.
Tolong tuliskan prompt yang lengkap untuk AI coding.
Prompt kena ada: konteks penuh, langkah spesifik, code structure, dan constraint."
Hasil: AI Helper akan hasilkan prompt yang tersusun seperti:
"Bina sistem authentication penuh untuk portfolio website menggunakan Supabase Auth (email + password). Termasuk: halaman signup dengan validation, halaman login dengan error handling, logout button, protected routes (redirect ke login jika belum auth), dan halaman reset password. Guna JavaScript vanilla dengan Supabase client library. Mobile-first responsive. JANGAN guna framework. Letak semua auth logic dalam /auth/ folder."
Prompt 2: Guna prompt di atas dengan AI coding.
Tip Praktikal: Anda boleh gunakan AI yang sama untuk kedua-dua peranan (helper dan coder) — bezakan dengan konteks. "Sekarang awak adalah Prompt Helper. Bantu saya reka prompt untuk..." Kemudian: "Sekarang awak adalah AI Coder. Guna prompt yang awak sendiri hasilkan tadi." Teknik ini berkesan kerana AI dapat menstrukturkan pemikirannya dengan lebih baik.
21.5.3 Fikir Dulu Sebelum Prompt
Kesilapan paling mahal dalam Vibe Coding adalah menulis prompt tanpa berfikir. Setiap prompt yang dihantar menggunakan token, mengambil masa, dan menghasilkan output yang perlu dinilai. Prompt yang tidak difikirkan dengan baik menghasilkan output yang perlu dibuang — membazir masa, token, dan tenaga mental.
5 Soalan Wajib Sebelum Setiap Prompt:
- Apa yang saya nak AI hasilkan? — Nyatakan dengan jelas. Bukan "buat website" tapi "buat landing page untuk kedai kopi dengan hero, menu grid, dan contact form."
- Kenapa saya nak benda ni? — Konteks membantu AI hasilkan output yang lebih relevan. "Untuk pelajar universiti yang pertama kali belajar coding."
- Apa constraint yang perlu saya tetapkan? — Teknologi, masa, saiz, gaya. "Guna vanilla HTML/CSS/JS sahaja. Tiada framework. Mobile-first."
- Apa yang akan jadi selepas ni? — Fikirkan langkah seterusnya. Output sekarang perlu serasi dengan langkah akan datang. "Nanti saya nak integrate dengan Supabase, jadi pastikan kod boleh di-extend."
- Bagaimana saya nak nilai output? — Tetapkan kriteria kejayaan. "Output dikira berjaya kalau: (1) responsive, (2) loading bawah 3 saat, (3) lulus lighthouse audit."
Tip Praktikal: Sebelum hantar prompt, tanya diri sendiri: "Kalau saya dapat output yang tepat sekarang, adakah saya akan puas hati?" Jika jawapannya "tidak," prompt masih perlu diperbaiki. Luangkan 30 saat tambahan untuk refine prompt — ia akan menjimatkan 5 minit iterasi.
21.5.4 Jangan Terima Output Bulat-Bulat
AI bukan infallible. Ia boleh halusinasi, menghasilkan kod yang insecure, menggunakan library yang usang, atau buat assumption yang salah. Setiap output AI WAJIB disemak sebelum digunakan. Ini bukan soal kepercayaan — ini soal disiplin profesional. Vibe Coder yang matang tahu bila untuk trust AI dan bila untuk question.
Disiplin Review:
- Faham sebelum guna: Baca setiap baris kod yang AI hasilkan. Jika tak faham, minta AI explain. Jangan guna kod yang anda tak faham.
- Test dalam isolasi: Sebelum integrate, test kod baru dalam environment yang selamat. Gunakan console.log atau playground.
- Check untuk security: Cari common vulnerabilities — SQL injection, XSS, hardcoded credentials, missing input validation.
- Verify dengan documentation: Jika AI guna API/library, verify cara guna dengan Context7 atau documentation rasmi.
- Peer review: Jika ada rakan Vibe Coder lain, minta mereka review kod penting.
# Review Prompt Template
"Review kod ni untuk:
1. Security vulnerabilities — SQL injection, XSS, hardcoded secrets
2. Performance issues — N+1 queries, memory leaks, blocking operations
3. Best practices — error handling, input validation, code organization
4. Compatibility — adakah code ni serasi dengan [stack sedia ada]?
5. Suggestions — apa yang boleh diimprove?
[paste code]"
# Jangan guna kod buta-buta
# Minta AI jelaskan bahagian yang tak difahami
"Explain function ni baris demi baris dalam BM.
Saya nak faham setiap apa yang kod ni buat."
Tip Praktikal: Guna peraturan "3 Baca": Baca sekali untuk faham aliran, baca dua kali untuk check logic, baca tiga kali untuk check security. Jika ada keraguan, jangan guna. Minta AI tulis semula dengan pendekatan berbeza.
21.5.5 Iterate, Jangan Perfeksi
Vibe Coding adalah tentang kelajuan — tetapi kelajuan bukan bererti terburu-buru. Maksudnya adalah jangan terperangkap dalam kitaran perfectionism yang tidak berkesudahan. Ramai Vibe Coder baru menghabiskan 3 jam untuk menyempurnakan button colour, sedangkan mereka sepatutnya sudah mempunyai aplikasi yang berfungsi dalam masa tersebut. Prinsip "ship fast, refine later" adalah teras kepada produktiviti Vibe Coding.
Mengapa Iterasi Lebih Baik daripada Perfeksi:
- Dapatkan feedback lebih awal: Pengguna sebenar memberi maklum balas yang lebih bernilai daripada tekaan anda. Ship versi awal, dapatkan data sebenar, refine berdasarkan realiti — bukan berdasarkan andaian.
- Momentum psikologi: Setiap iterasi yang siap memberi dopamine rush. Produk yang "cukup baik" yang sudah siap lebih bernilai daripada produk "sempurna" yang masih dalam development.
- AI menjadi lebih baik dengan konteks: Apabila AI sudah mempunyai konteks projek (melalui iterasi sebelumnya), outputnya menjadi lebih tepat dan relevan. Iterasi pertama mungkin mengambil 10 prompt, tetapi iterasi kelima mungkin hanya perlukan 2 prompt.
# Iterasi 1: "Bina todo app dengan HTML/CSS/JS.
# Boleh tambah dan delete item. Guna warna biru."
# Masa: 5 minit. Hasil: Berfungsi, tapi basic.
# Iterasi 2: "Tambah local storage untuk simpan data.
# Bila refresh, data tak hilang."
# Masa: 3 minit. Hasil: Data kekal.
# Iterasi 3: "Tambah kategori: Personal, Work, Shopping.
# Color-code setiap kategori."
# Masa: 4 minit. Hasil: Lebih teratur.
# Iterasi 4: "Tambah search bar untuk cari todo.
# Filter semasa menaip."
# Masa: 3 minit. Hasil: Lebih power.
# Total: 15 minit untuk aplikasi yang cukup feature-rich.
# Bandingkan dengan 3 jam untuk perfectionist yang masih stuck dengan button color.
Tip Praktikal: Guna teknik "5 Iterasi Rule" — hadkan diri kepada maksimum 5 iterasi untuk satu feature. Selepas 5 iterasi, apa pun hasilnya, move on ke feature seterusnya. Anda boleh kembali kemudian jika perlu. Ini mengelakkan analysis paralysis.
21.5.6 Deploy Awal — Deploy Selepas Versi Pertama Berfungsi
Deployment bukanlah langkah terakhir dalam proses pembangunan — ia adalah langkah kedua. Sebaik sahaja aplikasi versi pertama anda berfungsi di localhost, deploy segera ke production. Biarpun aplikasi itu masih mentah, belum ada branding, atau hanya mempunyai satu halaman — deployment awal memberi banyak kelebihan yang tidak boleh digantikan.
Kenapa Deploy Awal Penting:
- Ujian persekitaran sebenar: Aplikasi mungkin berfungsi di localhost tetapi gagal di production. Lebih awal anda tahu, lebih cepat anda betulkan. Isu seperti CORS, environment variables, dan build settings hanya boleh dikesan di production.
- Kongsi progress dengan stakeholder: Bos, client, atau rakan sepasukan boleh melihat progress sebenar — bukan screenshot atau video. URL lebih mudah dikongsi daripada localhost:3000.
- Bina keyakinan: Kali pertama aplikasi anda live di internet adalah satu pencapaian besar. Ia memberi motivasi untuk terus maju. Pelajar yang deploy awal menunjukkan kadar completion yang jauh lebih tinggi.
- Domain dan DNS mengambil masa: DNS propagation boleh mengambil masa 24 jam. Deploy awal memberi masa untuk DNS settle sebelum aplikasi siap sepenuhnya.
# Deploy Awal Workflow
1. Bina minimum viable version (1 page pun cukup)
2. Push ke GitHub: git add . && git commit -m "v1" && git push
3. Deploy ke Cloudflare Pages / Codex Deploy
4. Test di URL production
5. Kongsi URL dengan mentor/rakan
6. Iterasi berdasarkan feedback
# Contoh prompt untuk deploy cepat:
"Deploy portfolio saya ke Cloudflare Pages.
Repo dah ada di github.com/username/portfolio.
Guna static site, output folder: root."
Tip Praktikal: Gunakan peribahasa digital: "Deploy awal, deploy kerap." Setiap kali anda menambah feature yang berfungsi, deploy semula. Deployment bukan event sekali seumur hidup — ia adalah ritual berulang. Dengan Cloudflare Pages dan Codex Deploy, setiap deploy mengambil masa kurang 2 minit. Tiada alasan untuk tidak deploy.
21.5.7 Satu Projek, Satu Repo — GitHub Discipline
Git adalah lifeline projek Vibe Coding. AI boleh generate kod, mengubah suai, dan memadam fail — tanpa Git, setiap perubahan adalah permanen dan tidak boleh ditarik balik. Bayangkan AI secara tidak sengaja memadam folder penting anda, atau menulis semula kod yang mengambil masa 3 hari untuk dibina. Dengan Git, perkara ini hanyalah "git checkout -- ." atau "git revert."
Disiplin Git yang Wajib:
- Satu projek, satu repo: Jangan campur aduk berbilang projek dalam satu repository. Setiap projek Vibe Coding — walau sekecil mana pun — mesti ada repo sendiri. Ini memudahkan deployment, kolaborasi, dan tracking.
- Commit selepas setiap perubahan berfungsi: Bukan "satu commit sehari." Setiap kali AI berjaya menambah feature atau membaiki bug, buat commit. Ini memberi anda checkpoint yang banyak dan memudahkan backtracking.
- Guna .gitignore: Jangan commit node_modules, .env, atau fail persendirian. AI mungkin secara automatik create fail yang tak sepatutnya di-commit.
- Tulis commit message yang bermakna: "fix" tidak membantu. "Tambah login form dengan validation Supabase" lebih berguna untuk tracking.
- Push ke GitHub: Repo di local tidak bermakna tanpa backup di cloud. Push selepas setiap sesi coding. GitHub juga memudahkan deployment (CI/CD).
# Git Workflow untuk Vibe Coding
# Setup awal
git init
git add .
git commit -m "v1: Landing page basic dengan hero dan features"
# Selepas AI tambah feature
git add .
git commit -m "v2: Tambah contact form dengan validation"
# Selepas AI fix bug
git add .
git commit -m "v3: Fix responsive issue — navbar overlap pada mobile"
# Push ke GitHub
git remote add origin https://github.com/username/project.git
git branch -M main
git push -u origin main
# Kalau AI rosakkan kod — revert!
git revert HEAD --no-edit
# Atau
git checkout -- .
Tip Praktikal: Buat habit: sebelum mula sesi coding dengan AI, guna git status untuk tahu keadaan semasa. Selepas sesi, buat commit. Jika AI mula bertanya tentang perubahan yang tak dijangka, anda tahu ada yang tak kena. Git adalah "undo button" anda — gunakannya dengan kerap.