Vibe Coding Prototyping bedeutet: Du beschreibst in natürlicher Sprache, was ein Interface tun soll, und ein KI-Tool baut daraus eine greifbare, oft klickbare Anwendung. Für UX-Teams heißt das konkret: Der Weg von der Idee zum testbaren Prototyp schrumpft von Tagen auf Stunden. Genau das macht das Thema gerade so präsent, und genau das macht es auch gefährlich, wenn man es unreflektiert einsetzt.

Wir haben in den letzten Monaten mit mehreren Tools aus diesem Bereich gearbeitet, von kleinen internen Hilfsmitteln bis zu Interface-Nachbauten für Kundenprojekte. Dieser Artikel fasst zusammen, was dabei funktioniert hat, welche Tools wofür taugen, und wo wir an Grenzen gestoßen sind, die ein Prompt allein nicht löst.

Key Takeaways

• Vibe Coding für Prototyping bringt UX-Teams in Stunden von der Idee zum greifbaren, klickbaren Prototyp, nicht erst nach Tagen oder Sprints.

• Tools wie Lovable, Claude Code, Claude Design, Figma Make und Google AI Studio decken unterschiedliche Teile des Workflows ab, keines davon alle.

• KI-generierter Code enthält laut mehreren unabhängigen Studien überdurchschnittlich oft Sicherheitslücken, besonders bei öffentlich erreichbaren Anwendungen.

• Barrierefreiheit entsteht bei Vibe Coding nicht von allein. Wer sie nicht aktiv einfordert, bekommt sie in der Regel nicht.

• 1:1-Design-Treue, Wartbarkeit und Versionierung bleiben auch 2026 schwache Punkte von Vibe-Coding-Ergebnissen.

• Die größte Stärke liegt bei internen Tools und explorativen Prototypen ohne Produktionsanspruch.

• Ein Python-Framework wie Django als Unterbau kann das Sicherheitsrisiko bei sensibleren Prototypen deutlich verringern.

  
  

Was ist Vibe Coding, und warum setzen UX-Teams es gerade jetzt ein?

Der Begriff wurde Anfang 2025 geprägt und beschreibt eine Arbeitsweise, bei der man Funktionalität in natürlicher Sprache beschreibt, statt sie Zeile für Zeile zu programmieren. Für UX-Teams ist das relevant, weil die klassische Lücke zwischen Design und funktionsfähigem Prototyp kleiner wird. Ein Klick-Dummy aus Figma Design oder Axure RP simuliert Interaktion. Ein vibe-gecodeter Prototyp führt sie tatsächlich aus: Formulare prüfen Eingaben sofort, Filter sortieren echte Inhalte, und was Nutzer:innen eingeben, wird gespeichert und weiterverarbeitet.

Das verschiebt, was in einem Usability-Test überhaupt testbar ist. Statt „stell dir vor, dieser Button würde...“ kannst du zeigen, was der Button tatsächlich macht.

Welche Tools eignen sich für Vibe-Coding-Prototypen in der UX-Arbeit?

Die Tool-Landschaft ist unübersichtlich, aber ein paar Namen tauchen in UX-Projekten immer wieder auf.

Lovable und vergleichbare Prototyping-Agenten bauen aus Prompts, Screenshots oder Sketches funktionale Web-Anwendungen, oft inklusive Backend. Stark für schnelle Iteration, schwach bei Design-Treue zu einem bestehenden System.

Claude Code lässt sich mit Docker und Figma-Anbindung kombinieren und eignet sich für Prototypen, die näher an echten Entwicklungsstrukturen bleiben sollen. Wer schon Grundlagen in Softwarearchitektur mitbringt, kommt hier weiter als mit reinen No-Code-Generatoren.

Claude Design zielt auf das Interface-Design selbst, nützlich für schnelle visuelle Exploration.

Figma Make, ist Figmas eigene Antwort auf die Vibe-Coding-Bewegung. Der Clou: Das Tool liest bestehende Styles, Komponenten-Sets und Design-Tokens direkt aus dem Figma-Projekt. Wer also schon ein gepflegtes Design-System hat, bekommt damit tendenziell konsistentere Ergebnisse als mit einem Tool, das bei null anfängt.

Gemini beziehungsweise Google AI Studio rundet das Feld ab, besonders wenn ein Projekt ohnehin im Google-Ökosystem verankert ist.

Kein Tool deckt alles ab. Die erfahreneren Teams kombinieren meist zwei: einen Prototyping-Generator für die schnelle Iteration und ein Tool mit mehr Kontrolle für alles, was länger leben soll als eine Testsession.

