stitch::generate-designvon Google Labs

Stitch Generate Design Skill.

Ein Claude Code- und Codex-Skill für UI-Design: erzeugt, bearbeitet und variiert Screens in Stitch aus Text oder Referenzbildern.

Web & UI
Design-Datei

OpenDesign herunterladen Anleitung ansehen

google-labs-code/stitch-skills · plugins/stitch-design/skills/generate-design/SKILL.mdSKILL.md

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

Front Matter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 10.959 Zeichen insgesamt

01 Was es tut

Was der stitch::generate-design Skill in Claude Code und Codex tut

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill steuert Stitch MCP über vier Abläufe: Erzeugen eines neuen Screens aus Text, Nachbilden eines Bildes oder Mockups, Bearbeiten eines vorhandenen Screens und Erzeugen von Varianten. Vor jedem Generierungs- oder Bearbeitungsaufruf durchläuft er eine Prompt-Verbesserungs-Pipeline, die das Projekt und das Design System auflöst, vage Formulierungen durch UI/UX-Terminologie aus seinen Design-Mappings ersetzt und den Prompt anhand von Layout, Inhalt und Struktur formatiert – mit einer Vorlage, die die Abschnitte PLATFORM und PAGE STRUCTURE enthält.

Visuelles Styling bleibt auf Projektebene, daher dürfen Generierungs-Prompts keine Hex-Codes, Schriften oder Rundungswerte enthalten. Nach jedem Aufruf wird KI-Feedback angezeigt, und Assets werden nach .stitch/designs herunterladen.

Was er erzeugt

Das HTML und der Screenshot des erzeugten Screens, herunterladen in das Verzeichnis .stitch/designs.
Die von outputComponents zurückgegebene KI-Textbeschreibung und Vorschläge, die dem Benutzer angezeigt werden.
Varianten-Screens für die gewählte Richtung, in Stapeln von eins bis fünf.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den Prompt verbessern, bevor irgendetwas anderes geschieht
Die Pipeline ist verpflichtend, nicht optional: Der Agent schreibt die Anfrage des Benutzers um, bevor er ein Stitch-Generierungs- oder Bearbeitungstool aufrufen darf.
02
Prüfen, was das Projekt bereits stylt
Wenn das Projekt bereits ein Design System besitzt, werden Farben, Schriften und Rundungen auf Projektebene angewendet, sodass der verbesserte Prompt visuelles Styling vollständig auslassen muss.
03
Den Prompt als Plattform plus Seitenabschnitte formatieren
Neue Screens folgen einer Vorlage, die zuerst den Gesamtzweck angibt, dann PLATFORM, dann eine durchnummerierte PAGE STRUCTURE von Header bis Footer.
04
Einen der vier Abläufe auswählen
Die Anfrage wird an Generate from Text, Generate from Image, Edit oder Generate Variants weitergeleitet, bevor irgendein Tool aufgerufen wird.

02 Finden Sie Ihren Favoriten

Wann Sie den stitch::generate-design-Skill verwenden

Verwenden Sie den stitch::generate-design Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Einen völlig neuen Screen aus einer schriftlichen Beschreibung der Seite starten.
Etwas nachbilden, das Sie bereits als Bild, Screenshot oder Mockup haben.
Eine gezielte Änderung an einem Screen vornehmen, der im Projekt bereits existiert.
Alternative Layouts, Farbschemata oder Texte für einen vorhandenen Screen erkunden.

Grenzen kennen

Es werden keine Screens generiert, bevor ein Design System existiert: Falls das Projekt keines hat, wird die Arbeit zunächst an den Skill manage-design-system übergeben.
Ein Bild wird hier nicht hochgeladen; das Bild wird zunächst über den Upload-Skill zu Screen-Inhalt und erst danach mit Edits verfeinert.

Was Sie bereitstellen sollten

InputDies ist das, was die Enhancement-Pipeline in einen strukturierten Stitch-Prompt umschreibt.
Das ZielprojektDer Agent sucht das Projekt anhand der id, und erstellt nur eines, wenn kein passendes Projekt existiert.
Der Screen für Edits oder VariantenEdits und Varianten benötigen sowohl die projectId als auch die screenId, die durch das Auflisten oder Abrufen von Screens gefunden werden.

03 Innerhalb des Skills

Regeln, die der Skill stitch::generate-design Claude Code und Codex vorgibt

