Als Designer entwickelt man mit der Zeit einen eigenen Stil und gewisse Prinzipien, nach denen man gestaltet. Ich bin vorwiegend in der B2B-Welt zu Hause und mag klare, schlichte Designs.
Für mein aktuelles Projekt verlasse ich das gewohnte Terrain und versuche mich in ungewohnten Gefilden. Es soll bunt werden, verspielter und schokoladig – Thema Süßigkeiten.
In meinem Kopf habe ich ein paar grobe Ideen, aber diese zu visualisieren, fällt mir schwer. Ich schaue nach Inspiration, finde aber nichts Passendes. Eine gute Gelegenheit, mir Google Stitch einmal näher anzuschauen.
Was ist Google Stitch?
Google Stitch hat den Anspruch, aus einfachen Beschreibungen oder groben visuellen Entwürfen voll funktionsfähige UI-Designs samt zugehörigem Code zu erstellen. Die Beispiele, die ich hauptsächlich in Social Media sehe, sind beeindruckend und reißerisch. Ist Stitch also der richtige Ort, um ein passendes Design für meine App zu entwickeln?
Ich öffne Google Stitch und finde eine vertraute Umgebung vor. Viel erinnert an Google Gemini. Mit meinem Google-One-Abonnement habe ich Zugriff auf zwei Varianten: den Standardmodus, der den Codeexport und Figma-Dateien unterstützt, sowie den experimentellen Modus, der nur den Codeexport anbietet.
Hohe Erwartungen treffen auf die Realität.
Ich starte mit einem sehr einfach gehaltenen Prompt, um zu sehen, in welche Richtung die Ergebnisse der KI gehen.
Das Ergebnis ist beliebig, sachlich und eintönig. In einem nächsten Schritt gebe ich ein paar mehr Informationen. Ich lade einen Screenshot von StreakFree hoch und beschreibe den gewünschten Stil.
“Ich möchte diese App anpassen, damit sie Nutzern hilft weniger Süßigkeiten zu essen. Das Design soll verspielter werden. Die Farbgebung geht Richtung Schokolade. Statt der Punkte in der Mitte sieht man einen leeren Pralinenkasten, die blauen Punkte sind dann einzelne Pralinen (der Nutzer füllt also einen Pralinenkasten).”
Zwischen Detailkritik und Nutzenfrage
Ernüchternd. Im ersten Augenblick wirkt es beliebig. Allmählich fallen mir Details auf. Warum steht oben „Süße Belohnung“? Sollte da nicht die Switch von StreakFree sein? Warum ist der „Pralinenkasten“ breiter als die restlichen Elemente?
Lobenswert finde ich die richtige Differenzierung bei den Buttons unten. Bei StreakFree unterscheidet sich der Primary-Button vom Secondary-Button nur durch eine blaue Schrift. Das hat Google Stitch richtig zugeordnet und die Button-Stile korrekt angepasst. Aber so richtig schokoladig wirkt das Design jetzt nicht auf mich.
Ich habe konkrete Vorstellungen in meinem Kopf, diese aber exakt so zu beschreiben, dass die KI sie in entsprechende Designs umwandelt, fällt mir schwer. Mir stellt sich außerdem die Frage, welchen Mehrwert ich eigentlich habe, wenn ich mit Google Stitch ein finales Design erstelle. Ich kann das fertige Design ausschließlich in HTML exportieren, für meine iOS-App benötige ich aber Swift. Jetzt funktioniert es zwar prinzipiell, dass ich mir mittels Gemini einen HTML-Code in Swift umwandeln lasse, dies ist aber immer auch mit einer gewissen Abweichung vom Original verbunden.
Kann mir Google Stitch trotzdem einen Mehrwert bieten?
Wie nutze ich Google Stitch für meine App?
Statt ein gesamtes Konzept zu erarbeiten, konzentriere ich mich auf einzelne Elemente. Ich fange mit dem Primary-Button an, dieser ist einfach zu definieren und bietet trotzdem genug Spielraum für kreative Ideen einer KI.
Ich konzentriere mich zuerst nur auf den Primary-Button. Er ist ein einfaches Element. Ich taste mich Stück für Stück an komplexere Designs heran. Ich gebe ungefähre Größenangaben in meinem Prompt an, damit das Design später auch optisch in der fertigen App funktioniert.
“Ein einfacher Primary-Button für eine iOS App, der 80 % breit ist und 60 px hoch. Er verwendet die Schrift “PatrickHand-Regular.ttf” Der Button ist für eine App mit dem Thema Süßigkeiten. Er erinnert optisch an einen Schokoriegel oder Keks. Ler Look ist etwas verspielter, comichaft.”
Mit diesem Ergebnis bin ich zufrieden. Nicht zu verspielt, aber auch kein 0815-Button. Als Nächstes kopiere ich den HTML-Code aus Stitch zu Gemini und lasse mir den Button als Swift-Code geben. Damit die gewünschte Logik übernommen wird, schicke ich den Ursprungscode des Primary-Buttons von StreakFree noch mit dazu. Dadurch erhalte ich einen optisch ähnlichen Primary-Button für meine App, der nicht nur funktioniert, sondern auch noch einen schönen Click-Effekt hat.
Für mich ist ein entscheidender Vorteil der HTML-Export von Stitch. Wenn ich Gemini ein Bild von dem gewünschten Design zeige, weiß Gemini nicht, wie es aufgebaut ist, also welche Ebenen es enthält. Durch den HTML-Code versteht Gemini die einzelnen Ebenen und kann sie so besser in Swift nachbauen.
Als Nächstes benötige ich einen dazu passenden Secondary-Button. Zu meiner Überraschung ist Google Stitch nicht in der Lage, mir ein passendes Design zu liefern, Gemini stattdessen schon.
Ich gehe davon aus, dass sich Google Stitch rasant weiterentwickeln wird, und es lohnt sich, dieses immer wieder auszuprobieren. Für den Anfang hilft es mir aber schon sehr durch gezielten Input bei der Gestaltung einzelner Elemente.
Artikel teilen
Last modified: August 12, 2025
