𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝗪𝗲𝗯 𝗔𝗽𝗽

I am a writer, not a coder. My technical skills stopped at basic HTML in 1999.

Last week, I built my first real tool. I used Claude to "vibe code" a working photo booth web app for MLH.

Here is how a non-coder built a functional app for live events.

𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH runs many events. We needed a browser-based photo booth.

  • Attendees open a link on their phones.
  • They snap a selfie or upload a photo.
  • They add a branded frame.
  • They save the photo to their camera roll.
  • No accounts. No app stores. Just a link.

𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆 I wanted to use a complex framework. Claude talked me out of it.

For live events, fewer moving parts win. I built the entire tool in one single index.html file. It uses HTML, CSS, and JavaScript. There is no complex build step. It stays on GitHub Pages for free.

𝗧𝗵𝗲 𝗣𝗿𝗶𝘃𝗮𝗰𝘆 𝗕𝗼𝗻𝘂𝘀 I used an HTML canvas to combine the photo and the frame. All processing happens in the user browser. The photo never uploads to a server. This makes it private and secure for attendees.

𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗠𝗮𝗴𝗶𝗰 A static site can still have a backend. I used Supabase for storage.

  • Organizers upload frames to a Supabase bucket.
  • Attendees view those frames through the site.
  • Security lives in database policies, not hidden passwords.

𝗧𝗵𝗲 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀 Vibe coding helps with architecture, but you must watch for operational details:

  • Databases sleep. I learned to wake up my Supabase project the day before an event.
  • Image security. I had to add a specific line of code to allow the canvas to use remote images.
  • User experience. On phones, a "download" is hard to find. I changed the code to use the native mobile share sheet. This sends the photo straight to the camera roll.

𝗠𝘆 𝗟𝗲𝘀𝘀𝗼𝗻𝘀 𝗳𝗼𝗿 𝗬𝗼𝘂

  1. Pick a project with hard boundaries. A photo booth is a finish line. A social app is not.
  2. Ask the AI "why." The reasoning is more important than the code.
  3. Read the diffs. Do not let the AI change your site without your review.
  4. Own the decisions. The AI handles syntax, but you handle the constraints.

Vibe coding is not about skipping the work. It is about focusing on the right problems.

Vibe Coding untuk Pemula: Bagaimana Saya Membina Aplikasi Web Photo Booth yang Berfungsi dengan Claude

Pernahkah anda mempunyai idea yang hebat untuk aplikasi, tetapi anda merasa terhalang oleh kerumitan sintaksis pengaturcaraan? Jika ya, anda mungkin mahu mengenali konsep "vibe coding".

Baru-baru ini, saya telah mencuba sesuatu yang berbeza. Daripada menulis setiap baris kod secara manual, saya menggunakan Claude (sebuah model bahasa besar daripada Anthropic) untuk membina sebuah aplikasi web photo booth yang berfungsi sepenuhnya.

Hasilnya? Ia sangat menyeronokkan, dan ia mengubah cara saya melihat pembangunan perisian.

Apa itu Vibe Coding?

"Vibe coding" bukanlah istilah teknikal rasmi dalam sains komputer. Ia lebih kepada satu cara kerja di mana anda tidak lagi menumpukan perhatian kepada setiap titik bertitik (semicolon) atau kurungan yang betul. Sebaliknya, anda menumpukan perhatian kepada niat dan hasil akhir yang anda inginkan.

Anda memberikan "vibe" atau gambaran tentang apa yang anda mahu bina kepada AI, dan AI tersebut akan menterjemahkannya ke dalam kod yang berfungsi. Anda bertindak sebagai pengarah, manakala AI bertindak sebagai pembangun.

Projek Saya: Aplikasi Web Photo Booth

Idea saya ringkas: sebuah aplikasi web di mana pengguna boleh:

  1. Mengakses kamera mereka melalui pelayar web.
  2. Mengambil foto.
  3. Menggunakan penapis (filter) visual yang menyeronokkan.
  4. Memuat turun foto yang telah disunting.

Proses Pembangunan

1. Prompt Permulaan

Saya tidak bermula dengan menulis index.html atau script.js. Saya bermula dengan satu prompt yang ringkas kepada Claude:

"Saya mahu membina aplikasi web photo booth yang ringkas menggunakan HTML, CSS, dan JavaScript. Saya mahu pengguna boleh mengambil gambar menggunakan kamera web mereka, memilih antara tiga penapis (filter) hitam putih, sepia, dan vintage, dan memuat turun gambar tersebut."

Claude memberikan struktur asas dalam sekelip mata.

2. Iterasi (Proses Penambahbaikan)

Di sinilah "vibe coding" benar-benar berlaku. Apabila saya melihat hasilnya, saya dapati butang "Ambil Gambar" terlalu kecil. Saya tidak mengubah kod CSS secara manual. Sebaliknya, saya berkata kepada Claude:

"Butang itu nampak terlalu kecil dan tidak menarik. Bolehkah anda jadikannya lebih besar, berwarna biru terang, dan letakkan di tengah-tengah skrin?"

Claude mengemas kini kod tersebut. Saya teruskan dengan "vibe" seterusnya:

"Sekarang, tambahkan kesan bunyi 'klik' apabila gambar diambil supaya ia terasa lebih realistik."

3. Menangani Ralat

Sudah tentu, tidak semuanya berjalan lancar. Terdapat satu ketika di mana fungsi muat turun tidak berfungsi. Daripada saya cuba mencari ralat dalam beratus baris kod, saya hanya menyalin ralat tersebut dari konsol pelayar dan memberitahu Claude:

"Saya mendapat ralat ini apabila cuba memuat turun gambar: [Ralat Disini]. Bolehkah anda membaikinya?"

Claude menganalisis ralat tersebut dan memberikan penyelesaian yang berfungsi serta-merta.

Cabaran yang Dihadapi

Walaupun "vibe coding" terasa seperti magis, ia mempunyai cabarannya:

  • Kehilangan Kawalan Terperinci: Kadangkala, AI mungkin menulis kod yang terlalu kompleks untuk sesuatu tugas yang mudah.
  • Halusinasi AI: Kadangkala Claude mungkin mencadangkan perpustakaan (library) yang tidak wujud atau menggunakan sintaksis yang sudah lapuk.
  • Keperluan Pengetahuan Asas: Anda masih perlu memahami apa yang anda sedang bina. Jika anda tidak tahu apa itu "API" atau "DOM", anda akan sukar untuk memberikan arahan yang berkesan.

Pengajaran yang Diperolehi

  1. Komunikasi adalah Kunci: Semakin jelas "vibe" dan arahan anda, semakin baik hasilnya.
  2. Iterasi adalah Penting: Jangan cuba membina segalanya dalam satu prompt. Bina secara berperingkat.
  3. Gunakan AI sebagai Rakan Kongsi, Bukan Pengganti: AI sangat hebat untuk mempercepatkan proses, tetapi pemikiran logik dan visi kreatif anda tetap merupakan komponen yang paling penting.

Kesimpulan

"Vibe coding" telah meruntuhkan tembok penghalang bagi mereka yang mempunyai idea tetapi kurang kemahiran teknikal yang mendalam. Ia membolehkan kita beralih daripada "bagaimana cara menulis kod ini?" kepada "apa yang saya mahu bina?".

Jadi, apa yang anda akan bina dengan "vibe" anda hari ini?