Revision 690: AI Frontend Generatoren
Hans und Schepp sprechen darüber, wie weit „Vibe-Coding“ im Vergleich zu AI-Assist in der IDE wirklich trägt. Hans bringt sein Experiment mit, dokumentiert im Blogpost, und wir ordnen ein, wo AI uns Tempo schenkt, wo wir kontrollieren und nachschärfen müssen und warum die Dead Framework Theory im Code-Output der Generatoren so sichtbar wird.
Schaunotizen
- [00:01:42] AI Code Generators Frontend Comparison
Als Testbett nutzt Hans wir eine kleine Reader-Web-App („Speak it“), die Webseiten- und PDF-Texte per Web-Speech-API vorliest. Dabei startet er jeweils mit einer kompakten Markdown-Featureliste und lässt daraus ein MVP bauen. Wir vergleichen anschließend, wie gut sich die Apps ausrollen lassen, wie sauber der Code ist und wie viel Nacharbeit bei Accessibility, Security, State-Management und Architektur nötig bleibt. Parallel diskutieren wir „AI-infused Coding“ in der IDE: Da hilft die AI beim Refactoring, beim Verstehen von Brownfield-Code und bei Fleißarbeit, während Vibe-Coding komplette Gerüste hinstellt – die Qualität steht und fällt aber mit Specs, Review und Tests.
Bei den Tools landet v0 vorne, vor allem wegen der sehr nahtlosen Integration in das Vercel-Ökosystem: Prompt rein, Code raus, Previews, Deploy, plus Plug-and-Play-Anbindung von Diensten wie Supabase für Auth und Daten und Stripe für Billing. Lovable wirkt stabil, setzt ebenfalls sinnvoll auf Supabase und punktet mit einem europäischen Setup. Replit überrascht mit einem Design-First-Flow, bei dem wir erst UI und Flows grob abstecken und danach generieren lassen. In der IDE-Ecke ist Cursor aktuell Hans’ Favorit, während GitHub Copilot sich mehr wie ein solider Pair-Programming-Assistent für Funktionen und kleine Refactors anfühlt. Claude Code glänzt im Reasoning, bleibt aber – wie alle – auf gute Prompts, klare Ziele und unseren Code-Review angewiesen. Base44 fällt für uns ab, weil Sichtbarkeit und Versionierung ohne größere Subscription eingeschränkt sind.
Im Code sehen wir überall das gleiche Muster: React beziehungsweise Next.js mit TypeScript und oft Tailwind. Das ist bequem, beschleunigt Onboarding und führt schnell zu ansehnlichen Ergebnissen, zementiert aber die Stack-Monokultur, die die Dead Framework Theory beschreibt. Spannend: v0 erzeugt im Vergleich recht kompakten, fokussierten Output, während andere Generatoren deutlich verboser werden – bei ähnlicher Feature-Abdeckung. Lighthouse-Werte sehen oft gut aus, verleiten aber zur falschen Sicherheit; wir finden typische A11y-Lücken wie fehlende Labels, suboptimale Focus-Flows und zu dezent deklarierte Namen. Unser Fazit bleibt: AI liefert Tempo und Gerüst, aber wir sichern Qualität mit Review, Tests, Monitoring und gezielten Verbesserungen.
Preislich bewegen sich viele Angebote um 20–25 Dollar im Monat. Für uns zählt, was wir dafür praktisch bekommen: gute Exporte, nachvollziehbare Diffs, belastbare Integrationen, EU-Hosting-Optionen und die Möglichkeit, bestehende Designsysteme einzubinden. Gerade im europäischen Kontext achten wir auf Datenstandorte und DSGVO-Konformität; mit Azure-gehosteten OpenAI-Modellen lässt sich beispielsweise vollständig in EU-Regionen arbeiten. Unterm Strich nutzen wir Vibe-Coding wie eine Welle: Wir lassen uns Scaffolding, CRUD-Wege und Settings-Screens generieren, steigen bei komplexen Stellen oder übertriebener Abstraktion selbst ein und wechseln dann wieder zurück zur AI, wenn es um Tempo und Variationen geht.
Zum Weiterlesen und Nachbauen: Hans’ vollständiger Vergleich steht im Blogpost. Die Tools aus der Folge findet ihr unter v0, Replit, Cursor, GitHub Copilot und Supabase; die Hintergründe zur Stack-Monokultur bündelt die Dead Framework Theory. Wir bleiben dran und schauen, wie sich Qualität, Kosten und Integrationen in den nächsten Monaten weiter entwickeln.