Vom Prompt zur UI mit Google Stitch

May 15, 2026 · 4 min read

Die meisten UI-Projekte kommen ins Stocken, bevor sie überhaupt richtig begonnen haben. Du hast eine klare Idee im Kopf, aber sie in ein Wireframe, Mockup oder Prototyp zu übersetzen, kostet Zeit, die du nicht immer hast. Google Stitch wurde entwickelt, um genau diese Lücke zu schließen.

Stitch wurde im Mai 2025 veröffentlicht und seitdem deutlich erweitert. Heute ist es ein vollständig AI-natives Design- und Prototyping-Canvas. Es unterstützt konversationelle UI-Generierung, Bild- und Wireframe-Eingaben, interaktive Multi-Screen-Prototypen, Voice-Workflows, DESIGN.md für die Portabilität von Designsystemen sowie SDK/MCP-Integration für die Übergabe an die Entwicklung. Dieser Artikel zeigt, wie du Stitch effektiv als Teil eines realen Frontend-Workflows einsetzen kannst.

Wichtige Erkenntnisse

Google Stitch wandelt Natural-Language-Prompts in UI-Layouts und Frontend-Scaffolding um, die als HTML und TailwindCSS exportierbar sind.
Ursprünglich mit Gemini 2.5 Pro gestartet, unterstützt Stitch inzwischen neuere Gemini-Modelle und behält den Konversationskontext über mehrere Iterationen hinweg bei.
Das Zoom-Out-Zoom-In-Prompting-Framework liefert deutlich bessere Ergebnisse als vage Einzeiler-Anfragen.
Funktionen wie Bildeingabe, Multi-Screen-Prototyping, DESIGN.md und MCP-Integration positionieren Stitch als Tool für die frühe Designphase, nicht als Figma-Ersatz.
Am besten geeignet für das initiale Wireframing und die strukturelle Exploration, bevor man sich auf ein vollständiges Designsystem oder eine produktive Codebasis festlegt.

Was Google Stitch tatsächlich leistet

Stitch ist ein KI-gestütztes Designwerkzeug, das Natural-Language-Prompts in strukturierte UI-Layouts umwandelt. Es generiert Screens, die du iterativ weiterentwickeln, zu interaktiven Flows verbinden und als HTML und TailwindCSS exportieren kannst.

Es ist kein produktionsreifer App-Generator. Es wird Figma nicht für hochwertige visuelle Feinarbeit ersetzen und auch nicht die Notwendigkeit eines Frontend-Entwicklers beseitigen. Was es aber gut macht: Es beseitigt das Leere-Leinwand-Problem und komprimiert frühe Designarbeit von Tagen auf Minuten.

Ursprünglich mit Gemini 2.5 Pro gestartet, unterstützt Stitch inzwischen neuere Gemini-Modelle und kann den Projektkontext im Verlauf der Entwicklung mitdenken, statt Prompts isoliert zu verarbeiten. Google beschreibt Stitch eher als AI-nativen Design-Workflow denn als klassisches Designwerkzeug.

Prompts schreiben, die brauchbare Ergebnisse liefern

Die Prompt-Qualität ist der größte Variablenfaktor im KI-gestützten UI-Design. Vage Prompts erzeugen generische Layouts. Spezifische Prompts erzeugen etwas, mit dem man tatsächlich arbeiten kann.

Ein bewährter Ansatz ist Zoom-Out-Zoom-In:

Zoom out — Kontext setzen: Produkttyp, Zielnutzer, Plattform (iOS-App, Web-Dashboard etc.)
Zoom in — den Screen definieren: Ziel, Layout-Hierarchie, Kernkomponenten, visuelle Constraints

Hier ein verdichtetes Beispiel für ein SaaS-Dashboard:

Context: Admin dashboard for a B2B project management SaaS. Users are operations managers reviewing team workload daily.

Screen goal: Show active project count, team capacity, and overdue tasks at a glance.

Layout: Sticky top nav, KPI cards row, workload chart (horizontal bar), overdue task list below.

Visual direction: Clean, data-dense, neutral palette, no decorative elements.