Wofür ist Vibe Coding in der UX-Praxis wirklich stark?

Der klare Fokus liegt auf dem Frontend. (Semi-)funktionale Prototypen, schnelle Iterationsschleifen, interne Tools, bei denen niemand eine hohe Code-Qualität erwartet. Genau hier liegt der Kern des Nutzens.

Der Unterschied zu früheren Methoden ist vor allem die Geschwindigkeit, mit der sich Änderungen umsetzen lassen. Ein Feedback aus dem Usability-Test lässt sich oft noch in derselben Sitzung einbauen und erneut testen. Das verändert, wie iterativ ein Prototyping-Prozess tatsächlich sein kann.

Gleichzeitig gilt: Die Ergebnisse treffen oft genau den Punkt, den wir intern „das 80 %-Problem“ nennen. Ein Vibe-Coding-Tool liefert zuverlässig ein Interface, das zu 80 % das ist, was man eigentlich braucht. Die restlichen 20 % sind nicht zufällig verteilt. Sie konzentrieren sich genau dort, wo UX-Expertise bisher den Unterschied gemacht hat: Edge Cases, Fehlerzustände, Barrierefreiheit, saubere Informationsarchitektur unter Last.

Wo hört der Nutzen auf? Die Grenzen von KI-generierten Prototypen

1:1-Design-Umsetzung

Wer ein bestehendes Design-System pixelgenau nachbilden will, stößt schnell an Grenzen. KI-Tools interpretieren Screenshots oder Beschreibungen, sie kopieren sie nicht. Abweichungen bei Abständen, Schriftgrößen oder Zuständen sind der Normalfall, nicht die Ausnahme. Figma Make mildert das etwas ab, weil es direkt auf ein bestehendes Komponenten-System zugreifen kann. Verschwunden ist das Problem damit nicht.

Sicherheitsrelevante Anwendungen

Hier wird es konkret unangenehm. Die Cloud Security Alliance hat im März 2026 eine Research Note veröffentlicht, die mehrere unabhängige Studien zusammenfasst. Eine Analyse von Tenzai testete Ende 2025 fünf gängige AI-Coding-Tools, darunter Claude Code, Cursor und Replit, anhand von 15 identisch gebauten Testanwendungen. Ergebnis: 69 Sicherheitslücken insgesamt. Keine einzige der 15 Anwendungen hatte CSRF-Schutz, keine setzte Security Headers, und alle 15 wiesen SSRF-Schwachstellen auf.

Grundsätzlich unsicher ist Vibe Coding deshalb nicht. Ein Prototyp, der ungeprüft in Richtung Produktivsystem wandert, trägt aber ein reales Risiko.

Öffentliche Anwendungen

Was intern als Hilfstool läuft, verträgt andere Standards als etwas, das im offenen Netz steht. Zugriffskontrollen, Datenschutz, Lastverhalten, all das muss ein ungeprüfter Vibe-Coding-Prototyp in der Regel nachträglich lernen.

Wartbarkeit und Versionierung

Ein KI-generiertes Projekt wächst oft organisch durch Prompt für Prompt. Das Ergebnis ist selten eine Codebasis, die ein zweites Entwicklerteam ohne Weiteres übernehmen kann. Für einen Prototyp, der nach dem Test wieder in der Schublade verschwindet, ist das kein Problem. Für etwas, das weiterleben soll, schon.

Barrierefreiheit

Ein Punkt, der in den meisten Vibe-Coding-Diskussionen fehlt, für UX-Teams aber naheliegend sein sollte: KI-generierter Code berücksichtigt Barrierefreiheit nicht automatisch. Tastaturnavigation, Screenreader-Kompatibilität, ausreichende Kontraste, all das entsteht nur, wenn es explizit eingefordert wird, nicht als Standardverhalten der Tools. Wer einen Vibe-Coding-Prototyp testet oder gar weiterverwendet, sollte Barrierefreiheit aktiv in den Prompt und in die Prüfung aufnehmen, nicht als nachträglichen Fix.

Wie sehen Vibe-Coding-Projekte in der UX-Praxis konkret aus?

Vier Beispiele aus eigenen Projekten zeigen die Bandbreite.

Eine Stroop-App zur Messung von Fahrer-Ablenkung entstand als native Android-App in Kotlin, gebaut mit Gemini. Ein klar abgegrenztes, internes Forschungstool ohne Produktionsanspruch.

Der UXA Quality Monitor, ein Python-Tool zur internen Qualitätssicherung, wurde mit Claude Code umgesetzt. Auch hier: intern, überschaubarer Nutzerkreis, geringes Risiko.

Deutlich näher am Produktionsfall liegt der Nachbau eines Automotive-Interfaces aus Fotos: Ein bestehendes Fahrzeug-Interface wurde anhand von Bildmaterial mit Claude als funktionaler Prototyp rekonstruiert, um es testbar zu machen, ohne auf das Original-Entwicklungsteam zu warten.

Ähnlich lag der Fall bei einem Buchungsflow für einen Fahrzeugwechsel, der aus PDF-Dokumenten heraus als klickbarer Prototyp gebaut wurde, um einen bestehenden Prozess vor der eigentlichen Entwicklung testbar zu machen.

Die beiden letzten Beispiele zeigen den eigentlichen Mehrwert: Prototypen, die sonst Wochen gebraucht hätten, bevor man überhaupt mit echten Nutzer:innen testen konnte, standen in deutlich kürzerer Zeit.

Wie baust du mehr Sicherheit in Vibe-Coding-Prototypen ein?

Zwei Learnings aus der eigenen Praxis haben sich bewährt.

Erstens: Ein etabliertes Python-Framework wie Django als Unterbau einzubinden, statt alles vom KI-Tool frei generieren zu lassen, reduziert die Angriffsfläche spürbar. Man verzichtet damit auf einen Teil der Geschwindigkeit, gewinnt aber ein Stück der Kontrolle zurück, die bei reinem Vibe Coding fehlt.

Zweitens: Debugging als eigenen, bewussten Schritt einplanen, nicht als Nebeneffekt des nächsten Prompts. Wer Fehler nur durch „mach das nochmal, aber richtig“ beheben lässt, verliert das Verständnis dafür, was im Code eigentlich passiert. Genau dieses Verständnis braucht man aber, sobald ein Prototyp mehr werden soll als ein Wegwerf-Experiment.

Fazit

Hinter Vibe Coding für Prototyping steckt mehr als ein Hype. Es verändert spürbar, wie schnell UX-Teams von einer Idee zu etwas Greifbarem kommen, und das ist für die Qualität von Research-Prozessen ein echter Gewinn. Der Nutzen hat aber einen klare Grenzen: Sicherheit, Barrierefreiheit, Wartbarkeit und Design-Treue entstehen nicht von selbst, nur weil ein Tool schnell ist. Wer diese Grenzen kennt, kann Vibe Coding gezielt für das einsetzen, wofür es wirklich gut ist, und weiß, wann ein klassisches Entwicklungsteam übernehmen muss.

Im Workshop „AI-Strategie für UX-Teams“ zeigen wir, wie Teams solche Tools strukturiert in bestehende Prozesse einbauen, ohne genau diese Grenzen zu übersehen.

FAQ

Ersetzt Vibe Coding klassische Prototyping-Tools wie Figma Design oder Axure?

Nein, es ergänzt sie. Figma Design bleibt stark für visuelles Design und schnelle Klick-Dummys. Vibe Coding kommt ins Spiel, sobald echte Interaktion und echte Daten gebraucht werden.

Kann man mit Vibe Coding produktionsreifen Code schreiben?

Grundsätzlich ja, in der Praxis braucht das aber zusätzliche Schritte: Security-Review, Einbindung etablierter Frameworks, Accessibility-Prüfung. Ungeprüft in Produktion zu gehen, ist laut mehreren Sicherheitsstudien ein reales Risiko.

Welches Tool ist am besten für UX-Prototypen geeignet?

Das hängt vom Ausgangspunkt ab. Mit einem gepflegten Design-System eignet sich Figma Make gut, weil es bestehende Komponenten nutzt. Für freiere Exploration sind Lovable oder Claude Code oft passender.

Braucht man Programmierkenntnisse für Vibe Coding?

Nicht zwingend für den Einstieg. Für alles, was über einen Wegwerf-Prototyp hinausgeht, hilft Grundverständnis von Code aber deutlich, besonders beim Debugging und bei der Einschätzung von Sicherheitsrisiken.

Ist Vibe Coding sicher genug für Produktivsysteme?

Nicht ohne zusätzliche Absicherung. Die von der Cloud Security Alliance zusammengefassten Studien fanden in ungeprüftem, KI-generiertem Code zahlreiche Sicherheitslücken, etwa fehlenden CSRF-Schutz und fehlende Security Headers.