She Vibe Codes: Vom ersten Prompt zum Live-Deployment

CHF 53, ein Cursor-Abo und eine Idee

Mit She Vibe Codes wollte ich nicht nur eine Plattform für Tech-Einsteiger und Business-Kunden schaffen, sondern den Workflow der Zukunft testen: Vibe Coding. Der gesamte Stack? Minimalistisch und modern.

Der KI-Agent Cursor übernahm die Rolle meines Junior-Entwicklers. Ich lieferte die Vision, die Inhalte und die Qualitätskontrolle. Die KI lieferte den Code. Doch schnell wurde klar: Ohne klare Führung liefert die KI Chaos.

Die Prompting-Reise: Von «Mache es Pink» zu «Starte Sprint 02»

Mein Prozess mit dem KI-Agenten verlief in Wellen. Am Anfang war es pures Experimentieren: Farben ändern, Emojis testen, Schriften ausprobieren. Doch je komplexer das Projekt wurde, desto mehr änderte sich mein Stil.

Phase 1 & 2: Design-Findung – Trial-and-Error pur

Die ersten Prompts waren kurz, vage und explorativ. Klassisches «Mache es pink», «Ändere den Background in Pastell-Grün», «Nimm die Schrift Righteous». Hier ging es um Geschwindigkeit und Bauchgefühl.

