CityHost.UA
Hilfe und Unterstützung

Vibe Coding: wie man Websites und intelligente Widgets mit KI ohne Programmierkenntnisse erstellt

 1209
27.03.2026
article

 

 

Im Jahr 2026 ist es bereits schwer vorstellbar, seinen Tag ohne künstliche Intelligenz zu verbringen, die dabei hilft, Rezepte aus dem, was im Kühlschrank ist, zu generieren, Bücher und Filme zu suchen, Daten zu analysieren und Inhalte zu erstellen. Und es schien, als wäre es unmöglich, etwas Neues zu erfinden. Doch dann führte der Mitbegründer von OpenAI und ehemalige KI-Direktor bei Tesla, Andrej Karpathy, einen neuen Programmierstil ein: Vibe Coding — die Entwicklung von Programmen auf der Grundlage der Interaktion mit KI, ohne Code zu schreiben. 

Es entsteht eine Art Magie — man muss nicht mehr jahrelang HTML, CSS, JavaScript und PHP lernen, stundenlang Code schreiben und dann stundenlang nach den Gründen suchen, warum er nicht funktioniert, oder Zehntausende von Hrywnja an Entwickler zahlen… In der Praxis ist es jedoch alles etwas komplizierter. Und ich habe das selbst erfahren, als ich beschloss, Vibe Coding zu nutzen, um neue Websites zu erstellen und bestehende zu verbessern.

Einen günstigen dedizierten Server für Vibe Coding-Projekte kaufen

Paradigmenwechsel: Vom Schreiben von Syntax zum Management des Ideenflusses

Um den Effekt des Vibe Codings besser zu verstehen, gehen wir zurück ins Jahr 1991, als Tim Berners-Lee die erste Website der Geschichte in reinem HTML veröffentlichte. Im Laufe der Jahre musste man HTML lernen, dann CSS, und nach 1995 auch JavaScript, um Interaktivität hinzuzufügen. Im Jahr 2003 erschien WordPress, gefolgt von anderen CMS, die die Spielregeln änderten: Die Notwendigkeit, sich mit Code auszukennen, verschwand fast, aber es entstand eine andere technische Komplexität in Bezug auf das Lernen von Content-Management-Systemen. Währenddessen entwickelten sich Web-Builder, die jedoch deutlich weniger Funktionalität boten.

Und so eröffnete das Ende des Jahres 2024 eine neue Ära in der Entwicklung von Webanwendungen. Zu diesem Zeitpunkt hatten Sprachmodelle ein Niveau erreicht, bei dem sie nicht nur Codefragmente, sondern ganze funktionierende Anwendungen generieren konnten. Zudem begannen neue und bestehende KI-Agenten für die Anwendungsentwicklung, aktiver zu werden, darunter Bolt.new, Lovable und Base44. Ein logischer Entwicklungsschritt war der Post von Andrej Karpathy im Februar 2025, in dem er den Begriff Vibe Coding populär machte.

Post von Andrej Karpathy über Vibe Coding

Von der offiziellen Seite auf Twitter: «Es gibt eine neue Art des Codierens, die ich «Vibe Coding» nenne, bei der Sie sich vollständig den Vibes hingeben, die exponentielle Komponente annehmen und vergessen, dass Code überhaupt existiert.»

Was ist Vibe Coding in einfachen Worten?
Vibe Coding — das ist ein Ansatz zur Softwareentwicklung, bei dem Sie beschreiben, was Sie wollen, in einfacher Sprache, und KI-Tools generieren den funktionierenden Code. Im Vibe Coding-Modell sitzt die Person nicht und schreibt den Code von Grund auf, sondern formuliert die Absicht, überprüft die Funktionalität des von der künstlichen Intelligenz erstellten Produkts und weist auf Fehler hin, die die KI selbst behebt.

