AI Design Workflows · 2026 Guide

Was ist Vibe Design?

Dhairya Purohit

Führt Ekyon, Mitgründer von Contemy. Baut dMaya. Schreibt über AI-Design-Workflows, weil er sie jede Woche in echter Kundenarbeit ausliefert.

Published April 25, 2026

Vibe Design kam 2026 als Begriff in den Fokus. Google Stitch bekam am 19. März ein großes Update, das Figmas Aktie an einem Tag 8 % verlieren ließ. Anthropic startete Claude Design kurz danach. Die AI-native-Design-Kategorie hörte auf, ein Gerücht zu sein, und wurde zur Kaufentscheidung.

Der Begriff wurde aber lose verwendet. Dieser Post zieht eine klarere Linie. Was Vibe Design ist. Was es nicht ist. Wie eine echte Session abläuft. Und wo es das falsche Werkzeug ist.

Was Vibe Design ist

Du öffnest ein Projekt, beschreibst auf Deutsch, was du willst, und eine Canvas füllt sich mit einem echten UI-Design. Kein Wireframe. Kein einzelnes statisches Bild. Ein Layout mit Typografie, Farben, Abständen, Komponenten und responsivem Verhalten, zusammengehalten von einem Design-System, das über jeden weiteren Screen konsistent bleibt.

Von da iterierst du im Gespräch. Palette ändern. Hero straffen. Mobile-Variante hinzufügen. Sidebar gegen Top-Nav tauschen. Es ist ein Gespräch mit einer Canvas, keine Toolbar und kein Manual.

Wenn das Design steht, teilst du einen Preview-Link. Ein Kunde oder Kollege öffnet ihn im Browser ohne Account, hinterlässt einen Kommentar, du iterierst. Wenn das Design abgenommen ist, exportierst du sauberen Code und übergibst an deinen Coding-Agent (Cursor oder Claude Code) zum Bauen in dem Framework, in dem ihr ausliefert.

Was Vibe Design nicht ist

Wie eine echte Vibe-Design-Session abläuft

Sechs Schritte in Reihenfolge. So ist es nach drei Monaten Arbeit mit echten Agenturprojekten in dMaya geworden.

1. 1. Beschreibe, was du brauchst. Ein Absatz reicht. Zielgruppe, Zweck, eine oder zwei Randbedingungen ("nimm ein Natur-Grün als eine der Farben").
2. 2. Canvas füllt sich. Erster Entwurf landet in 2-3 Minuten auf einem Mid-Tier-Modell. Komplettes Layout, kein exportiertes Einzelbild.
3. 3. Sieh der Generierung zu und reviewe. So sieht es in dMaya aus, auf Claude Opus 4.7:

4. 4. Iteriere im Chat. In dMaya kannst du auch das Modell pro Generierung wählen. Schneller und günstiger für Exploration, höhere Fidelity für den Screen, der in ein Kunden-Deck geht. Claude, GPT, Gemini und Open-Source-Optionen leben im gleichen Tool.
5. 5. Teile einen Preview-Link. Kunden öffnen ihn im Browser ohne Login, hinterlassen Kommentare inline.
6. 6. Exportiere sauberen Code. Nach Abnahme HTML exportieren und an Cursor oder Claude Code übergeben zur Konvertierung in React, Flutter, React Native oder deinen Stack.

Die tragende Idee: Design-Systeme per Default erzwungen

Hier die Behauptung, die die meisten Vibe-Design-Texte übersehen. Was Vibe Design für echte, multi-Screen-Projekte funktionieren lässt, ist, dass das Tool ein Design-System über jede Generierung hält. Gleiche Tokens. Gleiche Komponenten. Gleiche Abstandsskala. Jeder nachfolgende Screen muss innerhalb dieses Systems leben.

Das ist, was Vibe-Coding-Tools nicht garantieren können. Wenn Bolt oder Lovable deinen zweiten Screen bauen, trifft die KI eine frische Reihe visueller Entscheidungen. Bei Screen zwanzig sieht es aus, als hätten zwanzig verschiedene Leute gebaut.

Was das gegen die Alternativen macht

Wir haben den gleichen Prompt durch dMaya, Google Stitch und Claude Design an einem Nachmittag laufen lassen und Zeit, Kosten und Output erfasst. Zahlen: dMaya auf Opus 4.7 lieferte ein brauchbares Dashboard in etwa 2,5 Minuten. Claude Design auf dem gleichen Opus-Modell brauchte ca. 10 Minuten und verbrauchte ca. 20 % des wöchentlichen Claude-Limits in einer einzelnen Generierung. Google Stitch war schnell, aber der Output war nicht ausliefern-fähig. Komplette Analyse mit allen vier Videos im Same-Prompt-Vergleich.

Häufige Momente, in denen Leute zu Vibe Design greifen

Du musst nichts davon sein, um Vibe Design zu nutzen. Wenn du neu mit dem Begriff bist, wirst du dich wahrscheinlich bald in einem dieser Szenarien wiederfinden. Und falls nicht, funktioniert das Tool auch dann für dich. Nichts davon ist auf einen Jobtitel beschränkt.

• Der Live-Kunden-Call. Ein Agentur-PM, der den Call sonst hinausgezögert hat, während ein Designer im Hintergrund ein Mockup kocht, erzeugt jetzt den ersten Entwurf auf dem Bildschirm während des Calls und iteriert auf Feedback in der gleichen Stunde.
• Idee vor Engineering validieren. Ein Gründer, der das Produkt sehen und fühlen will, bevor er einen Entwickler einstellt oder Budget für eine Codebase ausgibt.
• Drei Richtungen in einem Nachmittag erkunden. Ein Product-Team, das normalerweise eine UI-Richtung wählt und hofft, erzeugt stattdessen drei und zeigt sie dem Team.
• Mehr Projekte pitchen, ohne Fidelity zu opfern. Ein Freelancer, der vorher nur ein Konzept pro Pitch schaffte, schickt jetzt drei polierte Mockups bis zum Ende des Tages.

Wann Vibe Design das falsche Werkzeug ist

• Brand-Arbeit, wo jeder Pixel eine handgefertigte Identität reflektieren muss.
• Sehr eigenständige Interaktionen (Custom-Gesten, ungewöhnliche Animationslogik, neuartige UI-Primitive).
• Print und physisches Material. Vibe-Design-Tools produzieren digitales UI.
• Projekte, deren Constraint nicht Geschwindigkeit ist.

Tools für Vibe Design

Drei Tools halten gerade die Kategorie. Wir haben den gleichen Prompt durch alle drei laufen lassen.

• dMaya. Prompt-first Canvas mit Design-System-Durchsetzung. Modellwahl pro Generierung (Claude, GPT, Gemini, Open Source). Gebaut für Agenturen und Teams, die iterieren.
• Google Stitch. Kostenlos in Google Labs, läuft auf Gemini (Flash oder Pro). Nützlich zur schnellen Exploration. Output ist für echte Kundenarbeit nicht brauchbar.
• Claude Design. Anthropics Vibe-Design-Feature, läuft auf Claude Opus. Guter Output, aber ca. 10 Minuten pro Generierung und ~20 % eines wöchentlichen Claude-Limits pro Lauf. Nicht praktisch zu iterieren.

Häufig gestellte Fragen