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

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 สำหรับมือใหม่: วิธีที่ฉันสร้างเว็บแอปตู้ถ่ายรูปที่ใช้งานได้จริงด้วย Claude

คุณเคยรู้สึกไหมว่าคุณกำลัง... "vibing" ไปกับโค้ดของคุณ?

ในช่วงไม่กี่เดือนที่ผ่านมา คำว่า "Vibe Coding" เริ่มกลายเป็นที่พูดถึงมากขึ้นในชุมชนนักพัฒนา มันไม่ใช่แค่การเขียนโค้ดแบบเดิมๆ แต่เป็นการเน้นไปที่ "ความรู้สึก" หรือ "เจตนา" (intent) ของสิ่งที่คุณต้องการสร้าง โดยปล่อยให้ AI เป็นคนจัดการกับรายละเอียดทางเทคนิคที่ยุ่งยาก

ในบทความนี้ ฉันจะพาคุณไปดูว่าฉันใช้ Claude ในการสร้างเว็บแอปตู้ถ่ายรูป (Photo Booth) ตั้งแต่เริ่มต้นจนใช้งานได้จริง โดยใช้เพียงแค่ "Vibe" และการพูดคุยเท่านั้น

Vibe Coding คืออะไร?

โดยปกติแล้ว การเขียนโปรแกรมคือการบอกคอมพิวเตอร์ว่า "ทำอย่างไร" (How) ทีละขั้นตอน เช่น "สร้างตัวแปรนี้", "ใช้ลูปนี้", "ถ้าเงื่อนไขเป็นจริง ให้ทำสิ่งนี้"

แต่ Vibe Coding คือการบอก AI ว่าคุณต้องการ "อะไร" (What) และ "ความรู้สึก" (Vibe) ของมันควรเป็นอย่างไร เช่น "ฉันต้องการเว็บแอปที่ดูสนุกสนานเหมือนตู้ถ่ายรูปในงานปาร์ตี้ มีปุ่มกดขนาดใหญ่ และมีเอฟเฟกต์ตอนถ่ายรูป"

แทนที่คุณจะเขียนฟังก์ชัน JavaScript เพื่อจัดการกับกล้องด้วยตัวเอง คุณแค่บอก "Vibe" ของคุณ แล้ว Claude จะจัดการเขียนโค้ดทั้งหมดให้

โปรเจกต์: เว็บแอปตู้ถ่ายรูป

เป้าหมายของฉันคือการสร้างเว็บแอปง่ายๆ ที่สามารถ:

  1. เปิดใช้งานกล้องเว็บแคมได้
  2. มีปุ่มสำหรับถ่ายรูป
  3. มีตัวนับถอยหลัง (Countdown) ก่อนถ่าย
  4. สามารถใส่ฟิลเตอร์สนุกๆ ได้
  5. แสดงรูปที่ถ่ายออกมาบนหน้าจอ

ขั้นตอนการทำงาน (The Workflow)

1. การเริ่มต้นด้วย "Vibe Prompt"

ฉันไม่ได้เริ่มด้วยการเขียนโครงสร้าง HTML หรือ CSS แต่ฉันเริ่มด้วยการอธิบายภาพรวมให้ Claude ฟัง:

"ช่วยสร้างเว็บแอปตู้ถ่ายรูป (Photo Booth) ที่ดูสนุกสนานและทันสมัยหน่อย ใช้ HTML, CSS และ JavaScript โดยให้มีปุ่มถ่ายรูปขนาดใหญ่ มีตัวนับถอยหลัง 3 วินาทีก่อนถ่าย และแสดงรูปที่ถ่ายได้บนหน้าจอด้วย"

และทันใดนั้น Claude ก็ส่งโค้ดชุดใหญ่มาให้ ซึ่งมันทำงานได้เกือบสมบูรณ์แบบทันที!

2. การปรับปรุงแบบวนซ้ำ (Iterative Refinement)

นี่คือจุดที่ "Vibe" สำคัญที่สุด เมื่อฉันเห็นว่าแอปดู "จืด" ไปหน่อย ฉันก็แค่บอกว่า:

"มันดูดีแล้ว แต่ช่วยทำให้มันดูเหมือนงานปาร์ตี้มากขึ้นหน่อย เพิ่มสีสันสดใส ใช้ฟอนต์ที่ดูสนุกสนาน และเพิ่มเอฟเฟกต์แสงแฟลชตอนถ่ายรูปด้วย"

ฉันไม่ได้บอกว่าต้องเปลี่ยน background-color เป็นสีอะไร หรือต้องใช้ CSS animation แบบไหน ฉันแค่บอก "Vibe" ที่ต้องการ

3. การแก้บั๊กผ่านการสนทนา (Debugging via Conversation)

แน่นอนว่าไม่ได้มีทุกอย่างสมบูรณ์แบบ ในตอนแรกปุ่มถ่ายรูปทำงานช้าไปนิด ฉันไม่ได้ไปไล่ดู Log ใน Console เอง แต่ฉันแค่บอก Claude ว่า:

"ปุ่มถ่ายรูปมันดูหน่วงๆ หน่อย ช่วยทำให้มันตอบสนองเร็วขึ้นและดูลื่นไหลกว่านี้ได้ไหม?"

Claude ก็จะวิเคราะห์โค้ดเดิมและเสนอวิธีปรับปรุงประสิทธิภาพ (Optimization) ให้ทันที

บทเรียนที่ได้รับ

การทำ Vibe Coding สอนให้ฉันรู้ว่า:

  • การสื่อสารสำคัญกว่าไวยากรณ์: ความสามารถในการอธิบายสิ่งที่คุณต้องการให้ชัดเจน (แม้จะใช้ภาษาพูดก็ตาม) สำคัญกว่าการจำ Syntax ของภาษาโปรแกรม
  • การคิดเชิงระบบ (System Thinking): แม้ AI จะเขียนโค้ดให้ แต่คุณยังต้องเข้าใจโครงสร้างโดยรวม เพื่อที่จะบอกทิศทางที่ถูกต้องได้
  • ความเร็วในการสร้างต้นแบบ (Prototyping Speed): สิ่งที่เคยใช้เวลาเป็นวันๆ ตอนนี้สามารถทำเสร็จได้ในไม่กี่นาที

สรุป

Vibe Coding ไม่ได้หมายความว่าเราไม่ต้องเรียนรู้การเขียนโปรแกรมอีกต่อไป แต่มันคือการยกระดับจากการเป็น "คนเขียนโค้ด" (Coder) ไปสู่การเป็น "สถาปนิกผู้ควบคุมทิศทาง" (Architect/Conductor)

หากคุณมีไอเดีย แต่ไม่รู้จะเริ่มเขียนโค้ดอย่างไร ลองใช้ Claude และเริ่ม "Vibe" ไปกับมันดูสิ!