Vibe Coding hat das Paradigma verändert: Die gefragteste Programmiersprache ist jetzt nicht Python oder PHP, sondern die menschliche Sprache. Dieses Konzept beseitigt die Notwendigkeit, jahrelang zu lernen, wie man Code schreibt, Wochen damit zu verbringen, ihn zu schreiben, und Stunden damit, nach Fehlern zu suchen und sie zu beheben. Und die statistischen Daten bestätigen diese Veränderungen. Zum Beispiel wird in Berichten von Y Combinator angegeben, dass etwa 25% der Startups auf KI setzen, um 95% ihres Codebestands zu generieren. Auch die Google Corporation hat bestätigt, dass etwa 25% des gesamten neuen Codes im Unternehmen automatisch generiert werden. Das Collins English Dictionary hat sogar «Vibe Coding» zum Wort des Jahres 2025 erklärt, was seinen Einfluss nicht nur auf die technische Gemeinschaft, sondern auch auf die Massenkultur unterstreicht.

Lesen Sie auch: Triumph und Bedrohungen der künstlichen Intelligenz — wie neuronale Netzwerke unser Leben beeinflussen und wie sie gesetzlich reguliert werden

Wie man Software mit Vibe Coding erstellt

Der Entwicklungsprozess nach der Vibe-Coding-Methodik ähnelt einem Gespräch mit einem erfahrenen Freiberufler oder einer Agentur. Stellen Sie sich vor, Sie möchten eine persönliche Website für Ihre Dienstleistungen als SEO-Spezialist erstellen. Sie suchen einen Entwickler, erklären ihm die Idee, geben Beispiele und warten auf das Ergebnis. Dann zeigt der Spezialist die Website, und Sie testen und sagen, was Ihnen gefällt und wo etwas geändert werden muss. Und so bringt der Entwickler jedes Mal Änderungen ein, bis Sie zufrieden sind. Am Ende bleibt nur noch, ein günstiges, zuverlässiges Hosting zu registrieren, eine Domain zu kaufen und eine Admin-Oberfläche zur Website hinzuzufügen, damit Sie später bequem selbst Änderungen vornehmen und Inhalte veröffentlichen können.

Nach einem ähnlichen Prinzip funktioniert Vibe Coding:

  1. Ideenbeschreibung. Sie müssen keinen Code oder ein Pflichtenheft auf zehn Seiten schreiben — erzählen Sie einfach, was Sie wollen. Zum Beispiel: «Mach mir eine Portfolio-Website mit dunklem Thema, einem Kontaktformular und einer Galerie meiner Arbeiten».
  2. Arbeiten der KI. Der autonome Agent beginnt zu arbeiten, aber er schreibt nicht einfach Code, sondern steuert die gesamte Umgebung: Er erstellt die Ordner- und Dateistruktur, wählt den Technologie-Stack aus, schreibt die Logik in modularen Teilen und entwirft die Datenbank.
  3. Testen. Sie erhalten nicht nur Code, sondern eine fertige Website. Es bleibt nur noch, das Scrollen, die Schaltflächen, die Arbeitsseiten, das Kontaktformular usw. zu überprüfen.
  4. Änderungen vornehmen. Wenn Ihnen etwas nicht gefällt, schreiben Sie das im Chat. Zum Beispiel: «Ändere die Schriftart» oder «Behebe die Senden-Schaltfläche».
  5. Ergebnis erhalten. Dieser Zyklus — beschreiben, generieren, testen, präzisieren — wiederholt sich, bis das Ergebnis Ihren Erwartungen entspricht. Sobald alles gut ist, nehmen Sie das Projekt und beginnen, es zu nutzen.

Ein zentraler Aspekt von Vibe Coding  — Sie bewerten das Ergebnis durch Funktionalitätstests und nicht durch das Lesen von Code. Dabei funktioniert alles im Hintergrund über große Sprachmodelle (Claude, GPT, Gemini), die auf Milliarden von Codezeilen trainiert wurden. Sie verstehen nicht nur die Syntax, sondern auch die Architektur von Software, Designmuster und können sogar Sicherheitsanfälligkeiten vorhersagen. Und das beseitigt praktisch die Notwendigkeit, sich mit Programmierung auszukennen. Selbst Andrej Karpathy hat angemerkt, dass er oft nicht auf die Änderungen schaut, die die künstliche Intelligenz vornimmt, sondern dem System voll und ganz vertraut. Wenn es Fehler gibt, kopiert er einfach die Fehlermeldungen zurück in den Chat, damit die KI alles selbst behebt.

