Baue Software im Dialog mit KI.
Vibe Coding bedeutet: Du beschreibst Ziel, Stil und Verhalten deiner App, ein Coding-Agent setzt es um, und du steuerst durch Feedback, Tests und Review.
1Was ist Vibe Coding?
Beim Vibe Coding nutzt du KI nicht nur als Chatbot, sondern als aktiven Coding-Partner. Du gibst Richtung, Kontext und Qualitätsanspruch vor; der Agent liest Dateien, schlägt Änderungen vor, schreibt Code und hilft beim Debugging.
Ziel statt Syntax
Du formulierst, was die App können soll, nicht jede technische Zeile.
Iteratives Arbeiten
Erster Entwurf, prüfen, nachschärfen, verbessern.
Du bleibst verantwortlich
Code wird gelesen, getestet und bewusst übernommen.
2Tools installieren
Für diesen Einstieg reichen Desktop-Apps. Sie geben dir eine Oberfläche für Projekte, Dateiänderungen, Vorschauen und Reviews, ohne dass du zuerst eine lokale Entwicklerumgebung einrichten musst.
Claude Desktop + Claude Code
Claude Code ist Anthropics Coding-Agent. Die Desktop-Erfahrung ist für mehrere parallele Sessions, Diffs, Projektarbeit und App-Vorschau ausgelegt.
OpenAI Codex
Codex ist OpenAIs Coding-Agent für lokale Projekte, Reviews und parallele Agentenarbeit. Die Desktop-App ist als Kommandozentrale für Agentic Coding gedacht.
3Arbeitsweise
Ein guter Vibe-Coding-Loop ist kurz und kontrollierbar. Du startest mit einem klaren Ziel, lässt den Agenten einen ersten Stand bauen und prüfst dann Funktion, Design und Codequalität.
Guter Start
Beschreibe Zielgruppe, Hauptfunktion, gewünschte Optik, Einschränkungen und was auf keinen Fall geändert werden soll.
Gutes Review
Lies die Änderung, teste den Kernfluss, achte auf kaputte Links, falsche Annahmen, Sicherheitsrisiken und unpassende Komplexität.
Typischer Ablauf
- Projekt oder leeren Ordner in der Desktop-App öffnen.
- Ziel in normaler Sprache beschreiben.
- Ersten Vorschlag prüfen, bevor große Änderungen übernommen werden.
- Feedback geben: präzise, klein, sichtbar testbar.
- Fertigen Stand versionieren und deployen.
4Gute Prompts
Prompts funktionieren besser, wenn sie Ergebnis, Kontext und Qualitätskriterien enthalten. Kurz ist okay; unklar ist teuer.
Beispiele
Erstelle eine einseitige Website fuer ein lokales Event. Zielgruppe sind Einsteiger. Sie soll einen klaren Zeitplan, eine Tool-Liste und einen Abschnitt mit naechsten Schritten haben.Verbessere diese Seite fuer mobile Nutzung. Aendere nur HTML und CSS. Erklaere danach kurz, welche Layout-Probleme du gefunden hast.Reviewe die letzte Aenderung wie ein Senior Engineer. Suche nach Bugs, kaputten Links, unnoetiger Komplexitaet und fehlenden Tests.5GitHub
Git speichert Versionen deines Projekts. GitHub legt diese Versionen online ab, macht Zusammenarbeit leichter und ist oft die Bruecke zum Deployment.
Repository
Der zentrale Projektordner online. Von hier koennen Hosting-Anbieter neue Versionen automatisch deployen.
Pull Request
Ein Vorschlag fuer eine Aenderung. Ideal, um KI-generierte Arbeit zu pruefen, zu kommentieren und erst dann zu mergen.
6Statische Website vs. Webapp
Bevor du deployst, lohnt sich eine einfache Unterscheidung:
Statische Website
Fertige HTML-, CSS- und JavaScript-Dateien. Der Server liefert sie direkt aus. Kein Login, keine eigene Datenbank, wenig Wartung.
Beispiele: Landing Pages, Portfolios, Event-Seiten, Dokumentation.
Gut fuer: Den schnellsten Weg zur ersten live sichtbaren Seite.
Webapp
Eine Anwendung mit Backend, Login, Datenbank, API oder individuellen User-Daten.
Beispiele: Dashboards, SaaS-Tools, Mitgliederbereiche, interne Tools.
Gut fuer: Produkte, die mehr als reine Anzeige brauchen.
7Statische Site deployen
Cloudflare Pages hostet statische Websites mit globalem CDN, eigener Domain und GitHub-Integration. Fuer viele Vibe-Coding-Projekte ist das der einfachste erste Deploy.
Empfohlener Weg
- Projekt in ein GitHub-Repository legen.
- Cloudflare Pages mit GitHub verbinden.
- Repository auswaehlen und Build-Einstellungen bestaetigen.
- Deploy starten und die erzeugte
pages.dev-URL testen.
8Webapps hosten
Sobald dein Projekt Backend-Logik, Login oder Datenbank braucht, waehle eine Plattform, die zu deinem Wissensstand und Kontrollbedarf passt.
Cloudflare Workers
Serverless am Edge. Gut fuer APIs, kleine Backends und Projekte, die nah an Cloudflare Pages bleiben sollen.
Staerke: schnell, skalierbar, wenig Server-Wartung.
Hetzner VPS
Eigener Server mit voller Kontrolle. Stark, wenn du Datenbank, Hintergrundjobs oder spezielle Infrastruktur brauchst.
Tradeoff: mehr Freiheit, aber auch mehr Verantwortung.
Hostinger
Hosting mit grafischem Panel und gefuehrten Deploy-Flows. Praktisch fuer Einsteiger, die moeglichst wenig Server administrieren wollen.
Staerke: niedrige Einstiegshuerde.
Vergleich
| Option | Preis (Einstieg) | Komplexitaet | Wann? |
|---|---|---|---|
| Cloudflare Pages | Gratis | niedrig | Reine statische Site |
| Cloudflare Workers | Gratis-Tier | mittel | API oder leichtes Backend |
| Hetzner VPS | ab ca. 4 Euro/Monat | hoch | Volle Kontrolle, eigene Infrastruktur |
| Hostinger | ca. 3-10 Euro/Monat | mittel | Gefuehrtes Hosting mit Panel |