Anthropic’s Fable 5-Modell wird veröffentlicht, innerhalb weniger Tage verboten und feiert dann ein Comeback wie ein Phönix aus der Asche[1]. Und mit ihm lebt die Spekulieren über seine spektakuläre UI/UX und Frontend-Zauberei wieder auf. Ich habe also das One-Shotting mit Claude Design auf die Probe gestellt: Prompts gängiger App- und Website-Schnittstellen ausgeführt, viel referenzierte UIs remixed und die Frontend-Codequalität analysiert, um den Platz des Modells im Workflow eines Produktteams zu bewerten. Beurteile selbst anhand meiner Fable 5-UI-Beispiele.
Spoiler-Alarm: Im UI/UX-Game ist Fable 5 gegen Gemini 3.1 PRO und GPT 5.4 der absolute Endgegner.
Kostenlose Alternativen zu Claude Design >
Text-to-UI mit Fable 5
Minimalistische Meditations-App (Mobile)
Prompt
"Design a minimalist meditation app screen for mobile: Calm, breathing-space UI with soft gradients, one primary CTA to start a session, session length picker, and a streak tracker. Keep it clean, low-stimulation, mostly whitespace."
Design-Output
Benötigte Zeit: ~3 Minuten
Beim Prompten hatte ich das Calm-App-UI im Kopf. Aber Fable 5 hat es auf ein neues Level des Minimalismus gehoben. Trifft das Briefing fast perfekt — sanfte Verläufe, Atemkreis-CTA, Zeitvorwahl, Streak-Footer, alles da. Farb- und Typografieauswahl passen genau zur erwarteten Experience. Geht aber noch einen Schritt weiter und fügt eine leichte Animation hinzu. Hatte ich zwar nicht verlangt, nehme ich aber gerne mit.
Calm-App-UI mit KI ansehen & bearbeiten >
Maximalistisches SaaS-Dashboard (Desktop)
Prompt
"Design a busy fintech SaaS dashboard for desktop. Dense but organized — top nav, sidebar, KPI cards (revenue, active accounts, transaction volume, churn), a large revenue/cashflow chart, a recent transactions table, and a notifications/alerts panel. Data-heavy, multiple widgets, real enterprise-tool density."
Design-Output
Benötigte Zeit: ~8 Min.
Diesmal stellte mir Claude Design wie ein typischer KI-UI-Agent einige klärende Fragen, daher gilt der Disclaimer: Fable 5 hatte etwas Hilfe bei der kreativen Richtung.
Zum Output selbst: Es ist wirklich vollgepackt und riesig – vermutlich hat es deshalb so lange gedauert. Sieht ziemlich Corporate-like aus, ist aber clever kuratiert und wirkt nicht unaufgeräumt. Allerdings fielen mir ein paar Badges auf, deren Größe man an die Cards anpassen könnte. Das Modell hat zudem nicht jede meiner Vorgaben einzeln abgearbeitet, sondern sie stattdessen wie ein Designer mit Geschmack zu einem konsistenten Produkt zusammengeführt.
Fintech-App-UI von Banani AI ansehen & bearbeiten >
Multi-Screen Onboarding-Flow
Prompt
"Design a multi-screen onboarding flow for a dating app, mobile. Include: welcome/value-prop screen, photo upload, basic info (name, age, location), interests/prompts selection, and a final 'ready to swipe' screen. Bold, modern, high-energy."
Design-Output
Benötigte Zeit: ~5 Min.
Auch diesmal stellte Claude Design kreative Fragen, die ich für Fable 5 beantwortet habe – allerdings ganz bewusst, um es von der naheliegenden Intuition eines Tinder-ähnlichen UIs wegzulenken.
Der Multi-Screen-Prototyp sieht spannend aus und steckt voller spielerischer Mikro-Interaktionen. Alle Screens und Komponenten sind wie gewünscht vorhanden. Und die Farben, die Typografie, die Texte, der Flow, das Gesamtpaket – alles professionell umgesetzt. Wenn ich ein MVP für diese Dating-App bauen müsste, würde ich mir vielleicht nur noch KI-UX-Research-Tools für echtes User-Feedback holen und Fable 5 entsprechend redesigen lassen.
Auf extrem hohem Niveau meckert es sich am besten: Für den echten kreativen Kick hätte Fable 5 auf dem Homescreen ein Bild erstellen können und das Logo sollte eher ein Vektor als eine stilisierte Schriftart sein.
Screenshot-to-UI mit Fable 5
Eine Screenshot-to-UI KI wird genutzt, um bestehende Schnittstellen anzupassen. Da man in der Praxis meist auf Basis dieses Remixes neue Screens baut, wollte ich sehen, wie gut Fable 5 diese versteht, editiert und neu abmischt. Dafür habe ich Screenshots des Duolingo-UIs hochgeladen und verlangt, einen Screen für ein neues Feature hinzuzufügen und Bilder zu generieren – in zwei Schritten.
Prompt
“Step 1 — Nav bar icon swap:
Match this Duolingo screenshot's design system exactly. Replace the leaderboard/shield nav icon with a new 'Culture' icon — a simple globe or postcard, same line weight and style as the others. Keep everything else unchanged.
Step 2 — Feature screen:
Same design system. Design the 'Culture Cards' screen this icon opens — a scrolling feed of cards, each with a real photo (street, market, café, landmark) from a country that speaks the language, a short caption tying it to a vocab word, and a 'Practice this word' button. Keep Duolingo's card style and colors, but let the photo be the focus."
Design-Output
Benötigte Zeit: ~12 Min. (in zwei Anläufen)
Das Erste, was mir auffiel: kein Vektor, keine Bilder. Nicht gut. Fable 5 hat zwar die Konturen des Duolingo-Screens perfekt nachgebildet, den Screen für das neue Feature entworfen und instinktiv eine Farbpalette gewählt, die wie aus der Duo-Welt wirkt. Als ich jedoch darum bat, die fehlenden Details zu korrigieren, dauerte es noch einmal ~ 6 Minuten für Vektoren und Bilder. Interessanterweise schien das Modell die Bilder von Wikimedia Commons zu beziehen, statt sie selbst zu generieren. Die Vektoren kommen zwar nicht ganz an das Original-Duolingo-Design heran, aber solche Assets liefert man idealerweise ohnehin separat.
(*Hinweis: An diesem Punkt waren meine täglichen Claude-Credits aufgebraucht. Fable 5 zieht also ordentlich Leistung.)
Lohnt sich Figma Weave für das Generieren von UI-Assets? >
Design-System-Treue von Fable 5
Im Jahr 2026 ist Design MD das neue Design-Briefing. Um zu testen, wie konsequent sich Fable 5 an ein solches halten kann, habe ich die Airbnb-UI-Design-MD hochgeladen und gebeten, eine fiktive App namens ‘Deskbrb’ im selben Stil zu entwerfen.
Prompt
"Using the attached Airbnb design system/style guide as reference, design a mobile app called DeskBrB. It is an Airbnb-style marketplace for booking coworking desks and meeting rooms by the hour. 3 screens: Home/search feed (with filters and listing cards), Listing details (photos, amenities, pricing, availability), and Seller profile (ratings, reviews, verification badges — matching Airbnb's trust-signal patterns)."
Design-Output
Benötigte Zeit: ~5:30 Min.
Das hier war extrem spannend, weil das Modell eher wie ein analytischer PM auftrat statt wie ein verspielter Designer. Icons, Typografie und Abrundungen passten perfekt. Noch wichtiger: Das Layout und die Elemente saßen so exakt, dass man es glatt für das echte Airbnb-UI halten könnte. Fable 5’s Schwachpunkt bei der Bildgenerierung/-suche bestätigte sich zwar erneut, aber das UI/UX ist trotzdem fantastisch.
Kostenlose Design-System-Generatoren auf KI-Basis >
Frontend-Codequalität von Fable 5
Webdesign mit Claude Fable 5 ist nur die halbe Miete. Der Code-Export entscheidet über den echten Nutzen für Produktteams. Ich habe den Code für zwei der vorherigen Entwürfe gezogen: die Meditations-App (Standard HTML/CSS/JS) und DeskBrB (Modern React + Tailwind).
Meditations-App: HTML/CSS/JS in einer einzigen Datei
Kein Framework, alles inline. Semantisches Markup (Header, Footer, Main), eigene CSS-Properties für das Farbsystem, aria-pressed States beim Picker und Berücksichtigung von prefers-reduced-motion bei der Atem-Animation. Liest sich wie von einem Developer geschrieben, der Accessibility im Schlaf beherrscht.
DeskBrB-App: Komponenten-basiertes React + Tailwind
Hier fühlte es sich nicht mehr nach Design-Export an, sondern nach dem echten Repo eines kleinen Entwicklerteams. 18 Dateien. Saubere Komponentengrenzen — Button, StarRating, ListingCard, PhotoCarousel — alle wiederverwendbar und Props-gesteuert.
Die Tailwind-Konfiguration nutzt Airbnbs echte Design-Tokens (Rausch red, Ink-Skalen etc.), die direkt aus dem Design MD gezogen wurden. Es gab sogar eine README mit Vite-Setup-Schritten und Lizenzierungshinweis. Da die Airbnb-Schriftart Cereal geschützt ist, wurde automatisch auf Inter ausgewichen – sauber gelöst.
Analyse des Outputs
In beiden Beispielen überzeugt die Fable 5 Frontend-Codequalität unabhängig von Plattform oder Stack. Sie enthalten Barrierefreiheits-Attribute, eine semantische Struktur und einheitliche Design-Tokens, die keine Einzelfälle sind. Auch die Designtreue wird sauber übersetzt. Das ist extrem nah an echtem Entwickler-Handoff und macht dedizierten Design-to-Code-KIs aus 2026 echte Konkurrenz.
Jetzt Design-to-Code KI kostenlos testen >
Fable 5 vs. Gemini vs. GPT im UI-Vergleich
Zwei KI-Modelle, die 2026 das UI/UX- und Frontend-Segment dominierten, waren Gemini 3.1 PRO und GPT-5.4. Um Fable 5 gegen sie antreten zu lassen, habe ich alle drei mit genau demselben Prompt gefüttert. Gewählt wurde eine komplexe Aufgabe: das mobile und Desktop-Interface eines einzigen Fintech-App-Screens zu erstellen.
Ich nutze Fable 5 auf Claude Design sowie die Gemini- und GPT-Modelle im Banani AI UI Designer.
Prompt (identisch für alle drei, ohne Referenzen)
"Design a mobile banking app screen called 'My Card' — user-side. Show a virtual debit card, balance, quick actions, spend stats, and a recent transactions list. Fill in the details and copy as suitable. As for aesthetic direction, go for a dark, bold look that feels premium but not loud. Gradient and translucent surfaces (glassmorphism-leaning) with modern typography and one accent color doing all the work."
Design-Output (alle drei im direkten Vergleich)
Gemini 3.1 PRO Design ansehen & bearbeiten | GPT 5.4 Design ansehen & bearbeiten
Alle drei Modelle stellten Rückfragen (Bananis KI-UI-Agent brauchte allerdings am wenigsten Führung). Und: Die UI-Designs von Banani waren in unter 2 Minuten fertig (je eine Minute für Mobile und Desktop), während Fable 5 in Claude Design dafür ca. 6 Minuten brauchte.
Zum Design selbst: Alle haben die mobile Vorgabe super umgesetzt. Fable 5 und GPT 5.4 wählten eine ähnliche Grün-Schwarz-Kombination, während Gemini 3.1 PRO sich für ein cooles Lila-Schwarz entschied. Fonts, Icons und Layouts überzeugen bei allen dreien. Für mich hat die transluzente Karte von Fable 5 jedoch den edelsten Look. Die Desktop-Ansicht verpackt zudem clever viel Inhalt auf wenig Raum. Das heißt nicht, dass die anderen schlecht sind – aber bei GPT fehlt die seitliche Navigationsleiste und Gemini wirkt etwas überladen.
Ein Kopf-an-Kopf-Rennen, aber das Fable 5 UI hat am Ende die Nase vorn.
UI mit Gemini oder GPT kostenlos designen >
Urteil: Ist Fable 5 gut für UI/UX?
Ja, Fable 5 setzt im Webdesign neue Maßstäbe. Das Textverständnis, die Designqualität und der Code-Output sind herausragend. Es baut statische Screens, Mikro-Animationen und interaktive Prototypen über mehrere Screens hinweg. Allerdings verbraucht es viele Credits und arbeitet (zumindest in Claude Design) recht langsam.
Wenn du neben erstklassigem KI-Design einen nahtlosen Design-to-Code-Workflow suchst, starte kostenlos mit Banani! Es unterstützt mehrere Modelle (aktuelle Gemini + Claude), bietet tiefe Figma-Integration und ermöglicht 1-Klick-HTML/CSS-Exporte oder MCP-Anbindungen.
FAQs zu Fable 5 für UI/UX-Design
Wie greife ich in Claude Design auf Fable 5 zu?
In Claude Design findest du im Prompt-Feld ein Dropdown-Menü für Modelle. Wähle dort Fable 5 aus und bestimme auch das gewünschte Effort-Level (von minimal bis maximal).
Wie exportiere ich Frontend-Code aus Fable 5 in Claude Design?
Du kannst im Chat direkt nach dem Code deines Fable 5-Designs in der gewünschten Sprache fragen. Oder klicke oben rechts auf Share → Send to Claude Code, um ein fertiges Paket für Entwickler zu generieren.
Ist die Frontend-Codequalität von Fable 5 gut?
Absolut. Bei meinen Tests verschiedener exportierter Files zeigte sich stets barrierefreies und semantisches HTML/CSS/JS bei kleineren Projekten und echtes, token-gesteuertes React + Tailwind bei größeren Multipage-Interfaces. Extrem nah an echtem Entwickler-Handoff.
Kann Fable 5 Bilder für UIs generieren?
Nicht zuverlässig. Im Test liefen Bildgenerierungen meist ins Leere – stattdessen suchte das Modell sich Material auf Wikimedia Commons zusammen. Individuelle Vektor-Icons lassen sich mit präzisen Prompts dagegen gut erstellen.