6 konkrete Anweisungen, Vorgaben und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Kein Theme-Leck in Generierungs-Prompts
Niemals Hex-Codes, Schriftnamen oder Farbrollen in einen Generierungs-Prompt einfügen; das Design System übernimmt sämtliches visuelles Styling und löst Duplizierungskonflikte.
Hex-Codes nur beim Editieren
Exakte Hex-Werte sind für präzises Farbmatching in Edit-Prompts erlaubt – dem einzigen Ort, an dem das Verbot für Generierungs-Prompts nicht gilt.
outputComponents immer sichtbar machen
Nach jedem Stitch-Tool-Aufruf muss der Agent dem Nutzer die zurückgegebene Text Description und die Suggestions zeigen, nicht nur den resultierenden Screen.
Bearbeiten statt neu Generieren
Eine vollständige Neugenerierung ist einem grundlegend falschen Layout vorbehalten; alles andere sollte über gezielte Edits laufen.
Lokale Kopien nach einem Edit überschreiben
Die aktualisierten HTML- und Screenshot-URLs werden erneut über die vorherigen Dateien heruntergeladen, damit die lokalen Dateien die neuesten Edits widerspiegeln.
.stitch/metadata.json synchron halten
Nach dem Herunterladen von Assets wird die metadata mit geänderten Screen-Titeln oder neuen Screen-IDs aktualisiert; die Datei erfasst alle Screens, Gerätetypen und Design-System-Informationen.

04 In Betrieb nehmen

Installieren Sie stitch::generate-design in Claude Code oder Codex

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

Fügen Sie stitch::generate-design zu Claude Code, Codex oder Ihrem Agent hinzu

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design

Generische skills-CLI-Form für plugins/stitch-design/skills/generate-design/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Sehen Sie sich den Ausgabe-Screen an und bestätigen Sie, dass die gewünschten Änderungen tatsächlich angekommen sind.
Wenn das Ergebnis nicht exakt den Erwartungen entspricht, fahren Sie im Edit-Flow fort statt neu zu generieren; wiederholen Sie den Vorgang mit einem neuen, spezifischen Prompt, wenn mehr Feinschliff nötig ist.
Prüfen Sie vor dem Generieren, ob für das Projekt ein Design System existiert.

Importieren Sie in OpenDesign stitch::generate-design über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill-Datei: plugins/stitch-design/skills/generate-design/SKILL.md Inhalts-Prüfsumme bei Verifizierung aufgezeichnet; Commit 0337446
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 8.304 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository google-labs-code/stitch-skills, das 12 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für stitch::generate-design.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

🎨 Prompt Enhancement PipelineKontext analysieren, vage Begriffe ersetzen, den Prompt strukturieren, KI-Erkenntnisse sichtbar machen
SchritteModusauswahl sowie Abläufe für Text, Bild, Bearbeitung und Varianten mit ihren Tool-Aufrufen
💡 TippsStrukturell vorgehen, Inhalt zuerst, iteratives Feinschliff, kein Theme-Leck, gezielte Änderungen
📚 ReferenzenDesign-Zuordnungen, Prompting-Schlüsselwörter und ein Vorher/Nachher-Beispiel für einen verbesserten Prompt

Die eigene Beschreibung des Skills

"- Generieren Sie neue Screens aus Text-Prompts oder Bildern, bearbeiten Sie bestehende Screens mit Prompts und Design-System-Tokens und erstellen Sie Design-Varianten mit Stitch MCP. Enthält Prompt-Enhancement-Pipeline, Design-Mappings, professionelle UI/UX-Terminologie, Design-Tokens und Theme-System-Fähigkeiten."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 10.959 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum stitch::generate-design Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Muss ich Tool-Namen konfigurieren, bevor es funktioniert?

Der Skill ruft Stitch-MCP-Tools wie list_projects, generate_screen_from_text und edit_screens auf, und sein eigener Hinweis besagt, dass Sie sich bei der Handhabung von MCP-Tool-Präfixen an Ihren System-Prompt halten sollen. Die Präfix-Konvention stammt also aus Ihrer Einrichtung, nicht aus dem Skill.

Wie unterscheiden sich Varianten von Bearbeitungen?

Bearbeitungen ändern den vorhandenen Screen; Varianten erkunden Alternativen dazu über das Tool generate_variants. Sie können die Richtung mit creativeRange steuern — REFINE für subtil, EXPLORE für ausgewogen, REIMAGINE für radikal — und die Aspekte einschränken oder leer lassen für alle.

Kann ich statt von einer Beschreibung von einem Screenshot oder Mockup ausgehen?

Ja. Das Bild wird an den upload-to-stitch Skill übergeben, um es in das Projekt einzufügen, danach findet der Agent die neue screenId und verfeinert das Design mit einem Bearbeitungs-Prompt, der beschreibt, was angepasst oder neu erstellt werden soll.

Stitch Generate Design

Führen Sie stitch::generate-design für eine echte UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie stitch::generate-design über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen