Panduan 5 Langkah Memulai Vibe Coding untuk Non-Developer

Dalam beberapa minggu terakhir, saya mencoba membuat lima atau enam aplikasi sederhana bersama kenalan non-developer (pengacara, marketer, PM, dan lain-lain) dengan vibe coding

• Dashboard raid guild WoW (web)
• Simulator balap untuk event undian hadiah (web + Three.js)
• Alat komunikasi antara editor video dan klien pemesan (ekstensi Chrome)
• Timer otomatis yang membantu menetapkan jumlah iterasi, fokus selama waktu tertentu, lalu melakukan retrospektif setelah selesai (aplikasi desktop Electron)

Saya merangkum proses ini menjadi panduan memulai vibe coding untuk non-developer dalam 5 langkah

1. Memahami kira-kira sampai di mana AI masa kini bisa melakukan apa
2. Mendefinisikan dengan jelas masalah yang ingin diselesaikan dan produk yang ingin dibuat
3. Memeriksa langsung cara kerja hasilnya dengan cepat dan sering
4. Melakukan prompting dan interaksi agar AI bisa melakukan coding dengan baik
5. Mengenali perilaku yang tidak semestinya dan poin perbaikan, lalu menyempurnakan hingga selesai

1) Memahami kira-kira sampai di mana AI masa kini bisa melakukan apa

Bagi non-developer yang baru pertama kali mengenal vibe coding, saya menyarankan memulai dari aktivitas seperti ini

• Di LLM, atau di layanan prototyping AI, coba rasakan sendiri bahwa hanya dengan prompt singkat kita bisa membuat sesuatu yang benar-benar berjalan, agar rasa percaya diri terhadap efektivitasnya meningkat
• Berlangganan beberapa SNS dan newsletter yang merangkum informasi AI terbaru
• Tinggalkan keinginan untuk memahami semua informasi dan alat AI; fokus saja pada alat di topik tertentu yang memang Anda minati, lalu coba secukupnya

2) Mendefinisikan dengan jelas masalah yang ingin diselesaikan dan produk yang ingin dibuat

• Meski kita sudah memahami kemampuan AI, tanpa definisi masalah yang jelas kita tidak bisa membuat produk
• Karena itu, pertama-tama kita perlu menjadi lebih tajam lewat pertanyaan yang meningkatkan metakognisi
• Gunakan aplikasi metakognisi yang dibuat dengan vibe coding
  1. Apa yang ingin dibuat?
  2. Mengapa ingin membuatnya? Masalah apa yang ingin diselesaikan?
  3. Siapa yang mengalami masalah itu?
  4. Dalam situasi seperti apa mereka mengalami masalah tersebut?
  5. Dalam situasi itu, solusi sementara atau alternatif apa yang sekarang mereka gunakan?
  6. Bagaimana kita bisa memastikan bahwa nomor 1 menyelesaikan masalah lebih baik daripada nomor 5?
  7. Bagaimana membuat mereka bersedia memakai nomor 1 alih-alih nomor 5?
• Setelah ide yang ingin dibuat sudah lebih rapi, saya memasukkan "prompt pembuatan PRD" yang dihasilkan aplikasi tersebut ke LLM agar AI membuatkan PRD

3) Memeriksa langsung cara kerja hasilnya dengan cepat dan sering

• Bisa mendapatkan "aplikasi yang benar-benar berjalan" di tahap yang sangat awal adalah keunggulan terbesar vibe coding. Ini juga sangat penting untuk memotivasi non-developer
• Dalam konteks itu, saya kurang merekomendasikan non-developer memulai vibe coding dengan Cursor, karena ada banyak rintangan besar dan kecil sebelum aplikasi bisa dijalankan
• Sebaliknya, saya melihat layanan seperti Lovable, yang bisa langsung menghasilkan prototipe berjalan jika diberi PRD, sebagai titik awal yang lebih baik. Tautan publik juga langsung dibuat, jadi mudah ditunjukkan ke kenalan untuk mendapat feedback
• Namun, jika aplikasi yang ingin dibuat bukan berbasis web, situasinya jadi sedikit lebih rumit, karena alat prototyping biasanya membuat web app
• Pada tahap ini dibutuhkan pengambilan keputusan teknis dan penyiapan environment eksekusi, jadi baik saya maupun AI sama-sama harus menjadi lebih paham

