Bagaimana Vibe Coder Mengurus Projek Besar Dengan AI Agent

Kenapa Artikel Ini Ditulis

Ramai vibe coder mula dengan idea kecil, kemudian tiba-tiba nak bina sistem yang besar seperti platform kursus, sistem inventori atau app yang banyak fungsi. Bila projek dah jadi besar, ai agent untuk vibe coding memang boleh tolong, tapi cara guna dia yang tentukan sama ada projek jadi kemas atau jadi huru-hara. Kalau salah urus, kod akan bersepah, bug susah cari, dan last-last kena mula balik.

Saya dah tengok sendiri beberapa projek local yang bermula elok tapi gagal sebab tiada structure. Dalam artikel ini, saya nak kongsi cara praktikal guna AI agent bila projek dah besar, fokus kepada pecahan task, dokumentasi dan semakan kod berkala. Semua tips di sini berdasarkan pengalaman bimbing student dan client.

Why This Matters

Bila projek kecil, kita boleh bagi prompt terus dekat ChatGPT atau Cursor AI dan dia keluarkan satu fail function. Tapi bila projek besar, satu module pun boleh ada 20 fail. AI agent tak tahu context penuh melainkan kita bagi dia structure.

Tanpa pengurusan yang betul, risiko yang selalu berlaku ialah:

AI tulis kod yang bercanggah dengan kod lama
Tiada siapa ingat kenapa satu function dibuat
Backup tak wujud, bila rosak terpaksa buat balik
Vibe coder rasa serabut dan stop tengah jalan

Sebab itu, walaupun kita guna ai agent untuk vibe coding, kita masih perlu peranan sebagai project lead. AI agent bukan magic, dia perlu arahan dan batasan.

How It Works

AI agent berbeza dengan chatbot biasa. Agent boleh buka fail, baca document, jalan command dan cadangkan perubahan. Contoh tools: Cursor AI, Claude dengan project file, atau setup local agent guna Node.js script.

Untuk projek besar, workflow yang saya syorkan:

Tulis dokumen spec ringkas
Pecah projek kepada module kecil
Bagi agent satu module pada satu masa
Agent tulis atau ubah kod dalam folder tertentu
Kita review dan update dokumen

Secara ringkas, agent bantu buat kerja, tapi kita pegang map.

Guna ai agent untuk vibe coding secara berperingkat

Jangan suruh agent bina keseluruhan sistem sekali hadap. Itu resepi fail. Bagi dia kerja ikut lapisan. Contoh: minggu pertama buat database schema, minggu kedua buat API, minggu ketiga buat UI.

Bila kita guna ai agent untuk vibe coding secara berperingkat, kita boleh kesan silap awal. Lagi cepat kita nampak error, lagi murah kos fix.

Step-by-Step Guide

1. Buat Dokumen Asas

Tak perlu dokumen 50 muka surat. Cukup satu fail README.md atau spec.md. Isi:

Objektif sistem
Senarai module
Tech stack (Laravel, Flutter, WordPress plugin, dsb)
Convention nama fail

Simpan dalam repo. Bagi agent baca bila start task baru.

2. Pecah Task Mengikut Folder

Contoh struktur projek Laravel:

Folder	Tugas Agent
app/Models	Buat schema dan relationship
app/Http/Controllers	Logic API
resources/views	Frontend blade
tests	Unit test asas

Bagi agent arahan: “Buat controller untuk module login sahaja, jangan sentuh folder lain.”

3. Dokumentasi Sementara

Setiap kali agent siap satu task, minta dia update satu fail CHANGELOG.md. Catat:

Tarikh
Apa ditambah
Apa yang belum siap

Ini penting supaya esok kita lupa, boleh baca balik.

4. Semakan Kod Berkala

Jangan biar agent jalan berhari-hari tanpa check. Buat review 2 kali seminggu. Buka PR atau compare code. Tanya agent: “Terangkan function ni buat apa.”

Kalau rasa keliru, itu tanda dokumentasi tak cukup.