Welche Arten von Vibe Coding gibt es?
Vibe Coding wird in zwei Ansätze unterteilt. Pure Vibe Coding — das ist die vollständige Delegation der Softwareentwicklung an die künstliche Intelligenz ohne ständige Überprüfungen und Änderungen. Das Gegenteil davon ist Responsible AI-assisted Development — das ist die Übertragung des Prozesses zur Erstellung von Webanwendungen an die KI unter Beibehaltung der Kontrolle, d.h. ständige Überprüfung des Programms, selbstständiges Testen, Änderungen vornehmen und Fehler beheben.

Ein wichtiger Bestandteil des Ökosystems ist das Konzept von Vibe Deploy — das Starten einer Anwendung in einer Live-Produktionsumgebung mit einem Klick oder einem Textprompt. Der Prozess erfolgt sofort, im Gegensatz zu traditionellem DevOps, wo man Stunden mit der Einrichtung von CI/CD-Pipelines, Serverinfrastruktur und Sicherheitszertifikaten verbringen muss.

Welche Vibe Coding-Tools für Anfänger und Profis existieren

Wenn Sie eigene Software möchten, müssen Sie zunächst herausfinden, wer sie für Sie erstellen kann. Wenn es in der klassischen Entwicklung ein Freiberufler oder eine Agentur sein kann, sind es im Vibe Coding spezielle Plattformen mit allen notwendigen Funktionen. Und hier teilen sich die Systeme in zwei Typen: Full-Stack-Builder (Sie beschreiben die Idee, und die künstliche Intelligenz erstellt das Frontend, Backend, die Datenbank usw.) und KI-Editoren (Sie arbeiten mit dem Code, aber die KI hilft Ihnen, ihn schneller zu schreiben).

Vergleichstabelle der Vibe Coding-Tools

Plattform Typ Für wen Kostenlose Version Bezahlte Version
Lovable Full-Stack Für diejenigen, die eine Webanwendung von Grund auf mit dem besten UI erstellen möchten 5 tägliche Credits. Ab 25$.
Bolt.new Full-Stack Wenn Sie vollständige Webanwendungen direkt im Browser ohne lokale Installationen erstellen möchten. 300.000 Token pro Tag, 1 Million Token pro Monat. Ab 25$
Base44 Full-Stack Für diejenigen, die Webanwendungen ohne Programmierkenntnisse und mit minimalen Anpassungen erstellen möchten. Tägliches Limit von 5 Nachrichten und monatliches Limit von 25 Nachrichten insgesamt. Ab 20$
Replit Full-Stack Wenn Sie komplexe Software ohne Code erstellen möchten. Kostenlose tägliche Credits für Agenten und KI-Integration. Ab 20$
Cursor KI-Editor Wenn Sie keinen vollständigen Anwendungs-Generator, sondern Hilfe beim Schreiben von Code für Projekte jeder Größe benötigen. Individual Hobby-Plan mit einer begrenzten Anzahl von Anfragen an den Agenten. Ab 20$
Vercel v0 KI-Editor Wenn Sie Hilfe beim Schreiben von Code für Website-Elemente, Landing Pages, Plugins usw. benötigen. 5 Credits pro Tag. Ab 20$

