Tools· Design & Kreativ

    Stitch

    KI-Design-Tool von Google Labs, das aus Textbeschreibungen, Skizzen oder Bildern UI-Wireframes und mehrstufige Screen-Flows erzeugt, mit Export nach Figma oder als Frontend-Code.

    gestaltendgenerierendausführbarFreemium

    Beschreibung

    Stärken

    Schneller Einstieg
    Nutzbar mit einem bestehenden Google-Konto, ohne Einarbeitung oder separate Installation.
    Vielfältige Exportformate
    Ausgabe als HTML, Tailwind, Vue, Angular, Flutter oder SwiftUI sowie Übergabe an Figma.
    Mehrere Screens in einem Durchgang
    Bis zu fünf zusammenhängende Ansichten entstehen gleichzeitig, dadurch ein zusammenhängender Flow statt einzelner Bilder.
    Gemeinsames Arbeiten
    Ein Projekt lässt sich per Link teilen, mehrere Personen bearbeiten denselben Entwurf gleichzeitig.

    Einschätzung

    KI-Funktionen

    • Vibe Design Erzeugt Layouts aus einer Beschreibung von Geschäftsziel und gewünschter Nutzerwahrnehmung, statt aus einzelnen Vorgaben Schritt für Schritt.
    • Design Agent Verfolgt den Fortschritt eines Projekts über mehrere Iterationen und schlägt darauf aufbauend logische Folge-Screens vor.
    • Multimodaler Input Verarbeitet Text, Skizzen, Bilder und Code gleichermaßen als Ausgangspunkt für einen neuen Entwurf.
    • Sprachsteuerung Änderungen und neue Varianten lassen sich per Sprachbefehl anfordern, auf dem Desktop nutzbar.
    • Interaktive Prototypen Statische Screens lassen sich in klickbare Abläufe verwandeln und direkt im Tool durchspielen.
    • Design-System-Import Bestehende Designsysteme lassen sich über eine DESIGN.md-Datei oder direkt von einer Website einlesen, damit neue Screens zum vorhandenen Look passen.

    Wofür geeignet

    • Schnelle Wireframes und Screen-Konzepte aus einer reinen Textbeschreibung, ohne bei null in einem Design-Tool zu beginnen
    • Frühe UI-Ideation für neue Produkte oder Feature-Flows, vor der Anwendung eines bestehenden Designsystems
    • Mehrere Screen-Varianten parallel durchspielen, um eine Gestaltungsrichtung zu finden
    • Übergabe von Konzepten an Figma oder direkt in Frontend-Code als Ausgangspunkt für die Weiterarbeit
    • Weniger geeignet für Weniger geeignet als Ersatz für ein vollwertiges Design-Tool bei der finalen, pixelgenauen Ausarbeitung komplexer Multi-Screen-Flows

    Einschränkungen und Hinweise

    • Monatliches Kontingent Der kostenlose Plan ist auf über 300 Standard- und über 150 experimentelle Generierungen pro Monat begrenzt.
    • Komplexe Flows brauchen Iteration Bei Multi-Screen-Flows mit vielen Zuständen sind meist mehrere Durchgänge nötig, für die pixelgenaue Ausarbeitung bleibt ein vollwertiges Design-Tool die robustere Wahl.
    • Code vor dem Einsatz prüfen Der exportierte Code ist als Ausgangspunkt gedacht und sollte vor dem produktiven Einsatz von einer Entwicklerin oder einem Entwickler durchgesehen werden.
    • Eingeschränkte Versionierung Es gibt keine eigene Versionshistorie über die automatische Speicherung hinaus.
    • Experimenteller Status Als Google-Labs-Produkt ändern sich Funktionsumfang, Kontingente und Preismodell erfahrungsgemäß häufig.

    Quick Start

    1. Auf stitch.withgoogle.com mit einem bestehenden Google-Konto anmelden.
    2. Ein neues Projekt anlegen und den gewünschten Screen oder Screen-Flow in eigenen Worten beschreiben, per Text oder Sprache.
    3. Aus den generierten Varianten eine Richtung auswählen und per Chat gezielt weiter verfeinern.
    4. Bei Bedarf ein bestehendes Designsystem importieren, damit neue Screens zum eigenen Look passen.
    5. Ergebnis als Code-Export sichern oder an Figma übergeben für die Weiterarbeit.

    Tipps

    • Prompts konkret formulieren: Eine genaue Beschreibung mit Layout-Elementen liefert bessere Ergebnisse als eine allgemeine Anfrage.
    • Kleine Textkorrekturen direkt im Editor vornehmen, statt dafür eine neue Generierung anzustoßen.
    • Für zusammenhängende Abläufe gleich einen Multi-Screen-Flow anfragen, statt einzelne Screens separat zu erzeugen.
    • Ein bestehendes Designsystem früh importieren, dann bleiben auch erste Entwürfe näher am eigenen Look.
    • Exportierten Code vor dem produktiven Einsatz von einer Entwicklerin oder einem Entwickler gegenlesen lassen.

    Zugang

    Stand: · Angaben zu Preisen, Tarifen und Funktionen sind eine Momentaufnahme. Vor einer Entscheidung lohnt der Blick auf die Anbieterseite.

    Im Workshop wird daraus Ihre Methode.

    Wer diesen Prozess einmal laufen sieht, will als Nächstes den Agenten dahinter. Das bauen wir im Workshop Vom Prozess zum Agenten.

    Workshops ansehen

    Gespräch statt Pitch

    Erst verstehen, dann entscheiden. Wir nehmen uns Zeit für ein erstes Gespräch, ohne Verkaufsdruck, ohne Verpflichtung.

    Gespräch vereinbaren