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 mir eine persönliche Website, die als digitale Visitenkarte dient. Stelle mir zuerst Fragen, um alle wichtigen Informationen vorher zu sammeln.Verbessere diese Seite für mobile Nutzung. Ändere nur HTML und CSS. Erkläre danach kurz, welche Layout-Probleme du gefunden hast.Reviewe die letzte Änderung wie ein Senior Engineer. Suche nach Bugs, kaputten Links, unnötiger Komplexität und fehlenden Tests.5GitHub
Git speichert Versionen deines Projekts. GitHub legt diese Versionen online ab, macht Zusammenarbeit leichter und ist oft die Brücke zum Deployment.
Repository
Der zentrale Projektordner online. Von hier können Hosting-Anbieter neue Versionen automatisch deployen.
Pull Request
Ein Vorschlag für eine Änderung. Ideal, um KI-generierte Arbeit zu prüfen, 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 für: 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 für: Produkte, die mehr als reine Anzeige brauchen.
7Statische Site deployen
Cloudflare Pages hostet statische Websites mit globalem CDN, eigener Domain und GitHub-Integration. Für viele Vibe-Coding-Projekte ist das der einfachste erste Deploy.
Empfohlener Weg
- Projekt in ein GitHub-Repository legen.
- Cloudflare Pages mit GitHub verbinden.
- Repository auswählen und Build-Einstellungen bestätigen.
- Deploy starten und die erzeugte
pages.dev-URL testen.
8Webapps hosten
Sobald dein Projekt Backend-Logik, Login oder Datenbank braucht, wähle eine Plattform, die zu deinem Wissensstand und Kontrollbedarf passt.
Cloudflare Workers
Serverless am Edge. Gut für APIs, kleine Backends und Projekte, die nah an Cloudflare Pages bleiben sollen.
Stärke: 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 geführten Deploy-Flows. Praktisch für Einsteiger, die möglichst wenig Server administrieren wollen.
Stärke: niedrige Einstiegshürde.
Vergleich
| Option | Preis (Einstieg) | Komplexität | 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 | Geführtes Hosting mit Panel |
9Referenzen
Weiterführende Links zu Claude Code, Agent-Skills und praktischen Beispielen.
Claude Code Guide
Ein praktischer Einstieg in Claude Code, Arbeitsweise und sinnvolle Nutzung im Projektalltag.
Agent Skills auf GitHub
Repository mit Skills und Beispielen für spezialisierte Agenten-Workflows.