Zu den besten Vibe Coding Full-Stack-Systemen im Jahr 2026 gehören:

  • Lovable — das ist Vibe Coding mit Fokus auf visuelle Gestaltung, also die Generierung einer schönen, modernen Benutzeroberfläche und fertigem Code aus einer einzigen Textbeschreibung. Das System unterstützt die Anbindung an Supabase (Datenbank), Stripe (Zahlungen; nützlich, wenn Sie im Ausland leben, da es in der Ukraine nicht unterstützt wird), GitHub (Code-Speicherung). Ideal für Landing Pages, Portfolios, Prototypen von SaaS, MVPs für Startups, mobile Anwendungen mit ästhetischem UI.
  • Bolt.new — das ist eine der ersten und technologisch fortschrittlichsten Plattformen, die eine vollständige Entwicklungsumgebung direkt in Ihrem Browser mit der WebContainers-Technologie bereitstellt. Sie geben einfach einen klaren Prompt ein, und Bolt.new erstellt die Ordnerstruktur, installiert die benötigten Bibliotheken und startet die Anwendung in einem Vorschaufenster. Es unterstützt beliebte Frameworks (React, Vue, Svelte, Next.js), kann Fehler automatisch über das Terminal beheben und ermöglicht den Export des gesamten generierten Codes in einer Archivdatei. Diese Funktionalität reicht aus, um Webanwendungen unterschiedlicher Komplexität von Grund auf zu entwickeln, SaaS, Datenbanktools und Autorisierungen, mobile Anwendungen mit API-Integrationen.
  • Base44 — das ist das beste Vibe Coding-Tool für die schnelle Generierung von Full-Stack-Anwendungen. Es spiegelt das Prinzip des Clear Vibe Coding perfekt wider: Sie geben eine Beschreibung ein, und das System konfiguriert selbstständig das Frontend, Backend, die Datenbank und das Benutzermanagement. Im letzten Update im Februar 2026 hat das Team von Base44 die automatische Erstellung von Dokumentationen, die Veröffentlichung von Anwendungen im App Store und Play Store, den Planungsmodus und die Integration mit Gmail hinzugefügt.
  • Replit — das ist eine voll funktionsfähige Entwicklungsumgebung, in der der KI-Agent selbstständig planen, Code schreiben, Datenbanken erstellen und das fertige Produkt bereitstellen kann. Sie geben eine Aufgabe, und der Agent führt sie Schritt für Schritt aus: von der Erstellung von Tabellen in der Datenbank bis zur Serverkonfiguration. Die Plattform hat auch eine mobile App, falls Sie unterwegs Software erstellen möchten. Diese Funktionalität eröffnet den Zugang zur Entwicklung komplexer Anwendungen, Chatbots, Lernprojekten und automatisierten Geschäftssystemen.

Wenn Sie dennoch nicht vollständig der Entwicklung von Software an künstliche Intelligenz vertrauen möchten, aber den Prozess beschleunigen möchten, dann empfehle ich, sich die «intelligenten Assistenten» anzusehen. Zu den besten Vibe Coding KI-Editoren im Jahr 2026 gehören:

  • Cursor — ein KI-orientierter Code-Editor, der den Kontext Ihres gesamten Ordners mit Dateien versteht. Er ermöglicht das Schreiben, Bearbeiten und Beheben von Fehlern im Code auf Englisch direkt in der gewohnten Entwicklungsumgebung. Sie öffnen einfach den Ordner mit Ihrer Website, drücken Ctrl + I und geben an, was zu tun ist, zum Beispiel eine Funktion zur Website hinzuzufügen, woraufhin Cursor die Änderungen sofort in allen erforderlichen Dateien vornimmt. Er eignet sich für alle Projekte, einschließlich der Verbesserung bestehender Websites und der Entwicklung eigener Plugins.
  • Vercel v0 — das ist ein Tool zur Generierung von Benutzeroberflächen und sogar Full-Stack-Anwendungen aus englischen Hinweisen und Bildern. Nach Eingabe des Prompts erhalten Sie sauberen Code, den Sie für die weitere Arbeit außerhalb der Plattform kopieren oder auf Vercel bereitstellen können. Es eignet sich gut für Frontend-Entwickler mit React und Next.js, wenn die Entwicklung beschleunigt werden muss.

Jede angegebene Plattform bietet eine kostenlose Version an. Ihre Einschränkungen sind ausreichend für grundlegende Funktionstests, was vor der vollständigen Entwicklung Ihrer eigenen Software getan werden sollte.

Lesen Sie auch: Die besten KI-Dienste zur Erstellung von Inhalten: von Texten bis Bildern

Wie ich versuchte, Software mit Vibe Coding zu erstellen

Theoretisch scheint alles extrem einfach: Sie gehen auf den Dienst, registrieren sich, geben einen Prompt ein, erhalten eine fertige Seite, Website, Plugin, mobile Anwendung. Ich beschloss, dies zu überprüfen, also erstellte ich Projekte unterschiedlicher Komplexität. Alle wurden auf kostenlosen Tarifen ohne Programmierkenntnisse erstellt.

