Hallo, ich bin Zak – folgt mir auf X @heyMrZak, um mehr über das Entwickeln mit KI zu erfahren.
Dieser Artikel richtet sich an technisch nicht versierte Leser, die ohne technischen Hintergrund mit „Vibe Coding“ beginnen möchten.
Das eigentliche Problem beim „Vibe-Coding“
Basierend auf meiner Erfahrung beim Entwickeln von Apps und Websites mit KI ist das Problem folgendes: Wenn du einfach nur zusiehst, wie die KI deinen Code schreibt, ohne zu verstehen, was sie tut, wirst du meist sagen: „Ich habe die App getestet, die Funktion funktioniert.“ Aber die eigentliche Frage lautet: Ist diese Seite sicher? Ist sie für SEO optimiert? Hast du das tatsächlich getestet?
Das ist die Frage, die die meisten Anfänger übersehen. Dieser Artikel zeigt dir, wie du deine Funktionen auf SEO testest, und gibt dir Tipps zum Einsatz von KI beim Programmieren, ohne dass deine App bei jeder Änderung zusammenbricht.
Das Problem der „KI-Schleife“
Manchmal gibst du der KI eine Eingabe, sie schreibt den Code, und später stellst du fest, dass sie etwas anderes kaputtgemacht hat, ohne dir Bescheid zu geben – du merkst es erst, wenn du dich näher damit befasst. Das nenne ich die KI-Schleife. Jeder Vibe-Coder hat damit zu tun. Aber du kannst das Problem mit ein paar Gewohnheiten verringern.
Wenn du zu den Leuten gehörst, die sich direkt in die Entwicklung ihrer nächsten App im Instagram-Maßstab stürzen, dann willkommen in der Schleife – besonders, sobald deine App komplexer wird.
Schritt 1: Mach dir zuerst Klarheit über deine Idee
Bevor du irgendetwas tust: Ist deine Idee eigentlich klar? Wenn nicht, nutze ChatGPT oder Claude, um sie durchzusprechen, und fasse sie dann in einem PRD (Product Requirements Document) zusammen. Das ist eines der nützlichsten Dinge, die du einer KI an die Hand geben kannst, bevor du mit den Eingabeaufforderungen beginnst.
Frag dich selbst: Was brauche ich noch? Zum Beispiel das Design. Ich empfehle, beim Design auf deine eigene Vorstellungskraft zurückzugreifen – ein bisschen persönliche Note ist besser als das generische, von der KI erzeugte Design, mit dem jeder Anfänger am Ende dasteht.
Du kannst Figma nutzen, wenn du richtig gestalten möchtest, oder einfach Wireframes in ein Notizbuch skizzieren – das hilft mir, jede Idee aus meinem Kopf zu bekommen. Du kannst auch KI-Design-Tools verwenden, aber füge immer deine eigene Note hinzu. Das ist es, worauf es wirklich ankommt.
Schritt 2: Wähle deinen KI-Editor oder dein KI-Tool
Nachdem du nun dein Design und dein PRD hast, musst du deinen KI-Editor oder dein KI-Tool auswählen (das ist nicht dasselbe).
Ich persönlich nutze einen KI-Editor, weil ich die Freiheit schätze – man kann ihn für alles verwenden, im Gegensatz zu den meisten KI-Tools, die einen an ihre Plattform binden. Wenn deine Idee jedoch nicht allzu groß oder komplex ist, ist ein KI-Tool völlig in Ordnung und wahrscheinlich schneller.
Wenn du wie ich bist und die volle Kontrolle über alles haben möchtest, entscheide dich für einen AI-Editor:
- Cursor
- Claude Code
- Codex
Schritt 3: Wähle deinen Tech-Stack
Bevor du irgendetwas anderes tust – welchen Stack verwendest du?
Für mobile Apps empfehle ich Flutter. Es eignet sich hervorragend für ein MVP (Minimum Viable Product), da du mit einer einzigen Codebasis sowohl iOS- als auch Android-Apps erstellen kannst.
Für Websites solltest du React verwenden.
Schritt 4: Wähle eine Datenbank
Du benötigst eine Datenbank, um die Daten deiner Nutzer zu speichern.
Supabase lässt sich einfach einrichten und eignet sich sowohl für Apps als auch für Websites – mit einem soliden kostenlosen Tarif. Es verwaltet die Authentifizierung und Ihre Datenbank an einem Ort.
Firebase ist ebenfalls hervorragend – es ist ein Produkt von Google und eignet sich ebenfalls gut für Anwendungen.
Meine persönliche Empfehlung: Supabase mit SQL.
Sobald du deine Datenbank eingerichtet und dich für einen Stack entschieden hast, fahre mit dem nächsten Schritt fort.
Schritt 5: Erstelle Regeln für deine KI
Hier legen Sie strenge Grenzen für Ihr Projekt fest. Bitten Sie ChatGPT oder Claude, Ihnen beim Verfassen einer Regeldatei zu helfen. Diese sollte unter anderem Folgendes enthalten:
- Bearbeite nichts, wozu du nicht aufgefordert wurdest
- Maximal 400 Zeilen pro Datei – erstelle danach neue Dateien
- Kommentiere jede Funktion: Was sie tut und warum
- Füge keine Plugins oder Pakete hinzu, um die du nicht gebeten hast
- Halte dich an die bestehende Projektstruktur
Zu diesem Zeitpunkt hast du: Regeln, Stack, Design und ein PRD. Jetzt bist du bereit für die Prompt-Erstellung.
Schritt 6: Mit dem Prompting beginnen (auf die richtige Art und Weise)
Ich werde hier nicht im Detail erklären, wie man Prompts verfasst, aber wenn du dir nicht sicher bist, wie man einen guten Prompt schreibt, bitte ChatGPT oder Claude, ihn für dich zu verfassen – sei dabei nur klar in deinen Vorgaben. KI ist intelligent, versteht aber manchmal dennoch Dinge falsch.
Wenn du Anfänger bist, überprüfe alles, was die KI erstellt. Gehe nicht davon aus, dass es funktioniert, nur weil sie sagt, dass es so ist.
SEO- und GEO-Tipps für Vibe-Coded-Websites
Wenn du eine Website erstellst, weise deine KI an, Schema-Markup zu deinen wichtigsten Seiten hinzuzufügen – und ehrlich gesagt auch SEO-Grundlagen auf jeder Seite.
Teste anschließend jede Seite mit validator.schema.org. Füge die Seiten-URL ein, führe den Test durch, und falls es Fehler oder Warnungen gibt, die du nicht verstehst, mache einen Screenshot und bitte deine KI, sie zu erklären und zu beheben.
Vor der Veröffentlichung: Sicherheit und Tests
Sobald deine App fertig ist, vergiss nicht, deine KI deine Sicherheitskonfiguration überprüfen zu lassen – das ist der Teil, den die meisten Anfänger überspringen, und er ist der wichtigste.
Im Internet gibt es zahlreiche Sicherheits-Checklisten – nutze eine davon und lass deine KI jede Zeile auf Schwachstellen überprüfen. Gehe in deine Datenbank und überprüfe deine RLS-Richtlinien (Row Level Security) in Supabase oder deine Regeln in Firebase. Wenn du diese nicht verstehst, bitte deine KI, dir die korrekte Einrichtung Schritt für Schritt zu erklären.
Bevor du deine App im App Store einreichst (oder sie echten Nutzern zur Verfügung stellst), teste jede Funktion und jede Schaltfläche. Apps werden häufiger wegen fehlerhafter Abläufe abgelehnt als aus jedem anderen Grund. Und vergiss nicht deine Datenschutzerklärung – sie ist vorgeschrieben und wichtig.