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

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 para Iniciantes: Como eu construí um aplicativo web de cabine de fotos funcional com o Claude

Ultimamente, tenho ouvido falar muito sobre "vibe coding". Se você não está familiarizado com o termo, não se preocupe — eu também não estava até pouco tempo atrás.

Basicamente, o vibe coding é o ato de programar focando menos na sintaxe rigorosa e mais na "vibe" ou na intenção do que você deseja criar. Em vez de passar horas depurando erros de ponto e vírgula ou lutando com a lógica de um loop, você descreve o que quer para uma IA poderosa (como o Claude) e ela cuida da implementação técnica.

Para testar essa teoria, decidi construir algo divertido: um aplicativo web de cabine de fotos funcional. E o melhor? Eu não escrevi quase uma linha de código manualmente.

O que é Vibe Coding?

Tradicionalmente, programar exige um conhecimento profundo de linguagens como JavaScript, HTML e CSS. Você precisa entender como os elementos se conectam, como gerenciar o estado da aplicação e como manipular a API da câmera.

Com o vibe coding, sua principal ferramenta não é o teclado para digitar código, mas sim sua capacidade de comunicação. Você atua mais como um diretor de cinema ou um arquiteto do que como um pedreiro. Você fornece a visão, o estilo e as funcionalidades, e a IA traduz isso em código executável.

O Projeto: Uma Cabine de Fotos Web

A ideia era simples: uma página web que pudesse:

  1. Acessar a webcam do usuário.
  2. Tirar uma foto quando um botão fosse clicado.
  3. Aplicar um filtro de estilo "retro/vintage".
  4. Permitir que o usuário baixe a foto.

O Processo: Passo a Passo

1. O Prompt Inicial

Eu comecei com um prompt bem genérico no Claude 3.5 Sonnet:

"Crie um aplicativo web de cabine de fotos simples usando HTML, CSS e JavaScript puro. O usuário deve conseguir ver sua imagem da webcam, tirar uma foto e baixar a imagem resultante."

Em segundos, o Claude me entregou um arquivo único com todo o código necessário. Eu o salvei como index.html e abri no meu navegador. Funcionou! A câmera abriu, eu tirei uma foto e ela baixou.

2. Ajustando a "Vibe" (O Design)

O primeiro resultado era funcional, mas o design era muito básico. Eu queria algo com uma estética retrô, algo que lembrasse uma cabine de fotos de shopping antiga.

Então, eu mudei o foco para a "vibe":

"Isso funciona, mas o design está muito básico. Vamos mudar a vibe para algo retrô e nostálgico. Use cores pastéis, fontes que pareçam de máquinas de escrever e adicione uma borda branca grossa ao redor da foto tirada, como se fosse uma impressão física."

O Claude atualizou o CSS instantaneamente. O aplicativo passou de um projeto de escola para algo que eu realmente gostaria de usar.

3. Adicionando Funcionalidades (O Refinamento)

Depois que o visual estava certo, eu queria adicionar um filtro.

"Adicione um filtro de sépia e um pouco de ruído visual para que as fotos pareçam realmente antigas."

Novamente, o Claude manipulou o elemento <canvas> do HTML5 para aplicar os efeitos de imagem. Eu não precisei entender como os algoritmos de manipulação de pixels funcionam; eu só precisei saber que eu queria esse efeito.

4. Lidando com Erros (O Debugging por Vibe)

Nem tudo foi perfeito. Em um momento, o botão de tirar foto parou de funcionar após eu pedir para adicionar um contador de tempo. Em vez de abrir o console do desenvolvedor e procurar o erro no código, eu simplesmente descrevi o problema para o Claude:

"O botão de captura parou de responder depois que você adicionou o timer. Pode ser que o evento de clique esteja sendo bloqueado ou algo assim. Pode verificar?"

O Claude identificou que o timer estava sobrepondo a camada do botão e corrigiu o problema em segundos.

Lições Aprendidas

O vibe coding não é sobre "não aprender a programar". É sobre mudar o nível de abstração em que você trabalha.

  1. A clareza é tudo: Quanto mais descritivo você for sobre a "vibe" (estilo, sensação, fluxo), melhor será o resultado.
  2. Iteração é a chave: Você raramente acertará de primeira. O segredo está em conversar com a IA, pedindo pequenos ajustes contínuos.
  3. Conhecimento fundamental ainda importa: Embora eu não tenha escrito o código, eu sabia o que era um canvas, o que era um event listener e como o CSS funciona. Isso me permitiu saber o que pedir e identificar quando algo estava errado.

Conclusão

Construir esse aplicativo de cabine de fotos foi uma experiência incrível. Em menos de uma hora, eu passei de uma ideia vaga para um produto funcional e esteticamente agradável.

O vibe coding está democratizando a criação de software. Se você tem uma ideia e sabe comunicá-la, você agora tem o poder de construí-la.