SuperDesign AI mit Gemini 3: Das UI-Design-Tool, das Figma alt aussehen lässt
"Figma ist der Industriestandard."
Diesen Satz habe ich öfter gesagt, als ich zählen kann. Und jahrelang stimmte er. Doch kürzlich passierte etwas, das mich alles in Frage stellen ließ, was ich über UI-Design-Workflows zu wissen glaubte.
Ich bin auf SuperDesign gestoßen — ein KI-gestütztes Design-Tool, das auf Gemini 3 läuft — und ehrlich gesagt? Ich verarbeite immer noch, was ich gesehen habe.
Das Problem mit unserem heutigen Designprozess
Hier ist die Sache mit traditionellen Design-Tools: Sie sind für eine Welt gebaut, in der Designer designen und Entwickler entwickeln. Man erstellt etwas Schönes in Figma und verbringt dann Stunden damit, es in tatsächlichen Code zu übersetzen. Oder man übergibt es einem Entwickler, der die Vision von Grund auf nachbaut, Pixel für Pixel.
Es funktioniert. Aber es ist langsam. Und 2025 fühlt sich "langsam" wie ein Bug an, nicht wie ein Feature.
Ich hatte monatelang von "Vibe Coding" und KI-Design-Tools gehört. Die meisten fühlten sich... daneben an. Die Ergebnisse sahen generisch aus. Die KI hat nicht wirklich verstanden, was gutes Design ausmacht.
Dann sah ich SuperDesign tatsächlich in Aktion.
Was SuperDesign anders macht
SuperDesign ist nicht einfach nur ein weiteres KI-Tool auf einer Leinwand. Es basiert auf Gemini 3, das etwas hat, was den meisten KI-Design-Tools fehlt: echtes visuelles Kontextverständnis.
Das Tool befindet sich unter app.superdesign.dev und ist noch in der Beta-Phase. Aber selbst in diesem frühen Stadium tut es Dinge, die ich noch nicht für möglich gehalten hätte.
Zwei Hauptmodi:
- Design-Modus: UI von Grund auf generieren oder bestehende Designs per natürlicher Sprache modifizieren
- Wireframe-Modus: Grobe Formen skizzieren, und die KI wandelt sie in polierte Komponenten um
Der zweite hat mich umgehauen. Man zeichnet buchstäblich ein grobes Rechteck mit ein paar krakeligen Linien — "das ist ein Menü" — und es spuckt eine produktionsreife Navigationskomponente aus, die zum Markenstil passt.
Der Klonen-und-Anpassen-Workflow
Hier wird es interessant.
SuperDesign hat eine Chrome-Erweiterung, mit der man jede Website in ein bearbeitbares React-Projekt klonen kann. Nicht nur ein Screenshot. Ein tatsächlich modifizierbares Design mit echten Assets und Struktur.
Ich habe beobachtet, wie jemand eine Seite von curated.design klonte — saubere, minimalistische Ästhetik, viel Weißraum — und innerhalb von Sekunden war sie im Canvas von SuperDesign geladen. Dann tippten sie: "Füge oben einen Werbebanner hinzu, der zum Markenstil passt."
Die KI generierte den Banner. Integrierte ihn nahtlos. Als er mit der Navigation überlappte, baten sie die KI einfach, es zu beheben.
Keine manuellen Anpassungen. Kein Pixel-Schieben. Einfach nur Konversation.
Vom Design zum echten Code
Das ist der Teil, der für Entwickler zählt.
Man kann direkt exportieren nach:
- Cursor
- Claude Code
- VS Code
Der Export ist kein Pseudo-Code-Müll. Es ist ein produktionsreifes React-Projekt. Echte Komponenten. Tatsächliches CSS. Etwas, das man ausführen und weiterentwickeln kann.
Es gibt auch einen style.md-Export, der alle Design-Tokens und Stildefinitionen in Markdown erfasst. Legt das in euer Projekt, und euer KI-Codierassistent weiß genau, welche Stile zu verwenden sind.
Die Design-Code-Lücke, die unsere Branche seit Jahren plagt? SuperDesign schließt sie einfach... ganz.
Was das für deinen Workflow bedeutet
Ich sage nicht, dass Figma tot ist. Ist es nicht.
Aber ich sage, dass für schnelles Prototyping, für Vibe Coding, um in Stunden statt Tagen von der Idee zur funktionierenden UI zu kommen — SuperDesign einen echten Wandel darstellt.
Produktmanager können Ideen skizzieren und echte Designs bekommen. Designer können schneller iterieren als je zuvor. Entwickler bekommen Code, den sie tatsächlich verwenden können, nicht nur hübsche Bilder zum Nachbauen.
Das Tool bietet helle und dunkle Modi, Gerätevorschauen, Versionshistorie und Screenshot-Annotationen. Man kann einen Screenshot mit Notizen versehen und diese Annotationen als Kontext für KI-Prompts verwenden.
Es ist früh. Es ist Beta. Einige Funktionen sind noch rau.
Aber der Kern-Workflow funktioniert. Und er funktioniert gut.
Die ehrliche Bewertung
Würde ich SuperDesign für jedes Projekt verwenden? Noch nicht. Komplexe Design-Systeme mit ausgefeilten Komponentenbibliotheken brauchen noch traditionelle Tools und menschliche Aufsicht.
Aber für:
- Schnelles Prototyping
- Bestehende Seiten klonen und verbessern
- Schnelle Wireframe-zu-UI-Konvertierung
- Schnell einen funktionierenden React-Startpunkt bekommen
Es ist wirklich beeindruckend. Das Gemini-3-Modell produziert Ergebnisse mit besserer Ästhetik und kontextueller Genauigkeit als jedes andere KI-Design-Tool, das ich gesehen habe.
Probier es selbst aus
Folgendes würde ich vorschlagen:
- Installiere die Chrome-Erweiterung
- Wähle eine Website, die dir gefällt
- Klone sie in SuperDesign
- Bitte die KI, etwas hinzuzufügen — einen Banner, einen neuen Abschnitt, eine Komponente
- Exportiere in deine IDE
Schau, was passiert. Ich denke, du wirst überrascht sein.
Die Werkzeuge, die wir nutzen, verändern sich schneller, als unsere mentalen Modelle mithalten können. Das ist keine Bedrohung — es ist eine Chance.
Du wirst nicht von KI-Design-Tools ersetzt. Dir wird eine Hebelwirkung gegeben, die du nie zuvor hattest. Die Designer und Entwickler, die herausfinden, wie sie diesen Hebel nutzen können? Sie sind diejenigen, die die nächste Generation von Produkten bauen werden.
Die Kluft zwischen Design und Entwicklung verschwindet nicht. Aber sie wird deutlich kleiner. Und Tools wie SuperDesign gehen voran.
🤝 Mich beauftragen / Zusammenarbeiten:
- 🔗 Fiverr (Individuallösungen, Integrationen, Performance): fiverr.com/s/EgxYmWD
- 🌐 Mejba Persönliches Portfolio: mejba.me
- 🏢 Ramlit Limited: ramlit.com
- 🎨 ColorPark Creative Agency: colorpark.io
- 🛡 xCyberSecurity Global Services: xcybersecurity.io