Das Farbschema durchlief vier Iterationen: Emerald-Grün → Pink (#FF4040) → Pastel-Blau/Violet → finales Purple (#8F00FF). Das Logo-Icon? Text-Logo → Ananas-SVG → Cherry-Emoji → Icon entfernt → 🍒 Emoji. Die Navigation wurde dreimal redesigned und einmal komplett zurückgesetzt.

«Benutze dieses Violett: #8F00FF. Passe das Blau an einen Ton an, der zu diesem Violet passt.»

«Mache es feminin-weicher und inkludiere die Schrift SheVibeCodes.»

«Gefällt mir nicht. Setze die Navigation zurück.»

Mein Learning: Vibe Coding heisst iterieren. Mal präzise, mal vage – und immer bereit sein, zurückzusetzen. Der Designprozess war ein Dialog, kein Befehl.

Phase 3: Vom Design zum Content-Projekt

Ab diesem Punkt wandelten sich die Prompts fundamental. Statt visueller Anpassungen kamen strukturierte, mehrteilige Anweisungen – mit nummerierten Punkten und konkreten Textvorgaben:

«Optimiere meine Website index.html, um sie als führende Schweizer Ressource für Vibe Coding zu positionieren.
1. Definition Vibe Coding: Titel, Text, Grafik
2. Meta-Tags im Head für SEO
3. Canonical URL
4. Impressum & Datenschutz nach Schweizer Recht»

In dieser Phase entstanden das Impressum, die Datenschutzseite, der Blog mit Filter-System, die Über-mich-Seite und die Vibe-Ressourcen-Seite. Der Kontext der KI war aufgebaut – Prompts wurden kürzer, weil der Agent den Kontext bereits kannte.

Phase 4: Professionalisierung – Sprints mit der KI

Der grösste Sprung kam, als ich die KI bat, den nächsten Sprint selbst vorzuschlagen. Die Antwort? Ein vollständiger Sprint mit User Stories, Akzeptanzkriterien und Taskboard. Daraus entstand Sprint 02 mit sieben Tasks:

Ab hier reichte oft ein einfaches «Let's go», um den nächsten Task zu starten. Die KI kannte den Kontext, die Sprint-Datei und die Akzeptanzkriterien.

Die harten Learnings: Wo die KI an ihre Grenzen stösst

Trotz der Begeisterung gab es Momente, in denen ich die Zügel straff ziehen musste. Mein wichtigstes Learning: Traue der KI, aber kontrolliere das Ergebnis.

Das CSS-Chaos

Cursor neigt dazu, CSS direkt in die HTML-Files zu schreiben. Jede Seite hatte am Ende eigene <style>-Blöcke mit duplizierten Regeln. Ich musste explizit anweisen, die Styles zu extrahieren und in eine zentrale Datei zu konsolidieren. Das hat nicht auf Anhieb geklappt – ich musste mehrmals prompten, und bei einer Bereinigung wurden sogar alle Umlaute beschädigt (Mojibake-Bug).

Fix: Konsequent eine einzige main.css einfordern und die Filestruktur aktiv kontrollieren.

Die Bild-Falle

Ein grosser Stolperstein! Wenn man Bilder direkt über die Chat-Konsole in Cursor hochlädt, werden sie oft verkleinert und kommen verpixelt auf der Seite an. Das Originalbild hatte 8230 × 5487 px – aber auf der Seite erschien es pixelig.

Die Lösung: Originale lokal in einem Source-Ordner ablegen. Cursor greift sie von dort, erstellt optimierte Varianten (640, 1280, 1920 px) und integriert responsive srcset-Attribute korrekt.

Zeitfresser & Credits

Cursor arbeitet mit einem Credit-System. Ich habe anfangs viele Credits für Design-Kleinigkeiten «verhauen» – Farbnuancen, Emoji-Wechsel, Navigation dreimal hin und zurück.

Mein Tipp: Konzentriere dich erst auf das Wesentliche (MVP), bevor du dich im Pixel-Perfect-Design verlierst.

Warten statt Walk-away

Vibe Coding ist teilweise langweilig. Man wartet viel, muss aber präsent bleiben, um Commands zu bestätigen. Weglaufen ist nicht – sonst stoppt der Prozess. Oft wäre ich manuell schneller gewesen, habe aber bewusst den KI-Weg gewählt, um das System zu testen.

Seiteneffekte und Debugging

Auch KI-generierter Code hat Seiteneffekte. Beim Footer-Update wurde ein <span id="year"> entfernt, aber das zugehörige JavaScript lief weiter. Resultat: ein unsichtbarer JS-Crash, der die gesamten Inhalte auf vier Seiten verschwinden liess. Erst mein manueller Browser-Check hat das Problem aufgedeckt.

Learning: Die menschliche Qualitätskontrolle bleibt unverzichtbar. Browser öffnen, prüfen, Feedback geben.

Professionalisierung durch GitHub & Sprints

Ein Gamechanger war die Nutzung der GitHub Desktop App. Ich habe begonnen, in sauberen Sprints zu arbeiten und jedes Deployment auf Production präzise zu beschreiben. Mein Repository ist heute strukturiert und sauber dokumentiert.

Auch bei den Inhalten habe ich die Kontrolle behalten. Während technische Sprints von der KI vorbereitet wurden, habe ich inhaltliche Meilensteine selbst definiert. So entstand ein Blog-System, das eben nicht «Standard» ist. Cursor lieferte erst ein sehr basic Resultat – erst durch gezieltes Nachbohren und präzise Design-Anweisungen wurde daraus der moderne Blog, den du heute auf der Seite siehst.

Wie sich die Prompts entwickelt haben

Das Ergebnis: Gekommen, um zu bleiben

Dank des sauberen Vercel-Deployments war die Indexierung in der Google Search Console ein Kinderspiel. Die Sitemap wurde sofort akzeptiert. Die Seite steht heute bei:

• 8 HTML-Seiten: Homepage, Vibe Log, 3 Blogartikel, Über mich, Vibe Ressourcen, Impressum, Datenschutz
• Design: Einheitliches Farbschema (#8F00FF), Righteous-Font, Gradient-Buttons, Glassmorphism
• SEO: Meta-Tags, Structured Data, Sitemap, Canonical URLs, Google Search Console
• Performance: Komprimierte Bilder, responsive srcset, fetchpriority
• Analytics: Vercel Insights mit Event-Tracking
• Accessibility: Skip-Links, aria-current, sichtbare Fokus-Styles

Alles entstanden durch natürliche Sprache – kein einziges Mal musste ich manuell Code schreiben.

Mein Fazit

Vibe Coding ersetzt kein technisches Verständnis. Man muss die Filestruktur aktiv einfordern, sonst hinterlässt die KI ein Chaos. Man muss jedes Ergebnis im Browser prüfen. Und man muss lernen, wann ein Reset sinnvoller ist als noch ein Prompt.

Aber: Wenn man lernt, die KI als Junior-Entwickler zu führen, ist die Geschwindigkeit unschlagbar.

She Vibe Codes ist erst der Anfang. Die Seite ist SEO-optimiert, barrierefrei und performant – und das alles durch die Kraft der Sprache.