Gemini 3.1 für Web- und UI-Design

Landing Pages

Ich wollte etwas, das nicht wie jede andere KI-generierte Startup-Seite aussieht. Also habe ich statt nach einer "sauberen modernen Landing Page" zu fragen, den Schwerpunkt im Prompt auf Stil und Gefühl gelegt.

Das Ergebnis war wirklich gut. Hier können Sie es sehen:

Das Layout hatte eine echte Hierarchie, die Hover-Zustände funktionierten und die Farbverlaufsanimation war fließend. Es wurde nicht auf den üblichen weißen Hintergrund mit einer blauen CTA-Schaltfläche zurückgegriffen. Ich habe die Schriftpaarung angepasst, aber als Ausgangspunkt hat es mir mindestens eine Stunde Einrichtung gespart.

Hier ist ein Prompt, den ich geschrieben habe:

Landing Page für ein modernes Architekturbüro. Verwenden Sie den gleichen cremefarbenen Hintergrund in allen Abschnitten der Seite. Verwenden Sie redaktionelle Überschriften, konzentrieren Sie sich zuerst auf Bilder und Inhalte. Das Gesamtgefühl ist kühle Zurückhaltung: ein Studio, das sich nicht erklären muss.

SaaS-Designs

Bei diesem Test wollte ich sehen, wie es mit einer komplexeren Benutzeroberfläche mit Daten, Navigation und mehreren Zuständen umgeht. Hier hat Gemini 3.1 Pro wirklich gezeigt, was es kann!

Die Komponentenstruktur ist sauber, die Karten haben einen angemessenen Abstand und die Statusabzeichen verwenden tatsächlich verschiedene Farben für unterschiedliche Zustände. Das Liniendiagramm wurde korrekt dargestellt und die Daten sahen realistisch aus.

Hier ist mein Prompt für diesen Test:

SaaS-Analytics-Dashboard für eine Content-Marketing-Web-App. Verwenden Sie ein helles Thema mit einem Neon-Grün als Akzent. Soll sich anfühlen wie Linear oder Notion. Das Layout sollte dicht sein, aber nicht mit Inhalten überladen.

Es sollte eine Seitenleiste zur Navigation, eine obere Leiste mit Suchfeld + Avatar haben. Hauptinhaltsbereich mit drei Metrik-Karten oben (zeigen Gesamtposts, durchschnittliches Engagement und monatliche Reichweite), darunter ein gestapeltes Balkendiagramm zum Traffic über 30 Tage und eine Tabelle mit aktuellen Posts mit Statusabzeichen als separaten Abschnitt darunter.

Linear or Notion-Referenzen kamen ziemlich gut an. Gemini vermied die klobigen Ränder und schweren Schatten, die KI-Dashboards normalerweise veraltet aussehen lassen.

Mobile Designs

Neben der Prüfung von Desktop-Designs wollte ich testen, wie Gemini 3.1 Mobile- und App-Designs gestalten kann.

Um das zu tun, habe ich wieder Referenzen in meinem Prompt verwendet, Uber erwähnt und diesmal ohne ins Detail zu gehen, um zu sehen, wie weit es mit wenig zusätzlichem Kontext gehen kann.

Der verwendete Prompt:

Home-Screen einer Ride-Ordering-App im Light-Mode, aber mit einem monochromen schwarzen Farbschema inspiriert von Uber.

Wie Sie sehen können, hat es ein sauberes Layout mit sehr klaren und markanten Touch-Zonen. Jedes interaktive Element ist großzügig dimensioniert und leicht zu erreichen. Nichts konkurriert um Aufmerksamkeit, die Hierarchie übernimmt die Arbeit.

Designs für Präsentationsfolien

Neben UI-Tests wollte ich wissen, wie Gemini 3.1 mit Präsentationsfolien umgehen kann.

Das Ergebnis ist ziemlich sauber. Große Überschrift, angemessener Weißraum, die Statistik wurde mit einer großen Zahl und einem gedämpften Label darunter gestaltet. Es sah aus wie etwas, das man tatsächlich vor Stakeholdern oder Teamkollegen präsentieren würde.

Verwendeter Prompt:

Entwerfen Sie eine einzelne Präsentationsfolie für einen SaaS-Produktpitch. Minimales Layout, viel Platz zum Atmen. Denken Sie an Pitch.com, nicht an PowerPoint.

Die Folie sollte den Titel "Warum jetzt?" tragen und den Fall für das Markt-Timing machen. Dunkler Hintergrund, fettgedruckte übergroße Überschrift links, eine Schlüsselstatistik rechts, etwas wie "73% der Teams verwenden dafür immer noch Tabellen."

Wie man Gemini 3.1 Pro verwendet

Obwohl Sie es in Google AI Studio oder über die API verwenden können, ist der beste Weg, es für UI-Design zu nutzen, über spezialisierte Tools zu gehen, die das Modell integriert haben.

Banani

Banani ist ein canvas-basiertes UI-Generierungstool, das kürzlich Gemini 3.1 Pro als eines der Modelle integriert hat, die Sie verwenden können. Es ermöglicht Ihnen, UI-Designs aus einfachen Text-Prompts zu erstellen und zu organisieren.

Die meisten der in diesem Artikel gezeigten Beispiele wurden direkt dort mithilfe von Gemini erstellt.

Es ist eine großartige Wahl, wenn Sie eine Figma-ähnliche Benutzeroberfläche und die Möglichkeit zur Interaktion mit KI-Modellen wie Gemini, GPT, Claude wünschen.

Außerdem bleibt Ihr regulärer Workflow erhalten, indem Sie Designs in Figma kopieren-einfügen, als Code exportieren oder andere Codierungsagenten über MCP verbinden können.