Persönliche Ein-Seiten-Website auf Bolt AI Builder

Registrierungsmethoden auf der Vibe Coding-Plattform Bolt newWir gehen zur Hauptseite von Bolt.new, klicken auf Get Started und melden uns über Google, GitHub oder E-Mail an. Ich wählte die schnelle und einfache Methode — Google-Konto.

Prompt zur Erstellung einer Landing Page auf Bolt AI Builder

Jetzt müssen wir einen Prompt ausdenken. Ich wollte versuchen, eine Ein-Seiten-Website für einen Friseur zu erstellen. Man könnte sofort detaillierte Aufgaben beschreiben, aber ich war neugierig, wie gut die künstliche Intelligenz meine Wünsche ohne klare Details verstehen würde.

Sofortige Erstellung einer Website auf der Vibe Coding-Plattform

In 3 Minuten und 35 Sekunden erstellte Bolt.new eine ziemlich schöne funktionale Ein-Seiten-Website gemäß meinem Prompt. Links sehen Sie die Projektbeschreibung, einschließlich der verwendeten Schriftarten und Farben. Beachten Sie das Banner «Made in Bolt» — die Einschränkung des kostenlosen Tarifs.

Erstellung eines interaktiven Buchungsformulars mit Vibe Coding

Im ersten Block kann man auf «Jetzt buchen» klicken, woraufhin der Benutzer automatisch zum Formular «Online-Buchung» weitergeleitet wird. Ein großer Vorteil ist das Formular zur Auswahl des Dienstes. Außerdem hat die Plattform, obwohl ich es nicht angegeben habe, die Möglichkeit geschaffen, Datum und Uhrzeit der Buchung anzugeben.

Automatische Generierung von Bewertungen für die Website auf Bolt new

Ich erwartete, dass es einfach leere Formulare für Bewertungen geben würde. Doch Bolt AI Builder ging weiter und erstellte von Grund auf 4 Bewertungen.

Änderungen an der Website vornehmen, ohne in den Code einzugreifen, mit Vibe Coding

Ich beschloss, einige Änderungen vorzunehmen: einen Kopfbereich zur Website hinzuzufügen und einen Block «Über uns» zu erstellen. Außerdem wollte ich das Buchungsformular funktionaler gestalten, indem ich ein Popup-Fenster hinzufügte und die Anfragen von potenziellen Kunden speicherte.

Beispiel für eine Codeänderung auf der Vibe Coding-Plattform Bolt AI Builder

Und in 1,5 Minuten nahm Bolt.new die von mir angegebenen Änderungen vor. Im Vergleich zur Erstellung und Bearbeitung von Websites auf Content-Management-Systemen hätte ich in dieser Zeit nur den Template-Editor öffnen können.

Beispiel für eine Datenbank auf der Vibe Coding-Plattform Bolt new

Ein wichtiger Punkt: Bolt AI Builder hat nicht nur die Nachricht «Danke für die Buchung» erstellt. Es hat tatsächlich sofort eine Datenbank entwickelt, in die Informationen über den Kunden automatisch hinzugefügt werden.

Vibe Coding-Plattform Bolt new gibt kostenlos 1 Million Token

Nach dem Neuladen der Seite musste ich drei Fragen beantworten, bevor ich eine funktionierende E-Mail hinzufügen konnte. Nichts Schwieriges oder Besonderes. Doch danach erhielt ich 1 Million zusätzliche Token.

Verfolgung von Token auf der Vibe Coding-Plattform Bolt new

Im Gegensatz zu klassischen Token, deren Anzahl am ersten Tag jedes Monats aktualisiert wird, bleiben die zusätzlichen Token für immer bei Ihnen.

Klassische Methode, um das Zip-Archiv des Projekts von Bolt AI Builder herunterzuladen

Jetzt die wichtigste Frage: Was soll ich damit machen? Die Landing Page muss natürlich noch bearbeitet werden, einschließlich der Hinzufügung von Bildern und der Verbesserung der mobilen Version. Aber dann muss ich sie irgendwie verwenden. Also klickte ich auf den Projektnamen, dann auf Export → Download, aber ich erhielt viele verschiedene Ordner und Dateien, die man nicht einfach auf das Hosting hochladen kann. Also musste ich Bolt.new zunächst den folgenden Prompt geben:

Ich möchte den Ordner dist für mein Hosting hochladen. Bitte packen Sie den Inhalt des Ordners dist in eine Datei mit dem Namen build.zip, damit ich sie in der Dateiliste sehen und herunterladen kann.

Wie man die Cloud-basierte integrierte Entwicklungsumgebung StackBlitz in Bolt new öffnet

Es wird eine Datei build.zip erstellen, in der sich der Ordner dist nur mit dem Ordner assets (Bilder, Schriftarten, Stile) und der Datei index.html befindet. Um sie herunterzuladen, klicken Sie auf den Projektnamen, wählen Sie Export → Open in StackBlitz.

Beispiel für die Entwicklungsumgebung StackBlitz auf der Vibe Coding-Plattform Bolt new

Jetzt wählen Sie in StackBlitz build.zip aus und klicken Sie auf Datei herunterladen. Jetzt können Sie den Inhalt des Archivs (Ordner dist) in den Ordner public_html auf dem Cityhost-Hosting über FTP oder den «Dateimanager» hochladen, damit Ihre Website funktioniert und öffentlich angezeigt wird.

Wichtig! Stellen Sie sicher, dass die Datei index.html direkt in public_html liegt und nicht in einem weiteren Unterordner (z.B. public_html/dist/index.html). Wenn sie in einem Unterordner ist — verschieben Sie einfach den Inhalt eine Ebene höher.

Es scheint alles gut zu sein, die Website funktioniert, aber es gibt Schwierigkeiten. Für jede Änderung auf der Website muss ich zurück zu Bolt.new gehen, die KI bitten, Änderungen vorzunehmen, erneut npm run build ausführen, das neue Archiv hochladen und die alten Dateien auf dem Hosting ersetzen.

Wie man sich mit GitHub auf Bolt new verbindet

Deshalb ist es besser, Bolt sofort mit Ihrem Repository auf GitHub zu verbinden. Dann werden jedes Mal, wenn Sie Änderungen an der Website über die KI vornehmen, diese automatisch über FTP an Ihr Hosting gesendet.

Lesen Sie auch: Wie man selbst eine Website mit Online-Kursen mit CMS erstellt

Dynamisches Widget für WordPress-Seite

Klassisches WordPress-Widget mit Umfrage ohne Vibe Coding

Vibe Coding ermöglicht es nicht nur, Websites von Grund auf zu erstellen, sondern auch bestehende zu verbessern. Ich habe eine englischsprachige Website über mobile Anwendungen auf WordPress, auf der ich das Plugin Quiz and Survey Master zur Erstellung von Umfragen und Tests verwende. Aber das Problem ist, dass ich beim Bearbeiten eines Artikels, z.B. «7 Beste Meditations-Apps», jede Umfrage manuell bearbeiten muss, da sich die Programme ändern. Außerdem dauert die Erstellung von Umfragen auch viel Zeit, da jeder Anwendung die erforderliche Punktzahl zugewiesen werden muss, um ein möglichst genaues Ergebnis zu erzielen.

Registrierungsmethoden auf der Vibe Coding-Plattform Lovable

Also lassen Sie uns versuchen, die QSM-Lösung durch ein Vibe Coding-Tool zu ersetzen. Dazu wählen wir die Plattform Lovable, die die beste Integration mit Datenbanken bietet. Wir gehen einfach zur Hauptseite, klicken auf Get started, und registrieren uns über Google, GitHub oder E-Mail.

Prompt zur Erstellung eines WordPress-Widgets mit Vibe Coding Lovable

Meine Website ist auf Englisch, also wird der Prompt auf Englisch sein. Ich werde Lovable bitten, die Daten auf der Seite automatisch zu analysieren, ein Quiz mit 5-8 Fragen basierend auf dem Inhalt des Artikels zu erstellen und die Antworten der Benutzer sowie die Ergebnisse in der Datenbank über Supabase zu speichern.

Ergebnis der Erstellung eines Widgets auf Lovable AI Builder