4) Melakukan prompting dan interaksi agar AI bisa melakukan coding dengan baik

• Saya dan AI menjadi lebih paham <-> prompt disusun dengan baik <-> hasil keluar lebih cepat dan lebih bagus
• Semakin baik menyusun prompt, semakin sedikit jumlah bolak-balik yang diperlukan untuk mencapai tujuan (= hemat waktu dan biaya)
• Jika melihat berbagai panduan prompt engineering, hal yang selalu disebut bersama adalah mendefinisikan dengan baik peran (Role), konteks (Context), dan tugas (Task) di dalam prompt

Peran, konteks, tugas

• Dalam vibe coding, "peran" tidak terlalu penting
  • Karena coding agent biasanya sudah memiliki peran yang sesuai dan bisa justru jadi kacau jika ditimpa
  • Mungkin karena coding adalah benchmark penting, LLM juga cukup pandai melakukan coding tanpa pemberian peran khusus
  • Tentu saja, jika aplikasi yang ingin dibuat bersifat khusus, memberi peran yang tepat juga bagus
• Untuk "konteks", jika PRD sudah dibuat dengan baik, itu sudah cukup
• Untuk "tugas", yang penting adalah menetapkan tujuan dan kriteria selesai dengan jelas. Kriteria selesai bisa
  • Ditulis langsung di dalam prompt (few-shot prompting)
  • Didefinisikan di file atau kode eksternal (TODOs.md atau test code)
  • Atau hanya ada di kepala saya sendiri (gaya ini tidak bagus)
• Tujuan akhir vibe coding adalah memberi instruksi agar AI melakukan coding dengan baik sehingga aplikasi yang bekerja sesuai PRD bisa dibuat dengan cepat. Untuk itu, sebaiknya tetapkan 3 tujuan antara berikut
  • Saya menjadi lebih paham
  • AI menjadi lebih paham
  • Fitur bekerja sesuai spesifikasi

Saya menjadi lebih paham?

• Jika Anda non-developer, domainnya belum familiar, atau tech stack-nya belum familiar, akan sulit memberi instruksi dengan istilah yang tepat
• Dalam situasi seperti ini, cukup beri tahu LLM bahwa Anda masih kurang paham, lalu belajar darinya
  • "(beri screenshot) Game seperti ini biasanya dibuat dengan apa?"
  • "Saya mau membuat sesuatu seperti ini, kalau kamu yang melakukannya, bagaimana kamu akan mendapatkan datanya?"
  • "Kalau ingin memverifikasi perilaku inti aplikasi native secepat mungkin, teknologi apa yang sebaiknya dipakai?"
• Lewat pertanyaan seperti ini, amati apakah Anda berubah seperti berikut
  • Kata kunci teknis: saya mulai memakai istilah teknis/istilah domain yang tepat
  • Alur data: saya bisa menjelaskan bagaimana data untuk fitur inti aplikasi didapatkan, diproses, dan ditampilkan
  • Environment eksekusi: saya sudah menyiapkan lingkungan untuk menjalankan kode yang dibuat AI dan memverifikasi langsung dengan mata saya sendiri apakah ia bekerja
• Idealnya, semua unknown unknown sudah terselesaikan sebelum menulis PRD lalu mulai coding, tetapi tidak harus selalu begitu
• Justru setelah masuk ke coding, ada banyak hal yang dipelajari, dan kalau perlu kita bisa mulai lagi dari awal. (Kadang bisa lebih cepat daripada memperbaiki sesuatu yang sudah ada)

AI menjadi lebih paham?