Common Mistakes

Berikut salah silap yang saya selalu nampak:

Tiada backup: Guna Git atau sekurangnya zip folder tiap Jumaat.
Prompt terlalu umum: “Buat sistem sekolah” – agent akan agak sendiri.
Biarkan agent ubah semua fail: Bila satu fail rosak, semua ranap.
Tak baca kod: Vibe coder ingat semuanya elok sebab tak ada error prompt.
Skip testing: Function nampak jalan, tapi bila data besar lain pulak result.

Satu project client saya pernah hilang 3 minggu progress sebab tak commit ke Git. Agent overwrite fail lama. Bila tanya, dia kata “saya ingat dah save”.

Tips & Best Practices

Beberapa perkara yang saya amalkan sendiri:

Guna branch berasingan untuk setiap module besar.
Set rule pada agent: “Jangan delete comment dalam kod lama”.
Minta agent tulis comment ringkas dalam Bahasa Inggeris untuk function penting.
Buat fail decisions.md untuk rekod pilihan tech.
Kalau projek melibatkan WordPress, asingkan plugin custom dari theme.

Do’s

Do mulakan dengan skop kecil
Do review kod mingguan
Do kekalkan dokumen hidup

Don’ts

Don’t suruh agent bina semua sekaligus
Don’t abaikan error log
Don’t ubah spec tanpa rekod

Things You Should Avoid

Elakkan perangai berikut walaupun AI nampak power:

Guna agent dari sumber tak sah yang minta API key peribadi.
Biarkan agent auto deploy ke production tanpa staging.
Yakini 100% output agent tanpa faham logic.
Campur tech stack sesuka hati tengah projek berjalan.

Nota: kalau guna Flutter dan Laravel serentak, pastikan API contract ditulis dulu. Jangan biar agent Flutter agak response API.

DIY Checklist

Kalau anda nak cuba sendiri, semak senarai ini dulu:

✔ Ada fail spec.md atau README
✔ Projek dah masuk Git
✔ Folder struktur dah diputuskan
✔ Ada senarai module
✔ Tahu macam mana nak jalan local server
✔ Ada masa review 2 jam seminggu

Kalau semua tick, anda boleh mulakan dengan yakin.

When DIY Is No Longer Worth It

Ada masa kita kena mengaku projek dah melampaui kemampuan DIY. Tanda dia:

Situasi	Kenapa Perlu Pro
Databases conflict tiap minggu	Perlu architecture betul
User sebenar dah guna sistem	Risk data hilang
Projek sekolah perlu integrasi payment	Compliance dan keselamatan
Agent dah confuse dengan sendiri	Code perlu refactor

Bila sampai tahap ini, ambil coach atau dev profesional jimat masa. Saya nampak ramai habis 6 bulan buntu, padahal kalau dapat guide 3 minggu dah siap.

Kalau anda bina sistem untuk institut, ruang servis bina custom sistem bisnes sekolah campus mungkin lebih praktikal dari pusing sendiri.

Mini Case Study

Seorang student saya nak bina sistem tempahan gelanggang futsal. Mula dengan prompt “buat app”. Agent keluarkan Flutter app tapi API tak ada. Lepas itu dia tanya Claude buat API, tapi struktur lain.

Kami perbetulkan dengan:

Tulis spec 1 muka surat
Pecah: API dulu, UI kemudian
Guna Laravel untuk API, Flutter panggil sahaja
Review setiap Jumaat

Dalam 5 minggu, sistem boleh guna. Dia akui kalau tak ada dokumen, dia akan terus sesat.

Summary

Projek besar dengan ai agent untuk vibe coding boleh jadi realiti kalau kita urus dengan disiplin. Kunci utama: pecah task, tulis dokumen, dan review berkala. Jangan jadi vibe coder yang lari bila error dah banyak.

Jika anda rasa nak belajar cara betul dari awal, boleh explore kelas coaching vibe coding yang kami sediakan. Dan untuk lebih banyak rujukan percuma, lawati hub laman rasmi.