Ich erwartete Magie, also ein fertiges Widget in ein paar Minuten, aber ich erhielt nur eine Anleitung und irgendeinen Code. Aber keine Panik! Tools wie Lovable zeigen normalerweise eine Vorschau für vollständige React-Anwendungen, die sie auf ihrem virtuellen Server bereitstellen, aber ich habe eine HTML-Datei für die Einfügung in WordPress angefordert. Außerdem muss das Widget den Artikel analysieren und nur auf der Grundlage der erhaltenen Informationen ein Ergebnis generieren.

Verbindung des Vibe Coding-Projekts mit Supabase

Also musste ich zuerst zu Supabase gehen, mich registrieren und ein Projekt erstellen. Dann musste ich im SQL-Editor den Code ausführen, den Lovable gegeben hat.

Fehler des Widgets auf WordPress von Lovable

Dann ging ich auf die Website, fügte im benötigten Artikel das HTML-Widget hinzu und fügte den Code ein. Und ich erwartete ein schönes funktionales Widget, stattdessen erhielt ich ein schwarzes Rechteck. Ich begann, Gemini und Claude zu fragen, wo der Fehler liegen könnte. Sie änderten sogar den Code, aber das Widget funktionierte nicht, da das Skript vor dem Laden des Seiteninhalts ausgeführt wurde.

Fehlerbehebung im Vibe Coding-Projekt auf Lovable

Und natürlich bat ich um eine Fehlerbehebung bei dem, der das alles gemacht hat — Lovable. Auf dem kostenlosen Tarif erhielt ich 5 Credits (die monatlich aktualisiert werden), und nach der Generierung des Widgets hatte ich noch 2,30 Credits übrig. Als ich bat, das Widget zu überprüfen und die Fehler zu beheben, hatte ich noch 0,20 Credits übrig. Dabei funktionierte der neue Code der künstlichen Intelligenz ebenfalls nicht.

Fertiges Widget für die WordPress-Website auf Vercel V0

Ich war neugierig, ob ich die Aufgabe falsch stelle oder ob sie zu kompliziert ist. Ich beschloss, Vercel v0 auszuprobieren, wo man sich ebenfalls über Google registrieren kann und 5 kostenlose Credits erhält. 

Fehler im Widget auf der Website von V0 Vercel

Ich gab ihm die gleiche Aufgabe, und nach etwa 5 Minuten erhielt ich ein Widget, das bereits angezeigt wird, aber auch nicht funktioniert.

Kostenloses Widget für die Website mit Vibe Coding Claude

Man könnte jetzt aufgeben, aber wir haben Claude kostenlos. Ich bat ihn, ein solches Widget zu erstellen, und er machte es sofort. Es gab keine Fehler in der technischen Umsetzung.

Kostenloses Widget für WordPress von Claude

Das Einzige — das Design muss verbessert werden. Aber technisch funktioniert alles. Es werden sogar automatisch Links zu den App-Stores und eine vollständige Übersicht des Artikels auf meiner Website hinzugefügt. Und alles funktioniert schnell und bequem, ohne die Seite neu zu laden.

Sie könnten sagen: «Man müsste die Konsole überprüfen, Fehler finden und die KI bitten, sie zu beheben». Und ich fand das Problem in der Konsole und könnte Zeit damit verbringen, es durch Code zu beheben. Aber die Essenz liegt nicht einmal darin, dass das Widget nicht funktioniert. Die zentrale Idee des Vibe Codings — die einfache Entwicklung von Webanwendungen ohne Code. Ich, wie die meisten, die zum ersten Mal die Vibe Coding-Plattformen testen, erwartete, dass ich eine Aufgabe gebe, ein Ergebnis erhalte und alles funktioniert. Aber alles stellte sich als viel komplizierter heraus.

Beispiel für einen Google AdSense-Einkommensrechner mit Gemini Vibe Coding