Gemini Canvas

Der direkteste Weg, auf Gemini 3.1 Pro zuzugreifen, ist die Gemini-App selbst. Die App hat eine Canvas-Funktion, die es Ihnen ermöglicht, eine Vorschau dessen anzuzeigen, was das Modell generiert hat.

Es ist ein guter Ausgangspunkt, wenn Sie erkunden möchten, was das Modell für Designs leisten kann, bevor Sie sich für ein spezialisierteres Tool entscheiden.

Beachten Sie, dass es regional gesperrt sein kann (Stand dieses Artikels), sodass Sie, wenn Sie sich außerhalb der USA befinden, möglicherweise diese Voransicht/Funktion noch nicht nutzen können.

Stitch

Stitch ist ein experimentelles, KI-gestütztes Design-Tool von Google Labs. Es nimmt Text-Prompts oder hochgeladene Bilder und generiert vollständige UI-Designs mit exportierbarem Code. Sie können sowohl 3.0 als auch 3.1 Thinking von dort aus verwenden.

Ich habe eine ausführliche Bewertung von Stitch sowie eine Bewertung von Alternativen geschrieben, die Sie für die UI-Generierung verwenden können.

Beste Gemini 3.1 Pro Prompts

Um die besten UI-Design-Ergebnisse von Gemini 3.1 Pro zu erhalten, müssen Sie die Art und Weise ändern, wie Sie Prompt bieten. Konzentrieren Sie sich auf den Vibe, Layout-Details und Referenzen.

Fügen Sie viele Details hinzu

Die Qualität des generierten Enddesigns von Gemini hängt stark davon ab, wie viele Details Sie angeben.

Seien Sie sehr spezifisch, wenn Sie bereits einige Elemente haben, die Sie entworfen und auf dem Bildschirm haben möchten. Schreiben Sie diese Details auf. Das Modell kann nicht Ihre Gedanken lesen.

Beschreiben Sie das Gefühl

Fordern Sie nicht einfach einen "blauen Header" an. Gemini ist ein multimodales Modell, das sowohl Code als auch visuelle Dinge verstehen kann.

Sie können ein abstraktes Thema oder eine Stimmung beschreiben, die Sie für das Design erkunden möchten. Zum Beispiel: "Entwerfen Sie eine Landing Page für ein persönliches Portfolio. Der Vibe sollte düster, viktorianisch, aber modern sein: Verwenden Sie Serifenschriften, eine tiefgrau-schwarze Farbpalette."

Geben Sie zusätzlichen Kontext

Ähnlich wie beim ersten Punkt gilt: Je mehr Sie geben, desto bessere Ergebnisse erhalten Sie. Fügen Sie Bildreferenzen, UIs, die Ihnen von Mobbin gefallen, Screenshots Ihrer aktuellen UI oder sogar Serviettenskizzen bei.

Sie können Gemini sagen: "Replizieren Sie diese Bildschirme so nah wie möglich. Passen Sie das Layout, die Elemente und die Stile an." Es behandelt visuelle Anmerkungen als hochpriorisierte Anweisungen.

Verwenden Sie Thinking

Wenn Sie die Gemini-App verwenden, können Sie den Denklevel auf Hoch einstellen, um komplexe Layouts zu erstellen. Es dauert länger, aber das Modell verbringt mehr Zeit damit, die visuellen Elemente und die Layoutstruktur zu durchdenken.

Dies führt zu viel besseren Layouts und visuellen Elementen im Design.

Was Reddit sagt

Vibe-Coding- und Design-Communities auf Reddit haben das Modell seit ihrem jüngsten Pre-Launch-Stresstest gemacht, und das Feedback ist gemischt.

Das Gute

Viele Nutzer berichten, dass Gemini 3.1 Pro besser abschneidet als alle anderen fortschrittlichen Modelle, insbesondere für Frontend und Design.

• Ein Nutzer generierte 50 verschiedene Seiten in 10 Kategorien und stellte fest, dass "die SVG-Logik und die Polsterungskonsistenz jetzt viel besser sind" und es "endlich 'ästhetische' Anweisungen versteht, ohne 10 Prompt-Überarbeitungen zu benötigen."

• Ein anderer Benutzer verglich es direkt mit Claude Opus 4.6 für Webdesign und stellte fest, dass das Ergebnis von Gemini "etwas weniger KI-designt" ausgesehen hat und besseren Kontrast und Balance aufweist.

Das Schlechte

Allerdings ist es nicht perfekt.

• Der Hauptkritikpunkt ist die "endlose Gedankenschleife." Bei komplexen Aufgaben kann es endlos in der Planung feststecken und schreibt lange, wiederholende Überlegungen, bevor es tatsächlichen Code produziert.

• Einige Nutzer stellten auch fest, dass es zwar erstaunlich für Einzelschussüberlegungen ist, jedoch Schwierigkeiten hat, wenn es als autonomer Codierungsagent für komplexe Anwendungen eingesetzt wird, wobei Claude Opus 4.6 aufgrund seiner Zuverlässigkeit und des Mangels an "Planungsflusen" weiterhin bevorzugt wird.

Fazit

Ich habe es als meinen täglichen Begleiter für die meisten designbezogenen Aufgaben verwendet, und ich starte normalerweise mit ihm, wenn ich UI mit KI generiere.

Gemini 3.1 Pro lohnt sich definitiv, wenn Sie frustriert von den generischen, lila Farbverlaufs-UI-Generierungen anderer Modelle sind.

Es hat ein starkes "räumliches Verständnis", wodurch es ein leistungsstarkes KI-Designmodell für Prototyping und schnelle Layout-Ideation ist.