Constraints: Desktop-first, accessible text sizing, [WCAG 2.1](https://www.w3.org/TR/WCAG21/) contrast compliance.

Dieses Maß an Detailtiefe gibt der KI genügend Signale, um echte Layoutentscheidungen zu treffen, statt auf eine generische Vorlage zurückzufallen.

Sobald du ein erstes Ergebnis hast, verfeinere es mit Folge-Prompts. Stitch behält den Kontext über die gesamte Konversation hinweg bei, sodass du z. B. sagen kannst: “make the KPI cards more compact and switch to a dark background” — und Stitch wendet die Änderung konsistent an.

Wichtige Funktionen im Überblick

Bildeingabe: Lade eine Skizze, ein Whiteboard-Foto oder einen Screenshot einer bestehenden UI hoch. Stitch analysiert die Struktur und erzeugt daraus ein neues Layout. Hilfreich für Redesign-Projekte oder die schnelle Umsetzung grober Ideen.

Multi-Screen-Prototyping: Verbinde Screens miteinander und simuliere User-Flows. Stitch kann logische Folge-Screens basierend auf Navigationsmustern automatisch generieren, was frühe Stakeholder-Reviews erheblich beschleunigt.

DESIGN.md: Eine agentenlesbare Markdown-Datei, die die Regeln deines Designsystems speichert — Typografie, Color-Tokens, Spacing, Komponentenkonventionen. Google hat die DESIGN.md-Spezifikation offen veröffentlicht, sodass sie über kompatible KI-Tools und Workflows hinweg geteilt werden kann.

Code-Export: Stitch exportiert HTML und Frontend-Scaffolding, das die frühe Implementierungsarbeit beschleunigen kann. Du musst die Ausgabe weiterhin an deinen tatsächlichen Stack (React, Vue, SwiftUI etc.) anpassen. Das Stitch SDK stellt darüber hinaus die Stitch-Funktionalität für Agent-Workflows und MCP-artige Integrationen bereit.

Wo Stitch in einen realen Workflow passt

Stitch entfaltet sein Potenzial am besten in der frühen Iterationsphase: beim Erkunden von Layout-Richtungen, beim Validieren der Informationshierarchie und beim Erzeugen von etwas Konkretem, auf das man reagieren kann, bevor man sich auf ein vollständiges Designsystem oder eine Codebasis festlegt.

Für eine Einzelentwicklerin oder einen Einzelentwickler, die ein MVP bauen, kann Stitch die ersten beiden Wireframing-Runden vollständig ersetzen. Für ein Produktteam ist es ein schneller Weg, sich auf die Struktur zu einigen, bevor ein Designer das Ganze in Figma weiter verfeinert.

Die Ausgabe ist ein Ausgangspunkt, keine Ziellinie. Wer das so behandelt, profitiert wirklich von dem Tool.

Erste Schritte

Gehe auf stitch.withgoogle.com, formuliere einen strukturierten Prompt und wähle dein Medium (App oder Web).

Von dort aus iterierst du mit Folge-Prompts, verbindest Screens zu einem Flow und exportierst, sobald du zur Übergabe oder Implementierung bereit bist. Der Weg von der Idee zum funktionierenden Prototyp war noch nie kürzer.

Fazit

Google Stitch versucht nicht, deine Designwerkzeuge oder dein Designteam zu ersetzen. Es versucht, die Reibung beim Einstieg zu beseitigen — diese unangenehme Phase zwischen einer Idee und der ersten Version, die man sich tatsächlich ansehen, kritisieren und verbessern kann. Als Werkzeug für das frühe Denken mit gut strukturierten Prompts eingesetzt, verkürzt es den Weg vom Konzept zum klickbaren Prototyp dramatisch. Behandle die Ausgabe als Rohmaterial, verfeinere sie durch Iteration und übergib sie, wenn die Struktur stimmt.

FAQs

Nein. Stitch erzeugt Layouts und Prototypen schnell, aber es fehlen die Präzisionskontrollen, Komponentenbibliotheken, das Plugin-Ökosystem und die Kollaborationsfunktionen, die Figma zum Standard für Production-Design machen. Nutze Stitch für frühe Exploration und strukturelle Entscheidungen und wechsle dann zu Figma für visuelle Verfeinerung, Designsystem-Verwaltung und die Entwicklerübergabe.

Nicht direkt. Stitch exportiert Frontend-Scaffolding und HTML, das die frühe Implementierungsarbeit beschleunigen kann, aber du musst es weiterhin an dein Framework anpassen, State Management integrieren, Datenquellen anbinden und dein eigenes Designsystem anwenden. Betrachte den Export als Gerüst, das dir die initiale Markup-Arbeit erspart, nicht als fertige Anwendung.

Sehr spezifisch. Gib den Produktkontext, die Zielnutzer, die Plattform, das Screen-Ziel, die Layout-Hierarchie, die visuelle Richtung und alle Constraints wie Accessibility-Anforderungen an. Das Zoom-Out-Zoom-In-Framework funktioniert gut: Zuerst den groben Kontext etablieren, dann auf die Screen-Ebene fokussieren. Vage Prompts erzeugen generische Templates, an denen sich Iteration nicht lohnt.

DESIGN.md ist eine agentenlesbare Markdown-Datei, die die Regeln deines Designsystems erfasst, einschließlich Typografie, Color-Tokens, Spacing und Komponentenkonventionen. Der Import in Stitch hilft dabei, dass generierte Screens deiner etablierten visuellen Sprache folgen, statt auf generische Muster zurückzufallen. Außerdem macht es dein Designsystem portabel über KI-Tools hinweg, die das Format unterstützen.

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..