Dann stellt sich eine andere Frage: Warum so komplexe Aufgaben gerade zur Demonstration der Möglichkeiten von Vibe Coding stellen? Ich hätte auch einfach fertige Vorlagen von Bolt.new und V0 Vercel nehmen oder eine einfache Webanwendung entwickeln können. Zum Beispiel einen Rechner zur Berechnung von Einnahmen bei Google AdSense, den ich mit Gemini erstellt habe. Aber das Problem ist, dass viele Blogger solche einfachen Tools oder fertige Vorlagen zeigen und sagen, wie unglaublich Vibe Coding ist. Wenn es jedoch darum geht, etwas auf einer bestehenden Website mit eigenen technischen Besonderheiten zu ändern, wird alles viel komplizierter.

Lohnt es sich, Vibe Coding für Webanwendungen zu verwenden?

Bei der Verwendung von Vibe Coding-Tools habe ich tatsächlich den «Wow-Effekt» gespürt, von dem Andrej Karpathy sprach. Obwohl die Landing Page für den Friseursalon noch verbessert werden muss, ist die Tatsache, dass ich eine Website in 3,5 Minuten entwickelt habe, beeindruckend. Ebenso wie die Möglichkeit, schwere Plugins zur Hinzufügung von Interaktivität auf der WordPress-Website loszuwerden: es war langwierig und mühsam, verschiedene Plattformen zu testen, aber der Prozess und das Ergebnis mit Claude sind beeindruckend.

Andrej Karpathy sagt, dass wir endlich den Code vergessen können und Projekte jeder Komplexität ohne Programmierkenntnisse erstellen können. Und ich habe tatsächlich nicht auf den Code geschaut, für eine Weile ganz vergessen. Aber genau hier entstehen die nächsten Risiken des Vibe Codings:

  • Technische Schulden. Künstliche Intelligenz gibt Code aus, der «hier und jetzt» funktioniert, aber oft Funktionen dupliziert, anstatt Bibliotheken zu erstellen. Eine Studie von Agile Alliance zeigt, dass die KI-Generierung zu einer zehnfachen Zunahme von dupliziertem Code und technischen Schulden führt.
  • Risiko von Bugs. Ich habe die Effektivität von Vibe Coding an einfachen Projekten demonstriert, aber stellen Sie sich vor, Sie müssen einen großen Marktplatz, ein komplexes CRM oder ein ERP-System erstellen. Und je größer das Projekt wird, desto schneller beginnt die KI zu buggen und vergisst frühere architektonische Entscheidungen.
  • Sicherheit. Laut Veracode enthalten bis zu 45% des KI-generierten Codes Schwachstellen. Für eine so einfache Landing Page oder ein Widget ist das nicht kritisch, aber für ein System mit Zahlungen oder persönlichen Daten ist es zu riskant.

Und noch ein wichtiger Punkt, den man oft vergisst — Vibe Coding muss genauso gelernt werden wie die gleichen Content-Management-Systeme, und das gewünschte Ergebnis erfordert ständige Anpassungen. Es ist keine übernatürliche Technologie, bei der Sie an die Website, den Dienst oder die mobile Anwendung Ihrer Träume denken und nach einer Minute ein vollständig funktionierendes Projekt erhalten. Sie müssen ständig das Ergebnis analysieren und angeben, was geändert werden soll.

Also ist Vibe Coding tatsächlich ein effektiver Weg, um sofort ein MVP, eine Landing Page für Werbung, ein benutzerdefiniertes Widget zu erstellen. Sie können sogar Websites, Online-Shops und mobile Anwendungen entwickeln, aber Sie müssen die Arbeit der künstlichen Intelligenz überwachen, sich mit Code auskennen und das Ergebnis testen. Für komplexe Projekte, insbesondere mit Informationen über Kunden und Zahlungsdaten, ist es jedoch besser, entweder fertige Lösungen (CMS, SaaS-Plattformen) zu verwenden oder professionelle Entwickler zu Rate zu ziehen.

Schnelle Domain-Suche für Vibe Coding-Projekte

Hat Ihnen der Artikel gefallen? Erzählen Sie Ihren Freunden davon:
Author: Serhii Kuklin

Copywriter mit 10 Jahren Erfahrung. Er spezialisiert sich auf die Erstellung, technische Einrichtung und SEO-Optimierung von Websites. In seinen Artikeln teilt er Praxiserfahrungen und Lösungen, die er persönlich in der Arbeit geprüft hat.