Stitch + AI Studio: Über Vibe Design & Vibe Coding einen eigenen Chatbot entwickeln
✅ Freie Nutzung von Text & Abbildungen für Premium-User
Stitch ist eine weitere Plattform von Google, die es ermöglicht, mit einem Vibe Design moderne Vorlagen zu generieren, die dann zum Beispiel in Webseiten integriert werden können. Die Anmeldung erfolgt über ein Google-Konto, wodurch der einfache Wechsel zu Coding-Plattformen wie dem AI Studio gewährleistet ist, also vom Vibe Design über das Vibe Coding bis hin zur Nutzung einer konkreten Anwendung. Stitch ist gut kostenlos nutzbar.
Wir steigen direkt in Stitch ein und setzen einen Prompt, um einen „Studi-Chatbot“ für diese Webseite hier zu entwickeln. Der Prompt ist schon in das Feld eingetragen. Die Erstellung läuft wie bei NotebookLM oder dem Gemini-Chat über Googles Top-Sprachmodell Gemini. Die untere Abbildung zeigt den automatisch verfeinerten Prompt, der auf der linken Seite im Canvas jederzeit im Verlauf abrufbar ist. Kurze Erklärung: Wir designen den Chatbot in Stitch (Vibe Design), aber eine Nutzung ist in dieser Umgebung nicht möglich. Dafür wird später ins AI Studio (Vibe Coding) gewechselt.
Nach der Fertigstellung wird ein großes Canvas dargestellt, also eine Arbeitsoberfläche, mit dem blauen Chatbot-Interface auf der rechten Seite und links dem Template, um Designänderungen vornehmen zu können. Wichtig ist rechts die Werkzeugliste mit dem normalen Mauszeiger ganz oben, unterhalb ein Editor mit Stift-Icon und darunter eine Hand (Pan). Die einzelnen Designs lassen sich über den Mauszeiger anklicken, der Text in einem Template ist über den Editor änderbar und die Hand bewegt die Vorlagen in alle Richtungen.
Unterhalb der Werkzeugleiste ist zudem der Zoom einstellbar, um übersichtlicher arbeiten zu können. Dies sind die Grundvoraussetzungen, um mit Stitch fließend Projekte durchzuführen. Also gerne erstmal diese Funktionen testen, bevor es losgeht 😉
Da ich mir beim blauen Design des Interfaces nicht ganz sicher war, habe ich den Chatbot einfach mit Rechtsklick und „Duplizieren“ 1:1 noch einmal dargestellt, aber die Farbe auf Gelb geändert. Dies geht ganz ohne KI. Stitch ist sozusagen eine „Semi-KI-Plattform“, die über das Language Model KI-generierte Designs erstellen kann und dann wie etwa bei der Anpassung von Schrift, Farbe etc. eher „Old School“ läuft, wie wir dies von Adobe, Power Point & Co. kennen.
Ja, ein Duplikat ließe sich auch unten über die Promptleiste erstellen, aber dies wäre ineffizient, denn der Vorgang braucht länger und benötigt Tokens. Ein kurzer Rechtsklick mit der Maus auf das blaue Interface und anschließend mit einem Linksklick ein Duplikat erstellen, geht wesentlich schneller und ist kostenschonender. Der Mix aus KI & „normalen“ Anpassungen ist wohl entscheidend. Dies gilt es herauszufinden.
Im weiteren Verlauf wechsle ich das Design von hell zu dunkel. Dies klappt ebenfalls rechts unten über das Halbmond-Icon. Welchen Modus man wählt, ist natürlich Geschmackssache und auch abhängig von der Uhrzeit. Damit man die beiden Chatbot-Interfaces näher betrachten kann, wird der Zoom-in verwendet, und schon lassen sich Text und Starter-Question besser bewerten. Der Studierenden-Chatbot ist sehr einfach gehalten, mit einer Standardaussage und vier Gesprächsaufhängern zu Beginn, die User anklicken können und daraufhin eine Antwort erhalten sollten. Nein, dies testen wir noch nicht, denn in Stitch kann das nicht ausgeführt werden. Die Vorlagen sind lediglich md-Dateien, die sich gezielt anpassen ließen. Hierbei handelt es sich um die Auszeichnungssprache Markdown (md).
Da mir das ursprüngliche Design in Blau besser gefallen hat, möchte ich dies in der Praxis mit einem Sprachmodell testen. Hierzu klicke ich auf die Vorlage, die markiert ist und im Anschluss oben rechts auf den Button „Exportieren“. Nun gibt es die Möglichkeit, das Template von Stitch rüber ins AI Studio von Google zu übertragen. Dies läuft über das offizielle Google Konto.
Nachdem ich den Export unten über das Feld „Mit AI Studio erstellen“ bestätigt habe, öffnet sich automatisch ein neues Browserfenster mit der Verlinkung auf den Built-Bereich des AI Studios, in dem man seine eigenen Apps bauen kann. Alles kostenlos. Zusätzlich wurde ein passender Prompt formuliert und auch die Dateien aus Stitch wurden direkt in die Promptleiste hochgeladen. Sehr praktisch!
Um das Vibe Coding über das AI Studio und das Sprachmodell Gemini zu starten, klickt man einfach in das Textfeld rein und danach rechts unten auf „Built“. Der Entwicklungsprozess startet direkt und nach wenigen Minuten ist die App im Stile unseres Support-Chatbots für Studierende fertig. Es ist gut erkennbar, dass das Design aus Stitch 1:1 in eine nutzbare App im AI Studio umgewandelt wurde. Vom Vibe Design zum Vibe Coding. Aber funktioniert das Interface denn überhaupt?
In der Nahaufnahme wird gut sichtbar, dass wirklich alles gut umgesetzt wurde, auch die Thematik rund um Unidigital wird korrekt in der ersten Information angezeigt. Darunter die vier Starter Question wie „Find my schedule“ „Library access“ etc. Die Bezeichnung unseres Chatbots lautet wie auch drüben in Stitch „Student Support“. Die Verbindung der beiden Google-Umgebungen scheint zu funktionieren und zwar sehr einfach.
Den Chatbot möchte ich nicht ganz allgemein, sondern sehr gezielt im Rahmen eines konkreten Use Cases verwenden. Hierzu habe ich über ChatGPT einen fiktiven KI-Guide für Studierende verfasst, diesen in ein PDF gewandelt und links unten im AI Studio über das „Plus-Symbol“ mit der Upload-Funktion in unsere App reingeladen. Der Bot soll sich ausschließlich auf dieses PDF als einzige Wissensgrundlage bei seinem Output bzw. den Antworten fokussieren. Mit der Bestätigung rechts unten auf Enter fängt Gemini an, die App anzupassen und gibt in Kürze die Version 2 aus. Der untere Screenshot zeigt meinen Prompt, auch mit dem Hinzufügen des Roboter-Emojis in den Titel.
Gemini hat den PDF-Inhalt und insgesamt den Prompt im AI Studio optimal umgesetzt, denn nicht nur der App-Titel sieht nun schicker aus, sondern auch die Sprache des Interfaces ist automatisch ins Deutsche übertragen mit der thematisch korrekten Anpassung der vier Starter Question. Dies ist ein sehr gutes Beispiel dafür, dass man eben nicht mehr alles bis ins kleinste Detail in seinem Prompt formulieren muss, bis denn die KI alles den Wünschen entsprechend gebaut hat. Mittlerweile findet ganz selbstverständlich ein „Mitdenken“ der Sprachmodelle statt. Solche Apps lassen sich von Laien problemlos in einfacher Sprache und mit wenig Textinput entwickeln.
Nun wird der Bot endlich getestet und zwar mit einem simplen Button-Klick auf die Starter Question „Wie muss ich KI-Nutzung offenlegen?“ Das Ergebnis ist zufriedenstellend, denn ich bekomme eine passende Antwort und diese stammt ausschließlich aus dem PDF, worauf sich Gemini bezogen hat. Ich kann auch weitere Fragen stellen und allgemeines Wissen einholen, aber dies möchte ich nicht weiter demonstrieren.
Stattdessen nehme ich noch eine Änderung an der App vor und starte somit die Version 3. Alle Versionen, also von 1 bis X, ließen sich in der Historie und dem Verlauf wiederherstellen, falls womöglich die Version 2 am besten war. Um stetig eine passende Quelle anzuführen, möchte ich, dass die Domain von Unidigital immer direkt über den Starter Question mit einer externen Verlinkung ausgegeben wird. Der Schriftzug soll dabei grün sein und sich somit von der allgemeinen Farbumgebung abheben.
Der untere Screenshot aus dem AI Studio zeigt, dass die Umsetzung sehr gut geklappt hat und auch der Link funktioniert. Es ließen sich theoretisch noch weitere Anpassungen vornehmen, um den Bot stets aktuell zu halten. Hier ist auch wieder maximale Kreativität gefragt, um herauszufinden, was ich denn potenziell alles so einstellen könnte.
Über das Google-Studio lassen sich die Apps veröffentlichen und teilen, damit weitere Interessierte diese begutachten und z.B. remixen können, falls ihnen eine Funktion fehlt und sie diese gerne mit nur einem Prompt hinzufügen möchten. Das geht im AI Studio oben über die Buttons „Remix“, „Share“ und „Publish“. Viel Spaß!
Ja, dieser Blogbeitrag erscheint auf den ersten Blick etwas herausfordernd, aber die Umsetzung geht recht einfach, da das Top-Sprachmodell Gemini sehr zuverlässig arbeitet, ob nun in Stitch oder im AI Studio. Man muss nicht mehr langwierig an X-Versionen prompten und zwischendurch Bugs beheben, die Zeit & Nerven kosten. Das Handling wird immer besser und solche KI-Umgebungen sind somit auch für Einsteiger gut geeignet. Übrigens lässt sich Stitch sehr gut ausschließlich über den Voice Mode steuern. Das macht Spaß!
Autor
