Stitch: Einsatz von KI zur schnellen Erstellung von Anwendungsoberflächen und Code

Stitch ist ein KI-gestütztes Tool für das Oberflächendesign von Google Labs, das Benutzern dabei helfen soll, Ideen schnell in Oberflächen- und Front-End-Code für mobile oder Webanwendungen umzusetzen. Benutzer geben einfach eine Textbeschreibung ein oder laden ein Bild hoch, und Stitch generiert ein responsives Oberflächendesign mit HTML/CSS-Code, das direkt verwendet oder zur weiteren Bearbeitung in Figma exportiert werden kann. Das Tool basiert auf dem Gemini 2.5 Pro-Modell und unterstützt mehrere Designstile und schnelle Iterationen, wodurch es sich für Entwickler, Designer und Startup-Teams zur schnellen Erstellung von Prototypen eignet. Stitch befindet sich derzeit in der öffentlichen Beta-Phase und kann kostenlos genutzt werden, erfordert jedoch ein Google-Konto, um sich anzumelden und kann Nutzungseinschränkungen unterliegen.

Funktionsliste

• Generierung von SchnittstellendesignSchnelles Generieren von UI-Layouts für mobile oder Web-Anwendungen über Textaufforderungen oder Bildeingaben.
• Code-AusfuhrAutomatisches Generieren von sauberem HTML/CSS-Code mit Unterstützung für Frameworks wie React, Flutter usw. für Produktionsumgebungen.
• Integration von FigmaUnterstützung für den Export von Entwürfen direkt nach Figma zur Zusammenarbeit im Team und zur weiteren Optimierung.
• reaktionsfähiges DesignGenerieren Sie Schnittstellen für mehrere Geräte, um sicherzustellen, dass sie auf verschiedenen Bildschirmgrößen gut angezeigt werden.
• Multimodell-AuswahlBenutzer können zwischen den Modellen Gemini 2.5 Pro und Gemini 2.5 Flash für unterschiedliche Leistungsanforderungen wählen.
• Iterative OptimierungUnterstützung für die Anpassung von Designdetails wie Farbe, Layout oder Komponentenstile über dialoggesteuerte Eingabeaufforderungen.
• BildbearbeitungEine professionelle Oberfläche kann auf der Grundlage hochgeladener Skizzen oder Referenzbilder erstellt werden, um Layouts und Stile zu erkennen.
• Unterstützung der BarrierefreiheitGenerierung von WCAG 2.2-konformem Code mit automatischen ARIA-Tags zur Verbesserung der Barrierefreiheit.

Hilfe verwenden

Zugang & Anmeldung

Um Stitch zu nutzen, müssen die Nutzer https://stitch.withgoogle.com besuchen und sich mit einem Google-Konto anmelden. Die Website wird direkt im Browser ohne zusätzliche Installation ausgeführt. Für eine optimale Kompatibilität wird Chrome oder Edge empfohlen. Nach der Anmeldung zeigt die Seite eine übersichtliche Oberfläche mit einem Eingabefeld und einer Option zum Hochladen eines Bildes.

Erstellen der ersten Schnittstelle

