Ich bin Designer und Low-Code-Enthusiast und habe mich vor Kurzem zum ersten Mal entschieden, Vibe Coding mit Codex auszuprobieren.
Der Grund war einfach: Ich lerne gerne neue Dinge, und in letzter Zeit hört man wirklich überall von KI-gestützter Softwareentwicklung. Irgendwann dachte ich mir also, dass es Zeit wird, Codex selbst auszuprobieren, anstatt nur darüber zu lesen.
Da ich im Bereich Design und Low-Code arbeite, kann ich Anwendungen in Figma vorbereiten und verstehe die Grundlagen von CSS, HTML und ein wenig JavaScript. Die erste Frage war also nicht ob ich etwas bauen kann, sondern was ich eigentlich bauen möchte. Es sollte sinnvoll sein, aber gleichzeitig nicht zu komplex.
Die erste Idee – und ein schneller Realitätscheck
Aus meiner Zeit als leidenschaftlicher Fotograf hatte ich schon länger die Idee für eine App speziell für Fotografen im Kopf. Teile davon hatte ich sogar bereits in Figma entworfen, also schien das der perfekte Test für Vibe Coding zu sein.
Ich gab der KI ein paar grundlegende Anweisungen – und plötzlich passierten Dinge, die mich ehrlich überrascht haben. Das Ergebnis war beeindruckend. In diesem Moment wurde mir klar, dass das tatsächlich funktionieren kann und dass Vibe Coding enormes Potenzial hat.
Gleichzeitig merkte ich aber auch, dass diese App für mich persönlich keinen wirklichen praktischen Nutzen hatte. Also entstand eine neue Idee.
Eine smarte Rezept-Management-App
Ich brauchte ein Projekt mit einem klaren Problem, einer konkreten Zielgruppe und gleichzeitig einem überschaubaren Umfang, um Codex sinnvoll zu testen. Deshalb entschied ich mich schließlich für eine Rezept-App.
Meine Frau hat viele vegetarische Rezepte, aber sie waren überall verteilt – auf Zetteln, in Screenshots, Nachrichten und Notizen. Wenn sie etwas kochen wollte, bestand die größte Herausforderung oft nicht im Kochen selbst, sondern darin, das Rezept überhaupt wiederzufinden.
Dabei wurde mir klar, dass dieses Problem viele Menschen haben. Sie möchten häufiger vegetarisch kochen, wissen aber oft nicht, wo sie anfangen sollen, was zusammenpasst oder wie sie ihre Rezepte übersichtlich organisieren können.
Genau an diesem Punkt begann die App wirklich Sinn zu ergeben. Es ging nicht mehr nur um eine digitale Rezeptliste, sondern um ein einfaches Tool, das Inhalte organisiert, Entscheidungen erleichtert und Rezepte unkompliziert mit anderen teilen lässt.
Design als erster Schritt
Die erste Phase war klar: das Design der App.
In Figma habe ich vorbereitet:
- einen Startbildschirm mit vier Kategorien,
- eine Rezeptübersicht,
- eine Detailansicht für Rezepte.
Bereiche wie Favoriten, „Über uns“ und Einstellungen habe ich bewusst auf später verschoben, weil sie für die erste Version nicht entscheidend waren.
Ich möchte hier nicht den gesamten Designprozess beschreiben, da sich der Artikel eher auf die Entwicklung der App konzentriert. Erwähnenswert ist aber, dass ich mich visuell an modernen mobilen Interfaces im Stil des neuen iOS orientieren wollte.
Für den Startbildschirm brauchte ich vier Kategorie-Illustrationen. Obwohl meine Frau Illustratorin ist, haben wir beschlossen, mit KI-generierten Bildern über Gemini zu experimentieren. Anschließend habe ich die Ergebnisse in Illustrator weiterbearbeitet.
Für den Bereich „Über uns“ testete ich außerdem das lokale KI-Modell Flux über Stability Matrix und ComfyUI. Dabei verwandelte ich ein Ausgangsfoto in ein Bild im Pixar-Stil. Für mich war das ein spannendes Experiment, weil es gezeigt hat, wie KI nicht nur beim Programmieren, sondern auch bei der Erstellung visueller Inhalte unterstützen kann.
Warum gerade Codex?
Natürlich stellte sich zuerst die Frage: Welche KI eignet sich am besten fürs Programmieren?
Claude ist aktuell sehr stark, aber da viele Menschen ohnehin GPT nutzen, entschied ich mich für Codex von OpenAI. Ein Vorteil war außerdem, dass Codex bereits in GPT integriert ist und die Credits separat gehandhabt werden, sodass ich während des gesamten Projekts nichts zusätzlich kaufen musste.
Der Start der Entwicklung
Ich erstellte ein neues Projekt, wählte ein Verzeichnis aus und öffnete den klassischen Chat.
Mein Prompt war relativ einfach:
- Ich möchte eine PWA-App entwickeln (primär mobile-first),
- es soll eine Rezept-Management-App sein,
- mit einem Startbildschirm mit vier Kategorien,
- einer Rezeptübersicht und Detailansicht,
- sowie einem Adminbereich zum Hinzufügen und Bearbeiten von Rezepten.
Zu jedem Screen fügte ich außerdem einen Link zum entsprechenden Figma-Design hinzu. Das war alles. Codex begann sofort mit der Arbeit.
Direkt am Anfang schlug mir Codex zwei Möglichkeiten vor:
- eine einfachere Lösung mit Vanilla JS,
- oder eine skalierbarere Variante mit React + Vite + TypeScript.
Als Designer konnte ich nicht sicher einschätzen, welcher Weg der richtige ist. Ein Entwicklerkollege half mir hier weiter und empfahl React, vor allem weil es langfristig sinnvoller ist, wenn die App wächst und zusätzliche Funktionen bekommt.
Warum PWA?
Die Entscheidung für eine Progressive Web App war schnell getroffen und vor allem pragmatisch.
- Ich musste mich nicht mit dem App Store oder Google Play beschäftigen,
- keine Kosten für Entwicklerkonten,
- die App funktioniert auf allen Plattformen (Mobil, Tablet, Desktop),
- sie lässt sich wie eine native App installieren,
- funktioniert auch offline oder bei schlechter Verbindung,
- und unterstützt Push-Benachrichtigungen.
Für ein Experiment mit Codex war das die schnellste und praktischste Möglichkeit, eine funktionierende Anwendung bereitzustellen, ohne unnötige Komplexität bei der Distribution.
Iteration: Die Realität der Arbeit mit Codex
Das erste Ergebnis war überraschend gut.
Codex verstand direkt aus Figma Typografie, Layouts, Schatten, Blur-Effekte und die allgemeine visuelle Richtung. Natürlich war nicht alles perfekt – Logos, Bilder, Abstände und Details mussten angepasst werden –, aber als Ausgangspunkt war es mehr als ausreichend.
Von dort aus begann ich Schritt für Schritt mit der Optimierung:
- über Prompts wie „mach das kleiner“, „zentriere das“ oder „füge das hinzu“,
- oder direkt im CSS-Code.
Als ich an die Grenzen des kostenlosen Figma-Tarifs stieß, schickte ich Codex einfach Screenshots. Auch damit kam die KI problemlos zurecht und konnte das Design entsprechend anpassen.
Nach und nach optimierte ich:
- Größen, Farben und Animationen,
- Kategorien wie vegan und vegetarisch,
- Filter- und Sortierfunktionen.
Besonders wichtig war für mich die Rezept-Detailansicht:
- ein großes Bild mit Parallax-Effekt,
- Zutaten,
- Zubereitungsschritte.
Anfangs strukturierte Codex die Zutaten nach dem Prinzip „eine Zeile = ein Eintrag“. Technisch funktionierte das zwar, aber ich brauchte mehr Flexibilität. Deshalb erweiterte ich den Adminbereich um Formatierungsoptionen wie Fettschrift und Aufzählungen.
Die größte Herausforderung: Die App online bringen
Bis zu diesem Punkt lief alles lokal auf meinem Computer. Damit die App aber wirklich sinnvoll wird, musste sie online verfügbar sein – idealerweise kostenlos, da es sich immer noch um ein Experiment handelte.
Und genau hier begann die größte Herausforderung.
Zunächst testete ich Firebase + Netlify, stieß aber sehr schnell an Limits. Nach mehreren Deployments wurde mein Projekt von Netlify sogar vorübergehend blockiert.
Am Ende entschied ich mich für:
- Firebase – Datenbank und Backend,
- Cloudinary – Bildverwaltung und Optimierung,
- Cloudflare – Frontend-Hosting.
Die größte Herausforderung war dabei nicht der Code selbst, sondern die Integration der einzelnen Services:
- API-Keys,
- Authentifizierung,
- Konfiguration der Dienste.
Codex half mir Schritt für Schritt und erklärte, was wo eingerichtet werden musste. Trotzdem war das der manuellste Teil des gesamten Projekts.
Der letzte Feinschliff: Push-Benachrichtigungen
Push-Benachrichtigungen waren für die erste Version eigentlich nicht notwendig, aber bei einer PWA wollte ich diese Funktion unbedingt testen.
Das Prinzip ist einfach:
- Ich füge über das Admin-Interface ein neues Rezept hinzu,
- aktiviere die Benachrichtigungsoption,
- und Nutzer mit aktivierten Notifications erhalten eine Meldung.
Mit diesem Teil hatte Codex etwas mehr Schwierigkeiten, aber am Ende funktionierte alles. Gleichzeitig mussten wir auch Sicherheitsaspekte berücksichtigen, damit das Benachrichtigungssystem nicht missbraucht werden kann.
Fazit
Mein erster Versuch mit Vibe Coding war insgesamt äußerst positiv.
Die Entwicklung dauerte ungefähr zwei Wochen. Das mag zunächst viel erscheinen, aber ein großer Teil der Zeit ging dafür drauf, Anforderungen zu ändern, neue Ideen auszuprobieren und währenddessen zu lernen.
Am meisten überrascht hat mich, wie viele Dinge Codex selbstständig mitgedacht hat. Die KI entwarf ganze Bereiche der App – zum Beispiel das Adminpanel – und ergänzte oft Details, an die ich selbst nicht gedacht hätte.
Am Ende war nicht das Programmieren die größte Herausforderung, sondern die Integration und das Zusammenspiel verschiedener Dienste. Genau dort zeigte sich, dass KI die Entwicklung zwar massiv beschleunigt, man aber trotzdem Kontext verstehen und Entscheidungen treffen muss.
Rückblickend war das Projekt perfekt für den Einstieg ins Vibe Coding – nicht zu simpel, aber auch nicht übermäßig komplex. Bei größeren Projekten könnte es deutlich schwieriger werden.
Eines ist jedoch klar: KI-Modelle werden jeden Tag besser und machen Vibe Coding immer leistungsfähiger und zugänglicher.
Dieses Experiment hat mich von einer Sache überzeugt:
Es war noch nie so einfach, aus einer Idee ein echtes Produkt zu machen.
Trotzdem bleiben kritisches Denken, Kontextverständnis und ein grundlegendes Verständnis dessen, was man bauen möchte, wichtiger denn je.
