Banani
KI-Tool fürs UI-Design, das aus Prompts, Screenshots oder Figma-Links bearbeitbare Prototypen mit mehreren Screens erstellt.
Banani ist ein KI-Tool fürs UI-Design, das aus einem Text-Prompt, einem Screenshot oder einem Figma-Link bearbeitbare Oberflächenprototypen mit mehreren Screens erstellt. Du beschreibst ein Produkt, verfeinerst die Screens per Chat oder mit manuellen Stilreglern und teilst dann einen Projektlink oder exportierst die Arbeit als Figma-Ebenen, HTML/CSS oder Bilddateien.
Am besten geeignet für Produktmanager, Gründer und Entwickler, die schnell vorzeigbare UI-Konzepte ohne eigenen Designer brauchen, sowie Designer, die einen schnelleren ersten Entwurf wollen.
- Zu finden in
- UI- und UX-Design
- Plattformen
- Web, MCP
- Preismodell
- Freemium
- Kostenloser Tarif
- Ja
- Anbieter
- Banani
- Hinzugefügt
Zuletzt geprüft: . Die Angaben stammen von banani.co.
Was ist Banani?
Banani ist ein KI-Designtool, das aus einer schriftlichen Beschreibung Layouts für Benutzeroberflächen und klickbare Prototypen erstellt. Neben Text nimmt es Bilder, Screenshots und Figma-Links als Referenz an und liest deren Layout und visuellen Stil aus, um die Oberfläche entweder nachzubilden oder neue Richtungen vorzuschlagen. Das Ergebnis ist eine Reihe verbundener Screens, die bearbeitbar bleiben: Du kannst den Assistenten im Chat bitten, die Stimmung eines Designs zu verschieben, oder Farben, Schrift und andere Tokens von Hand anpassen. Fertige Arbeit wird über einen Projektlink geteilt oder nach Figma, HTML/CSS oder in Bilddateien exportiert, und über eine MCP-Verbindung können Coding-Agenten die Designs direkt lesen. Laut Website wurde das Produkt von Vlad Solomakha und Vova Parkhomchuk gegründet und wird in den Stufen Free, Plus, Pro und Enterprise angeboten.
Wichtigste Funktionen
Vom Text zum Prototyp
Baut aus einer Beschreibung des geplanten Produkts in einfacher Sprache mehrere verknüpfte, bearbeitbare Screens.
Generierung auf Basis einer Referenz
Nimmt ein Bild, einen Screenshot oder einen Figma-Link, liest Layout und Styling aus und bildet den Screen nach oder verzweigt zu neuen Ideen.
Stilregler
Verändert den Charakter eines Designs per Chat-Anfrage, mit manueller Kontrolle über Farben, Typografie und andere Tokens.
Teilen per Link
Sendet ein Projekt oder einen einzelnen Screen an Kolleginnen und Kollegen, damit sie ihn ansehen und kommentieren können.
Exportoptionen
Überträgt Designs als bearbeitbare Ebenen mit Auto Layout nach Figma oder gibt HTML/CSS oder Bilddateien aus. Der Export nach Figma und als Code gehört zu den kostenpflichtigen Tarifen.
MCP-Verbindung
Verknüpft ausgewählte Screens mit Coding-Agenten wie Claude Code, Cursor und Codex, damit sie sie in deinem Stack umsetzen können.
So funktioniert Banani
Beschreiben oder hochladen
Schreibe, was das Produkt können soll, oder liefere ein Bild, einen Screenshot oder einen Figma-Link als Referenz.
Die generierten Screens prüfen
Banani liefert einen klickbaren Prototyp aus mehreren Screens.
Das Design anpassen
Klicke ein Element an oder chatte mit dem Assistenten, um es zu ändern, und passe Stil-Tokens von Hand an.
Teilen oder exportieren
Sende einen Projektlink oder nimm das Design als Figma-Ebenen, HTML/CSS oder Bilddateien heraus.
Screenshots
Anwendungsfälle
- Wireframes für Produktspezifikationen
- Ein Produktmanager skizziert schnell einen Ablauf, um Entwicklern und Beteiligten eine Idee zu erklären.
- Prototypen von Gründern
- Ein Startup ohne Designer erstellt ein Mockup einer App, bevor es Entwicklungszeit einplant.
- Redesign auf Basis eines Screenshots
- Füttere einen vorhandenen Screen ein und erzeuge alternative Versionen davon.
- Übergabe an Figma durch Designer
- Erzeuge einen ersten Durchgang und verfeinere die Ebenen anschließend in Figma weiter.
- Von Design zu Code mit Agenten
- Gib ausgewählte Screens über MCP an einen Coding-Agenten, der sie umsetzt.
Gut zu wissen
- Die Generierung läuft über Credits
- Eine Generierung verbraucht je nach Komplexität der Anfrage meist mehr als einen Credit. Kostenlose Konten erhalten 12 pro Monat mit 3 täglichen Auffüllungen, Plus 100 mit 10 täglichen Auffüllungen, Pro ist unbegrenzt.
- Export nach Figma und als Code ist kostenpflichtig
- Die FAQ zu den Preisen beschränken den Export nach Figma und den Export als HTML/CSS auf die Tarife Plus und Pro.
- Fehlende Credits pausieren nur die Generierung
- Bestehende Projekte bleiben ansehbar und teilbar. Neue KI-Generierungen warten, bis die Credits aufgefüllt werden oder der Abrechnungszyklus zurückgesetzt wird.
- Angezeigt werden Jahrespreise
- Die aufgeführten Preise sind die bei jährlicher Abrechnung angezeigten, die laut Website 40 % niedriger sind als bei monatlicher Zahlung.
Häufige Fragen
Was ist Banani?
Banani ist ein KI-Tool zum Gestalten von Benutzeroberflächen. Es erzeugt aus Prompts, Referenzbildern und Produktanforderungsdokumenten bearbeitbare Screens und interaktive Prototypen.
Wofür wird Banani verwendet?
Banani dient dazu, Wireframes und detailliertere UIs für Web-Apps, Mobil-Apps, Dashboards und Landingpages zu entwerfen und das Ergebnis zu teilen oder zu exportieren.
Ist Banani kostenlos?
Ja. Banani hat einen Free-Tarif, der nicht ausläuft und keine Kreditkarte braucht. Er enthält 12 Credits pro Monat plus 3 tägliche Auffüllungen und private Projekte.
Wie viel kostet Banani?
Banani: Ein kostenloser Tarif ist verfügbar. Die Preise der kostenpflichtigen Tarife stehen auf banani.co. Die aktuellen Beträge findest du auf der offiziellen Preisseite.
Kann Banani nach Figma exportieren?
Ja, in den kostenpflichtigen Tarifen. Laut den FAQ zu den Preisen von Banani können Nutzer von Plus und Pro Designs als bearbeitbare Ebenen nach Figma senden und außerdem HTML/CSS exportieren.
Funktioniert Banani mit Coding-Agenten?
Ja. Banani bietet eine MCP-Verbindung für Agenten wie Claude Code, Cursor und Codex, und die FAQ zu den Preisen geben an, dass jeder Tarif sie enthält.
Wer steckt hinter Banani?
Banani wurde von Vlad Solomakha und Vova Parkhomchuk gegründet, die das Unternehmen als kleines Team aus Designern und Entwicklern beschreiben.
Für wen es sich eignet
- Produktmanager
- Gründer
- Designer
- Ingenieure
- Studierende
In diesen Guides im Einsatz
- App-Oberflächen mit KI gestalten: Recherche, Screens, Prototyp, CodePhase 3: UI-Screens
- App-Oberflächen mit KI gestalten: Recherche, Screens, Prototyp, CodePhase 6: Design-to-Code und Übergabe
Jeder Guide nennt die Phasen eines Vorhabens und die Tools, die in der jeweiligen Phase helfen. Alle Guides
Kommentare
Noch keine Kommentare. Hast du Banani schon genutzt? Erzähl den anderen, wie es lief.
Alternativen zu Banani
| Tool | Kostenloser Tarif | Einstiegspreis | API |
|---|---|---|---|
 PenpotOpen-Source-Designplattform für Interface-Design, Prototyping und Design Systems, mit Code-Inspektion und MCP-Server. |
Ja | 7 $/Monat | Ja |
 AuraKI-Builder für Landingpages, der Designs aus Prompts erzeugt, mit Vorlagen, einem CMS und Export als HTML oder Figma. |
Ja | — | — |
 GetLayersBibliothek mit Website-Vorlagen, 3D-Szenen, Sektionen und Verläufen, die als Prompts für KI-Coding-Tools bereitstehen. |
Ja | — | — |
 MasterGoKollaborative Online-Plattform für Oberflächendesign mit KI-Erzeugung von Prototypen und Übergabe von Design an Code. |
Ja | — | Ja |
 Modao AI (墨刀AI)Chinesische Plattform für Prototyping und Produktzusammenarbeit mit KI, die Prototypen, PRDs und Präsentationen erzeugt. |
Ja | — | — |
Aus derselben Kategorie wie Banani. Ein Einstiegspreis steht nur dort, wo wir ihn auf der Preisseite des Anbieters geprüft haben. Ein Strich bedeutet: nicht geprüft oder nicht veröffentlicht. Alle Tools in UI- und UX-Design