1. EingabeaufforderungGeben Sie die Designanforderungen in das Textfeld auf der Startseite ein. Geben Sie zum Beispiel ein: "Entwerfen Sie eine mobile App-Schnittstelle für eine Buchhandlung mit minimalistischem Stil, weißem Hintergrund und blauen Schaltflächen". Die Aufforderung kann sehr allgemein gehalten sein (z. B. "eine laufende App") oder spezifisch (z. B. "eine E-Commerce-Schnittstelle mit einer Navigationsleiste, einer Suchfunktion und einer Produktliste"). Es wird empfohlen, mit einer einfachen Beschreibung zu beginnen und sich dann nach unten vorzuarbeiten. [](https://discuss.ai.google.dev/t/stitch-prompt-guide/83844)
2. Auswahl von AI-ModellenBenutzer können zwischen Gemini 2.5 Pro (für komplexe Anforderungen) und Gemini 2.5 Flash (schneller) wählen. Anfängern wird empfohlen, das Pro-Modell für genauere Ergebnisse zu verwenden.
3. Entwurf generierenKlicken Sie auf die Schaltfläche "Entwürfe generieren" und Stitch erstellt in wenigen Sekunden einen oder mehrere Entwürfe der Schnittstelle. Das Ergebnis wird rechts auf der Seite angezeigt, mit Vorschaubildern und Interaktionskomponenten.

Editieren und Optimieren

Nach der Erstellung der Schnittstelle kann der Benutzer sie auf folgende Weise anpassen:

• Dialog-EditorKlicken Sie auf die Schaltfläche "Bearbeiten", um zum Bereich für die Texteingabe zu gelangen, und geben Sie die gewünschten Änderungen ein, z. B. "Schaltflächenfarbe in Lila ändern" oder "Seitenleiste hinzufügen". Stitch generiert die Oberfläche entsprechend der Eingabeaufforderung neu.
• manuelle EinstellungBenutzer können bestimmte Komponenten (z. B. Schaltflächen, Navigationsleisten) in der Vorschauoberfläche auswählen und den Stil, die Abstände oder die Schriftarten über das Seitenpanel anpassen.
• Multibildschirm-DesignWenn Sie mehrere Seiten generieren müssen (z.B. eine Startseite und eine Detailseite für eine App), beschreiben Sie im Bearbeitungsmodus explizit "Nächste logische Seite generieren" und Stitch setzt den Designstil basierend auf dem Kontext fort.

Muster und Codes exportieren

1. Nach Figma exportierenWenn Sie auf die Schaltfläche "In Figma einfügen" klicken, wird der Entwurf automatisch in eine Figma-kompatible Ebenenstruktur umgewandelt, die für die Zusammenarbeit mit dem Designteam geeignet ist. Hinweis: Der Figma-Export wird derzeit nicht für Entwürfe unterstützt, die auf einer Bildeingabe basieren, daher müssen Sie auf ein Funktionsupdate warten.
2. Code für die AusfuhrWählen Sie die Option "Code exportieren" und Stitch generiert je nach Bedarf HTML/CSS-Code oder React-, Flutter- oder anderen Framework-Code. Der Code enthält responsive Layouts und ARIA-Tags, so dass er sich für die direkte Verwendung in der Entwicklung eignet. Benutzer können den Code zur weiteren Bearbeitung in eine IDE (z. B. VS Code) kopieren.
3. Speichern von ArtikelnWenn Sie eingeloggt sind, wird der Entwurf automatisch in Ihrem Google-Konto gespeichert, damit Sie ihn später leicht aufrufen und ändern können.

Featured Function Bedienung

• Bild-EingabeKlicken Sie auf die Schaltfläche Hochladen und wählen Sie eine Skizze oder ein Referenzbild aus (z. B. ein handgezeichnetes Drahtgitter). Stitch analysiert das Layout und die Elemente im Bild, um ein genaues UI-Design zu erstellen. Es wird empfohlen, dass das Bild klar ist und gut definierte UI-Elemente enthält.
• Responsive VorschauSobald das Design erstellt ist, wechseln Sie in den Vorschaumodus, um zu sehen, wie die Oberfläche auf Handys, Tablets und Desktop-Geräten aussieht. Die Benutzer können die Auflösung anpassen, um verschiedene Bildschirmgrößen zu testen.
• Optimierung der ZugänglichkeitDer von Stitch generierte Code enthält automatisch ARIA-Tags, um sicherzustellen, dass die Schnittstelle WCAG 2.2-konform ist. Benutzer können die Zugänglichkeitsbewertung (durchschnittlich 98,61 TP3T) mit dem Lighthouse-Tool nach dem Exportieren des Codes überprüfen.

Tipps

• ausdrückliche BeschreibungDie Einbeziehung bestimmter Stile (z. B. "Modernes, dunkles Thema") und Funktionen (z. B. "Suchleiste und Kartenlayout einbeziehen") in die Eingabeaufforderungen verbessert die Qualität der Erstellung.
• fortschreitende Iteration: Beginnen Sie mit einfachen Tipps und fügen Sie nach und nach Details hinzu, um zu vermeiden, dass Sie komplexe Anforderungen auf einmal eingeben.
• ReferenzbeispielDurchsuchen: https://mobbin.com或Dribbble获取灵感, um in Verbindung mit Stitch eine maßgeschneiderte Oberfläche zu erstellen.

caveat

• Browser-KompatibilitätEinige Browser können dazu führen, dass das Bild nicht geladen wird. Wir empfehlen die Verwendung der neuesten Version von Chrome.
• Beschränkungen der NutzungAls experimentelles Tool für Google Labs kann Stitch ein Limit für die Anzahl der Generierungen pro Tag haben, und Sie müssen sich in Ihrem Google-Konto anmelden, um mehr Kontingente zu erhalten.
• Design-EinschränkungenGenerierte Ergebnisse können zu einem generischen Stil tendieren, so dass der Benutzer detaillierte Angaben machen muss, um die Markenkonsistenz zu gewährleisten.

Anwendungsszenario

1. Schnelles Prototyping
   Startups oder unabhängige Entwickler können mit Stitch schnell eine MVP-Oberfläche (Minimum Viable Product) erstellen und Designzeit sparen. Geben Sie zum Beispiel ein: "Entwerfen Sie eine Homepage für eine Fitness-App mit einer Liste von Kursen und einer Schaltfläche zum Abonnieren", und Sie erhalten in wenigen Minuten eine brauchbare Benutzeroberfläche und Code.
2. Teamarbeit
   Das Designteam kann den von Stitch generierten Erstentwurf nach Figma exportieren, um ihn gemeinsam mit seinen Mitgliedern zu optimieren, was sich für einen schnellen Konzeptnachweis oder die Präsentation von Prototypen beim Kunden eignet.
3. UI-Design lernen
   Neulinge können sich mit Layout, Farbschemata und Komponentendesign vertraut machen, indem sie einfache Eingabeaufforderungen eingeben und die von Stitch generierte professionelle Oberfläche beobachten.
4. Plattformübergreifende Entwicklung
   Entwickler können mit Stitch responsiven Code generieren, der direkt in React- oder Flutter-Projekten verwendet werden kann, wodurch sich der manuelle Programmieraufwand verringert.

QA

1. Ist Stitch kostenlos?
   Ja, Stitch ist derzeit als experimentelles Tool für Google Labs kostenlos, erfordert aber ein Google-Konto zur Anmeldung und kann Nutzungsbeschränkungen haben.
2. Ist es möglich, mehrseitige Bewerbungen zu erstellen?
   Kann. Der Benutzer muss in der Eingabeaufforderung ausdrücklich verlangen, dass mehrere Seiten generiert werden, oder die logischen Seiten Seite für Seite im Bearbeitungsmodus beschreiben, und Stitch wird die Designkonsistenz beibehalten.
3. Wie hoch ist die Qualität des generierten Codes?
   Der Code ist sauber und WCAG 2.2-konform, unterstützt Frameworks wie React und Flutter und ist für Produktionsumgebungen geeignet, aber komplexe Projekte können eine manuelle Optimierung erfordern.
4. Welche Browser werden unterstützt?
   Für ein optimales Erlebnis wird Chrome oder Edge empfohlen. Bei einigen Browsern kann es zu Problemen beim Laden der Bilder kommen, das Team arbeitet an einer Lösung.
5. Wie kann die Qualität der Erzeugung verbessert werden?
   Verwenden Sie spezifische Aufforderungen mit Stil-, Farb- und Funktionsbeschreibungen. Eine schrittweise Iteration ist effektiver als eine komplexe einmalige Eingabe.