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

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.

Вайб-кодинг для начинающих: как я создал работающее веб-приложение для фотобудки с помощью Claude

Вы когда-нибудь чувствовали, что программирование — это слишком сложно? Что вам нужно знать тысячи синтаксических правил, чтобы просто создать что-то крутое?

Забудьте об этом. Добро пожаловать в эру вайб-кодинга.

Что такое вайб-кодинг?

Вайб-кодинг — это новый способ программирования. Это не про написание строк кода в привычном понимании. Это про передачу настроения, идеи и намерения. Вместо того чтобы вручную писать каждую функцию, вы описываете ИИ, какой «вайб» вы хотите получить от своего приложения, и позволяете ему сделать всю грязную работу.

Вы выступаете в роли дирижера, а ИИ — в роли вашего оркестра.

Мой проект: Веб-приложение «Фотобудка»

Я решил проверить, насколько далеко можно зайти с помощью вайб-кодинга. Моя цель? Создать полноценное веб-приложение для фотобудки. Оно должно было:

• Запускать веб-камеру.
• Позволять делать снимки.
• Накладывать забавные фильтры.
• Позволять скачивать результат.

И всё это — без написания ни одной строчки кода вручную.

Процесс

Шаг 1: Первый промпт

Я открыл Claude и просто написал:

«Создай мне веб-приложение для фотобудки. Я хочу, чтобы оно выглядело современно, использовало React и позволяло пользователям делать фото через веб-камеру, накладывать черно-белый фильтр и скачивать изображение».

Шаг 2: Магия происходит

Claude не просто выдал мне кусок кода. Он выдал мне структуру. Он создал компоненты, настроил доступ к камере и реализовал логику фильтров.

Я скопировал код в свой редактор, и — бам! — оно работало.

Шаг 3: Итерации (Тот самый «вайб»)

Конечно, не всё было идеально с первого раза. Кнопка «Сделать фото» была слишком маленькой, а фильтр выглядел... ну, не очень.

Вместо того чтобы лезть в CSS, я просто сказал Claude:

«Сделай кнопку больше и ярче, добавь эффект свечения при наведении. И сделай фильтр более мягким, как в старых кинофильмах».

Это и есть вайб-кодинг. Я не исправлял padding или filter: grayscale(100%). Я просто описывал свои ощущения.

Чему это меня научило?

Вайб-кодинг не делает программистов ненужными. Напротив, он меняет их роль. Теперь важно не то, насколько хорошо вы помните синтаксис, а то, насколько четко вы можете сформулировать свою идею и насколько глубоко вы понимаете архитектуру того, что строите.

Вы становитесь архитектором идей, а не просто набором печатных символов.

Заключение

Если вы всегда хотели создавать приложения, но боялись кода — сейчас самое время. Попробуйте вайб-кодинг. Найдите свой вайб и создайте что-то потрясающее.