Vom Vibe-Coding-Prototyp zur produktiven Anwendung

Vibe Coding bedeutet, eine Anwendung überwiegend durch Beschreibungen in natürlicher Sprache entstehen zu lassen, etwa mit Lovable, Bolt, Base44, Replit, Cursor oder Claude Code, ohne jeden generierten Code im Detail zu prüfen. Für Prototypen ist das hervorragend: Ideen werden in Tagen testbar. Sobald echte Kunden, echte Daten oder Zahlungen ins Spiel kommen, ändern sich die Anforderungen grundlegend. Dieser Beitrag bietet einen Ampel-Check, mit dem Sie den Reifegrad Ihres Prototyps selbst einschätzen können.

Was sich zwischen Prototyp und Produktion ändert

Der Ampel-Check in sechs Bereichen

Bewerten Sie jeden Bereich mit Grün (erfüllt), Gelb (teilweise) oder Rot (fehlt). Jedes Rot ist vor dem Livegang zu beheben.

1. Zugriff und Berechtigungen

• Werden Berechtigungen serverseitig oder in der Datenbank geprüft, nicht nur durch Ausblenden von Buttons im Frontend?
• Sind bei Supabase und ähnlichen Backends Row-Level-Security-Regeln für jede Tabelle aktiv und getestet?
• Kann ein Nutzer durch Ändern einer ID in der URL fremde Daten sehen? Probieren Sie es aus.

2. Geheimnisse und Schlüssel

• Liegen API-Schlüssel für Zahlungsdienste, E-Mail-Versand oder KI-Modelle ausschließlich auf dem Server?
• Sind Schlüssel, die jemals im Repository oder Chatverlauf standen, ausgetauscht?
• Gibt es Budgetgrenzen und Warnungen für kostenpflichtige APIs?

3. Daten und Datenschutz

• Gibt es automatische Backups, und wurde eine Wiederherstellung schon einmal getestet?
• Sind Datenschutzerklärung, Auftragsverarbeitungsverträge und eine Möglichkeit zur Kontolöschung vorhanden?
• Werden personenbezogene Daten nur dort verarbeitet, wo es nötig ist, auch in Logs und KI-Prompts? Unsere DSGVO-Checkliste für KI-Produktteams (englisch) hilft bei der Prüfung.

4. Tests und Qualität

• Gibt es automatisierte Tests für Registrierung, Login, Bezahlung und die zwei wichtigsten Kernabläufe?
• Laufen diese Tests bei jeder Änderung, bevor sie live geht?
• Sind leere Zustände, Fehlermeldungen und langsame Verbindungen bedacht?

5. Betrieb und Überwachung

• Werden Fehler im Frontend und Backend automatisch erfasst und gemeldet?
• Gibt es eine Staging-Umgebung, getrennt von der Produktion?
• Lässt sich eine fehlerhafte Version schnell zurückrollen?

6. Code und Verantwortung

• Liegt der Code in einem Repository, das Ihnen gehört?
• Kann eine Entwicklerin, die das Projekt nicht kennt, die Struktur in einem Tag verstehen?
• Ist geregelt, wer Sicherheitsupdates von Abhängigkeiten einspielt?

Drei verbreitete Irrtümer

1. „Der Builder kümmert sich um die Sicherheit.“ Plattformen stellen sichere Bausteine bereit, etwa Authentifizierung oder Datenbankregeln. Ob diese Bausteine richtig konfiguriert und für jede Tabelle aktiv sind, liegt bei Ihnen. Viele Sicherheitslücken in KI-generierten Apps entstehen genau an dieser Stelle.
2. „Es funktioniert, also ist es fertig.“ Ein Prototyp funktioniert im vorgesehenen Ablauf. Produktionsreife zeigt sich bei falschen Eingaben, parallelen Zugriffen, abgelaufenen Sitzungen und Netzwerkabbrüchen. Testen Sie bewusst den unglücklichen Pfad.
3. „Das Modell kann seine eigenen Fehler finden.“ Ein Coding-Agent kann bei der Suche helfen, etwa indem er Tests schreibt oder Code auf bekannte Muster prüft. Er übersieht aber oft dieselben Annahmen, die er beim Generieren getroffen hat. Eine Prüfung durch einen Menschen mit Sicherheitserfahrung ersetzt er nicht.

Auch das Wissen des Teams ist ein Faktor: Wer versteht, wie Agenten arbeiten und wo sie typischerweise danebenliegen, prüft gezielter. Unser Beitrag zu Agentic Coding vs. Vibe Coding (englisch) erklärt den Unterschied in der Arbeitsweise.

Härten oder neu aufbauen?

Nach dem Check stehen Sie vor einer Grundsatzentscheidung. Als Faustregel:

• Härten lohnt sich, wenn das Datenmodell grundsätzlich stimmt, die Rot-Punkte vor allem Konfiguration, Tests und Betrieb betreffen und der Code nachvollziehbar strukturiert ist.
• Ein Neuaufbau ist oft günstiger, wenn das Datenmodell die Kernabläufe nicht abbildet, Berechtigungen nur im Frontend existieren, dieselbe Logik an vielen Stellen dupliziert ist oder jede Änderung an anderer Stelle etwas kaputt macht.

Ein Neuaufbau ist kein Scheitern des Prototyps. Validierte Abläufe, Screens und Nutzerfeedback sind eine hervorragende Spezifikation, und mit KI-gestützter Entwicklung geht auch der Neuaufbau deutlich schneller als früher. Warnsignale und Rettungsstrategien beschreibt unser Beitrag zur Rettung von KI-generiertem Code (englisch).

Ein realistischer Ablauf für die Härtung

1. Bestandsaufnahme: Ampel-Check, Architekturübersicht, Liste aller externen Dienste und Schlüssel.
2. Sicherheits-Sofortmaßnahmen: Schlüssel austauschen, Datenbankregeln aktivieren, Admin-Zugänge absichern.
3. Fundament: eigenes Repository, Staging-Umgebung, automatisierte Deployments mit Tests.
4. Kernabläufe absichern: Tests für Registrierung, Login, Zahlung und Hauptfunktionen, Fehlerüberwachung.
5. Nutzererlebnis prüfen: Ein externer UX-Review deckt typische Lücken KI-generierter Oberflächen auf, etwa durch UXreviewer.io.
6. Betrieb übergeben: Verantwortliche, Wartungsrhythmus und Reaktionszeiten festlegen.

Wenn der Prototyp auch als App in den Stores erscheinen soll, kommen Signierung, Store-Richtlinien und Testphasen hinzu; siehe Lovable-App in den App Store bringen.

Selbst machen oder Unterstützung holen?

Teams mit Entwicklungserfahrung können viele Punkte selbst abarbeiten, wenn sie den generierten Code wirklich prüfen statt nur weiter zu prompten. Fehlt diese Erfahrung oder drängt die Zeit, ist externe Hilfe meist günstiger als ein Sicherheitsvorfall nach dem Launch. Sinnvoll ist auch eine Mischform: Ein erfahrenes Team übernimmt Bestandsaufnahme, Sicherheits-Sofortmaßnahmen und das technische Fundament, während Ihr eigenes Team danach mit KI-Werkzeugen weiterentwickelt, nun aber mit Tests, Staging und Code-Review als Sicherheitsnetz. OnlineAppCreator, die Agenturmarke von jocapps seit 2014, übernimmt unter anderem die Produktionshärtung und Rettung bestehender Prototypen, mit SLAs für den anschließenden Betrieb. Wenn Sie Ihren Prototyp einschätzen lassen möchten, können Sie ein kostenloses Erstgespräch buchen.