• Artinya memberi tahu AI tentang kata kunci teknis atau alur data yang sudah dipahami melalui system prompt (seperti Cursor Rules)
• Untuk mengurangi frekuensi intervensi saya dan membuat kode AI lebih sesuai dengan keinginan saya, pada dasarnya ada dua hal yang dibutuhkan: panduan tentang batasan dan panduan dokumentasi
• Panduan batasan membantu AI menulis kode yang lebih konsisten. Misalnya:
  • Tech stack: gunakan NextJS app router, styling dengan Tailwind dan ShadCN, ikon hanya pakai Lucid, pembayaran pakai Stripe, dan seterusnya
  • Struktur dan pola: susun folder seperti ini, beri nama file seperti ini, gaya UI seperti Material, dan seterusnya
  • Format output (sesuai environment eksekusi): karena akan memakai Electron Fiddle, berikan 4 file yang sesuai; karena akan memakai CodePen, berikan masing-masing satu HTML, CSS, dan JS; dan seterusnya
• Panduan dokumentasi membantu meningkatkan fokus dan daya ingat AI. Ada dua ide yang sangat berguna
  • Memory Bank dari Cline: mendefinisikan workflow yang mencatat pekerjaan yang sudah dilakukan dan yang akan dilakukan ke dalam file
  • Prompt Context dari Kang Dong-yoon: alih-alih meninggalkan panduan panjang tentang seluruh proyek di folder teratas, buat panduan per folder
• Memory Bank sangat direkomendasikan khususnya untuk non-developer, karena memudahkan observasi dan pembelajaran tentang apa yang sedang terjadi saat ini

Fitur bekerja sesuai spesifikasi?

• Ini adalah strategi prompting saat chatting di coding agent, bukan di level keseluruhan proyek
• Menurut saya, strategi terbaik agar fitur bekerja sesuai spesifikasi adalah jika tes lolos, maka commit
  • "Tolong implementasikan X. Tulis tesnya terlebih dulu, lalu coding, jalankan tesnya, dan terus perbaiki kodenya sampai semua tes lolos."
• Ini mungkin karena coding agent memiliki izin dan kemampuan untuk menulis test code, menjalankannya di terminal, dan membaca hasilnya
• Setelah tes lolos, kita bisa menerima saran commit message, lalu commit test code dan feature code bersama-sama. Saya biasanya melakukan commit sendiri, tetapi agent juga bisa melakukan auto-commit
• Bukan hanya unit test, AI juga bisa menulis integration test dan E2E test, menjalankannya, lalu memperbaikinya sendiri (referensi: Cursor + Playwright automated testing)
• Semua ini adalah strategi yang memudahkan baik vibe coder maupun AI untuk memverifikasi "apakah tiap fitur diimplementasikan sesuai spesifikasi, dan apakah keseluruhan aplikasi bekerja sesuai PRD"

5) Mengenali perilaku yang tidak semestinya dan poin perbaikan, lalu menyempurnakan hingga selesai

• Menurut saya, vibe coding jauh dari sekadar "sekali klik jadi" dan ada banyak hal yang perlu dipelajari
• Di antaranya, untuk melampaui "prototipe kecil milik sendiri" dan membuat aplikasi setingkat produk komersial sebagai solo founder, ada 3 kemampuan yang menurut saya wajib: kemampuan observasi, kemampuan coding, dan kemampuan product engineering

Kemampuan observasi

• Yaitu kemampuan menyadari dengan peka layar atau fitur yang bekerja berbeda dari PRD (atau niat awal saya)
• Kalau kemampuan ini kurang, akan sangat sulit menemukan kesalahan AI lalu memintanya memperbaiki
  • "Tes" pada langkah 4 bukan hanya mengurangi kesalahan AI sejak awal, tetapi juga membantu meningkatkan kemampuan saya sendiri
  • Karena dengan membaca proses AI mengubah spesifikasi menjadi test code, kita belajar bukan hanya "fitur ini dibutuhkan", tetapi "syarat-syarat ini diperlukan agar implementasi fitur benar-benar selesai"
• Namun, "aplikasi sudah diimplementasikan sesuai spesifikasi" dan "aplikasinya bagus" adalah dua hal berbeda. Karena itu, product sense untuk menemukan titik perbaikan itu penting (untuk detailnya, lihat newsletter Lenny yang ditautkan)

Kemampuan coding

• Setidaknya untuk saat ini, sebaik apa pun pekerjaan dipecah lalu diserahkan ke AI, tetap ada sekitar 5% yang perlu disentuh langsung di kode agar bisa benar-benar finishing
  • Karena tidak bisa melakukan ini, banyak aplikasi di SNS berhenti di level 80% dan tidak pernah rilis
