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

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 für Anfänger: Wie ich eine funktionierende Fotobox-Web-App mit Claude gebaut habe

Hast du jemals das Gefühl gehabt, dass du Software einfach... „viben“ könntest?

In letzter Zeit hört man immer öfter den Begriff „Vibe Coding“. Aber was bedeutet das eigentlich? Ist es nur ein Trend, oder ist es eine echte Veränderung in der Art und Weise, wie wir Software entwickeln?

Ich habe mich entschieden, es auszuprobieren. Mein Ziel: Eine voll funktionsfähige Fotobox-Web-App zu bauen – und zwar ohne tiefgreifende Programmierkenntnisse, nur mit Hilfe von Claude.

Was ist Vibe Coding?

Vibe Coding ist eine Art der Softwareentwicklung, bei der man weniger Zeit mit dem Schreiben von Syntax und mehr Zeit mit dem Beschreiben der Vision und des „Vibes“ verbringt. Anstatt jede Zeile Code manuell zu tippen, nutzt man Large Language Models (LLMs) wie Claude, um die Implementierung zu übernehmen.

Man gibt die Richtung vor, beschreibt das gewünschte Verhalten und korrigiert das Modell, wenn etwas nicht stimmt. Es geht weniger um das Wie (die Syntax) und mehr um das Was (die Intention).

Das Projekt: Eine Fotobox-Web-App

Die Idee war simpel: Eine Web-App, die:

1. Die Kamera des Benutzers aktiviert.
2. Einen Countdown startet.
3. Ein Foto macht.
4. Filter anwendet.
5. Das Foto speichert oder herunterlädt.

Für jemanden, der nicht täglich mit JavaScript, HTML und CSS arbeitet, klingt das nach einer Menge Arbeit. Aber mit Vibe Coding war der Ansatz ein ganz anderer.

Der Prozess

Schritt 1: Der erste Prompt

Ich fing nicht mit einer komplexen Architektur an. Ich fing einfach an, Claude zu sagen, was ich wollte.

"Ich möchte eine einfache Web-App bauen, die als Fotobox funktioniert. Sie soll die Kamera nutzen, einen 3-Sekunden-Countdown anzeigen und dann ein Foto machen. Benutze HTML, CSS und JavaScript in einer einzigen Datei."

Claude lieferte sofort einen funktionierenden Prototyp. Es war fast magisch.

Schritt 2: Iteration und Verfeinerung

Hier kommt der eigentliche „Vibe“ ins Spiel. Der erste Entwurf war okay, aber er fühlte sich nicht „richtig“ an. Er sah zu altmodisch aus.

Mein nächster Prompt: "Das funktioniert! Aber lass es moderner aussehen. Benutze ein dunkles Design, abgerundete Ecken und füge einen coolen Scanline-Effekt hinzu, damit es wie eine Retro-Fotobox wirkt."

Ich beschrieb das Gefühl, das die App vermitteln sollte. Claude passte das CSS an und fügte Animationen hinzu.

Schritt 3: Fehlerbehebung (Debugging)

Natürlich gab es Probleme. Der Countdown funktionierte manchmal nicht richtig, wenn man zu schnell klickte. Anstatt den Fehler im Code zu suchen, kopierte ich die Fehlermeldung aus der Browser-Konsole und gab sie Claude.

"Der Countdown springt manchmal doppelt. Hier ist die Fehlermeldung: [Fehlermeldung]. Kannst du das fixen?"

Claude analysierte den Logikfehler und lieferte die korrigierte Version.

Was ich gelernt habe

1. Die Intention ist alles: Je klarer du beschreiben kannst, was das Endergebnis sein soll, desto besser ist das Ergebnis.
2. Iterieren ist der Schlüssel: Erwarte nicht, dass der erste Prompt perfekt ist. Bau das Fundament und arbeite dich Schicht für Schicht vor.
3. Verstehe die Grundlagen: Auch wenn du den Code nicht selbst schreibst, hilft es enorm, zu wissen, was ein <div>, eine function oder ein event listener ist, um die KI besser zu steuern.

Fazit

Vibe Coding macht die Softwareentwicklung demokratischer. Es ermöglicht Menschen mit Ideen, aber ohne jahrelange Syntax-Kenntnisse, Dinge zu erschaffen. Es ist nicht das Ende des Programmierens, aber es ist der Beginn einer neuen Ära, in der die Kreativität und die Vision wichtiger sind als die Fähigkeit, Semikolons an die richtige Stelle zu setzen.