Ja hi und herzlich willkommen zu diesem Snip.
Ja, heute soll es um Google Stitch gehen, was von Google selbst vor Kurzem vorgestellt wurde.
Mit Stitch könnt ihr in Minutenschnelle Design-Mockups generieren.
Ihr könnt per Prompteingabe oder per Bildeingabe komplette UI-Interfaces mit sauberem CSS- oder HTML-Code erstellen.
Und das Allerbeste daran ist: Ihr könnt damit gleich mit dem Code in weiteren Tools wie zum Beispiel Figma weiterarbeiten und dort euer Design dann noch anpassen.
Wie das funktioniert, zeige ich euch gleich Schritt für Schritt.
Zuallererst schauen wir uns mal ein paar Ergebnisse an, damit ihr einen Eindruck bekommt, was ihr mit Google Stitch alles umsetzen könnt.
Viel Spaß!
Wir befinden uns hier jetzt in der Oberfläche von Google Stitch, welche wirklich sehr einfach und nutzerfreundlich aufgebaut ist.
Hier haben wir jetzt beispielsweise mit nur einem einzigen Prompt das Design für eine komplette App für Workout-Übungen erstellen lassen.
Das heißt vom Startbildschirm...
...über sämtliche Detailseiten hinweg, was auch schon grafisch einen sehr, sehr hochwertigen Eindruck macht, wurde dann hier alles gleich berücksichtigt, sodass ich direkt mit dem Design weiterarbeiten und dies noch verfeinern kann.
Ein anderes Beispiel ist hier eine Fotomediathek. Wenn ich sage: Für meine private Fotosammlung möchte ich ein ganz einfaches Programm haben, dann kann ich hier ebenso schon mal das Design für diese Anwendung festlegen.
Wir haben hier links die Übersicht über die Alben, dann die Vorschau der Bilder in der Mitte und dann hier noch rechts ein paar Bilddetails. Also alles schön auf einen Blick sehr, sehr einfach aufgebaut.
Oder hier noch ein weiteres Beispiel ist eine Einladung zu einem Backkurs für eine Pizza. Wenn ich hier schnelle und einfache Ideen benötige, kann ich sowas ebenso generieren lassen.
Um mit Google Stitch loslegen zu können, besucht ihr am besten die Website stitchwithgoogle.com und meldet euch hier mit einem Google-Account kostenfrei an.
Momentan läuft Stitch noch in der Beta-Phase. Ihr könnt es aber völlig kostenfrei testen.
Und hier auf der Startseite auf der Website erhaltet ihr noch ein paar weitere Inspirationen, welche Art von Designs ihr mit diesem Tool umsetzen könnt.
Noch als Hinweis: Momentan läuft Google Stitch auf den Google-eigenen Gemini 2.5 bzw. 2.5 Pro Modellen.
Nachdem wir eingeloggt sind, kommen wir auf diese Oberfläche von Google Stitch.
Und hier können wir zunächst einmal den Modus auswählen. Wir haben einmal den Standard Mode und einmal den Experimental Mode.
Diese unterscheiden sich dadurch, welches Modell, also Gemini 2.5 Flash oder das 2.5 Pro verwendet werden soll.
Im Standard Mode habe ich gewisse Geschwindigkeitsvorteile, im Experimental Mode ist es eher so, dass sich das Modell sehr nah am Prompt orientiert und hier eine höhere Übereinstimmung stattfindet.
Wir nutzen jetzt einmal für die Demo hier den Standard Mode und geben hier dann einfach mal in diese Maske unseren Prompt ein.
Also gar nicht viel. Ich sag hier nur: 'Ich benötige eine mobile App ähnlich wie Freeletics für Übungen draußen in der Natur'.
Dann kann ich noch auswählen, ob ich das Ganze für Mobile oder für Web haben möchte.
Hier noch ein paar Beispiele, wenn ich Inspiration benötige, und hier links ist der Verlauf. Da kann ich dann immer wieder schnell auf vorherige Projekte zurückgreifen.
Und dann klicken wir einmal auf 'Generate designs'.
Im nächsten Schritt sehe ich hier dann in der Leiste links noch einmal meinen Prompt und dann fragt mich Stitch noch ein paar Fragen zum Projekt.
Zunächst mal zur Willkommensseite, hier wird die App noch mal vorgestellt und die wichtigsten Funktionen hervorgehoben.
Es gibt die Möglichkeit, sich als Nutzer zu registrieren, ich kann mein Training auswählen, ich bekomme ein Trainings-Dashboard mit Details zu meinem Training...
...und dann noch eine Seite mit den Einstellungsmöglichkeiten, wo ich persönliche Informationen, Präferenzen und eben App-Einstellungen vornehmen kann.
Wenn das Ganze für uns passt, bestätigen wir das mit Okay und lassen das Design mal erstellen.
Wir erhalten dann nach ein bis zwei Minuten Warten unseren ersten Vorschlag für die App präsentiert.
Das heißt, wir haben hier unsere einzelnen Seiten der App: Einmal ein Begrüßungsbildschirm, dann die Seite mit der Möglichkeit, sich einzuloggen oder einen Account zu erstellen.
Ich kann hier auf der nächsten Seite meine Workouts auswählen, was ich gern machen würde...
...habe dann noch eine Übersicht über meine Tagesaktivitäten mit einer Karte integriert...
...dann noch Details zum Workout und dann habe ich hier eine Infoseite zu meinem Profil.
Wir können jetzt noch gewisse Einstellungen vornehmen. Ich sage jetzt hier, dass ich lieber in der ganzen App fotorealistische Bilder haben möchte, und schicke das Ganze noch mal ab.
Und im nächsten Schritt erhalte ich dann noch mal die App mit den ausgetauschten, fotorealistischen Bildern, was schon sehr, sehr gut geklappt hat.
Wenn ich hier noch weitere Voreinstellungen und Veränderungen vornehmen möchte, so lange, bis mir das Design gefällt, kann ich das hier weiterhin über die Prompteingabe machen oder über den Button 'Edit theme' hier oben.
Hier kann ich noch das Farbschema der ganzen App anpassen oder auch zum Beispiel die Schriftart der App verändern.
Eines der nützlichsten Features ist aber, dass ich die Möglichkeit hab, über diesen Button 'Copy to Figma' einzelne Seiten oder auch das komplette Design zu kopieren.
Das machen wir jetzt einmal und dann in Design-Tools wie zum Beispiel Figma einzufügen.
Das geht ganz einfach per Copy and Paste...
...und können dann hier mit unserem Team, beispielsweise mit unserem Marketing oder auch unserem Grafik-Team, gemeinsam an dem Design weiterarbeiten.
Ich kann hier dann wirklich ins Detail gehen, kann zu jedem Element hier Veränderungen vornehmen, kann noch mal die Farben, die Größen verändern, auch das hier unten noch mal, die einzelnen Symbole raussuchen, diese von der Größe hier beispielsweise anpassen oder komplett verändern.
Und ja, das stellt dann eben eine Möglichkeit dar, den Workflow von der Idee bis hin zum fertigen Design auf sehr praktische und einfache, schnelle Art abzubilden.
Ja, in diesem Snip hast du gelernt, wie du ganz einfach mit Google Stitch erste Designideen und Mockups umsetzen kannst: Von der Eingabe eines einfachen Prompts über die Anpassung des Themes bis hin zum Export in externe Tools wie zum Beispiel Figma, in dem du dann zum Beispiel mit deinem Team zusammenarbeiten kannst, haben wir einmal den kompletten Prozess durchgespielt.
Ich wünsche dir viel Spaß beim Ausprobieren und wir sehen uns dann beim nächsten Snip.