• Tentu saja, persentase ini bisa berubah tergantung aplikasi yang ingin dibuat, dan bukan berarti mustahil menyelesaikan semuanya hanya dengan AI sampai akhir, tetapi itu terlalu tidak efisien
• Daripada menyerahkan diri sepenuhnya pada vibe, saya menyarankan sambil melihat dokumen yang dihasilkan AI (melalui Memory Bank, test code, dan lain-lain), Anda juga sekalian belajar coding itu sendiri. Kalau bisa, minta coaching dari developer juga
• Khususnya, belajar tentang backend yang relatif kurang terlihat (autentikasi pengguna, integrasi API eksternal, input/output data, pembayaran, dan lain-lain) serta strategi deployment (main branch dan feature branch, pengelolaan environment variable, dan lain-lain) akan sangat efektif

Kemampuan product engineering

• Merilis aplikasi bukanlah akhir, melainkan awal. Jika ingin melakukannya dengan benar, kita perlu memahami seluruh lifecycle pengembangan produk
  • Mengenali masalah, menemukan ide solusi, perencanaan, desain, implementasi, pengujian, deployment, promosi, monitoring error, pengumpulan feedback, operasi...
• Tidak harus mendalami semua tahap ini secara sangat rinci, tetapi setidaknya ada baiknya mengetahui pekerjaan apa yang dilakukan di setiap tahap dan kata kunci apa yang digunakan
• Dengan begitu, kita bisa mempelajari hal yang belum diketahui, dan saat tidak sanggup menanganinya sendirian, kita bisa menilai kemampuan rekan yang akan diajak bekerja sama

Penutup

• Membuat aplikasi setingkat produk komersial dengan vibe coding sama sekali bukan perkara mudah. Namun, tak seorang pun bisa menyangkal bahwa untuk "memulai", sekarang jauh lebih mudah daripada sebelumnya
• Melihat kenalan saya berseru kagum sambil sangat menikmati momen ketika ide kecil mereka benar-benar hidup dan bergerak ("Wah, saya sampai bisa ngoding!") membuat saya juga sangat bahagia
• Saya juga ingin mendorong non-developer lain yang membaca tulisan ini untuk memanfaatkan kesempatan ini dan dengan gembira menjadi seorang "maker"
• Dengan memanfaatkan keahlian domain masing-masing, jika Anda membuat alat yang kecil, cepat, berguna, dan sangat unggul dalam menyelesaikan masalah tertentu (melalui vibe coding), saya rasa Anda tetap bisa sangat kompetitif di era AI

[jk34011]

Wah~ saya pikir vibe coding itu cuma ilusi,
Sudah lama saya tidak melihat tulisan yang ditulis seprofesional ini.
Saya membacanya dengan sangat menikmati.

[spilist2]

Terima kasih! Saya melihat potensinya sangat besar haha

[jk34011]

Ah;; sekarang setelah saya lihat lagi, komentar saya agak begitu ya.
Rasanya lebih tepat bukan dibilang ilusi, tapi lebih ke masih belum sampai di sana?
Pada akhirnya, saya merasa vibe coding tetap punya batasan, dan tanpa pengetahuan pengembangan akan sulit.
Tentu saja, saya pikir nanti akan jauh lebih baik seiring AI berkembang.

Saya menulis balasan panjang lagi karena takut komentar saya terdengar seperti bilang vibe coding tidak ada artinya.
Saya juga sering sekali memakai vibe coding hehe

[spilist2]

Ah, bukan begitu. Haha, saya juga menangkap nuansa yang Anda maksud.

Jadi, seperti yang saya tulis di artikel, vibe coding yang saya maksud jauh dari sekadar klik, dan menurut saya untuk meningkatkan levelnya, engineer tetap harus berusaha keras.

[bbulbum]

Saya selalu membacanya dengan baik.

[spilist2]

Terima kasih!

[spilist2]

Saya juga membuat video YouTube hehe https://www.youtube.com/watch?v=ecY5VBpruOA