stitch::manage-design-systemvon Google Labs

Stitch Manage Design System Skill.

Ein Claude Code- und Codex-Skill für Brand- und Design-System-Arbeit: erstellt, aktualisiert und wendet Design-Systeme in Stitch über MCP-Tools an.

Brand & Design Systems
Design-System

OpenDesign herunterladen Anleitung ansehen

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

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

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

01 Was es tut

Was der Skill stitch::manage-design-system in Claude Code und Codex leistet

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

Verwaltet das Design System, das in Stitch als Source of Truth eines Projekts dient, mithilfe von MCP-Tools. Es ruft Projekt-Metadaten und Screen-Assets ab (list_projects, list_screens, get_screen, read_url_content), synthetisiert Tokens entweder aus vorhandenen Screens über den Skill design-md oder aus einer einfachen Beschreibung, schreibt .stitch/DESIGN.md und lädt anschließend das Markdown hoch und ruft create_design_system_from_design_md auf.

Ein verbindlicher Checkpoint erfordert die Zustimmung des Nutzers zu Anzeigename, Farben, Schriften und Rundung, bevor irgendetwas hochgeladen wird. Nach der Erstellung überträgt apply_design_system die Tokens auf vorhandene Screens ausschließlich anhand von Screen-Instance-IDs, und .stitch/metadata.json erfasst das Projekt, die Screens und eine Zusammenfassung des Design Systems.

Was er erzeugt

Eine für das Projekt generierte DESIGN.md-Designdatei.
Eine .stitch/metadata.json-Datei, die Projekt-ID, Titel, alle bekannten Screens und eine Zusammenfassung des Design Systems erfasst.
Design-Tokens auf Projektebene, die in Stitch vorgehalten werden und die spätere Generierungs-Prompts nicht erneut nennen müssen.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Projekt- und Screen-Assets abrufen
list_projects findet die Ziel-projectId, list_screens zeigt repräsentative Screens wie Home oder Main Dashboard, und get_screen liefert die Screenshot- und htmlCode-Download-URLs, bevor das HTML abgerufen wird.
02
Das Design System synthetisieren
Vorhandene Screens werden mit dem Skill design-md interpretiert; ein völlig neues Projekt oder eine direkte Beschreibung wird behandelt, indem die vagen Begriffe des Nutzers zunächst auf präzise Werte abgebildet werden.
03
DESIGN.md hochladen und das Design System erstellen
Das empfohlene Uploader-Skript kodiert das Markdown prozessintern Base64 und sendet es an den batchCreate-Endpunkt des Projekts, wodurch Ausgabe-Token-Limits umgangen werden; create_design_system_from_design_md läuft anschließend mit der projectId und der zurückgegebenen Screen-Instanz.
04
Das System auf vorhandene Screens anwenden
apply_design_system nimmt die projectId, die assetId und eine Liste von Screen-Instanzen entgegen, damit bereits erstellte Screens die gespeicherten Tokens übernehmen.

02 Finden Sie Ihren Favoriten

Wann die stitch::manage-design-system Skill verwendet werden soll

Verwenden Sie den Skill stitch::manage-design-system in Claude Code oder Codex, wenn es sich um Brand- und Designsystem-Aufgaben dieser Art handelt. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Ein Projekt, das eine verbindliche Designsprache benötigt, die zukünftige Screens zusammenhält.
Ein neues Stitch-Projekt ohne bisherige Screens, bei dem der Nutzer nur eine schriftliche Stilbeschreibung liefert.
Ein Design System aus bereits im Projekt vorhandenen Screens zurückzuentwickeln.

Grenzen kennen

Jede DESIGN.md über etwa 5 KB kann nicht über das direkte MCP-Upload-Tool übertragen werden und benötigt stattdessen den Skript-Weg.
Hinweise zur Beschreibung von Designelementen befinden sich nicht in dieser Datei; sie werden an ein anderes Skill delegiert.
Das vollständige Schema des designSystem-Objekts wird hier nicht ausgeschrieben; es befindet sich in einer separaten Referenzdatei.

Was Sie bereitstellen sollten

Die Stitch-Projekt-IDIdentifiziert, zu welchem Projekt das Design System gehört, und wird vom Upload-Skript sowie jedem nachfolgenden MCP-Aufruf benötigt.
Repräsentative ScreensScreens wie Home oder Main Dashboard dienen als visuelle Quelle, wenn Tokens aus einem bestehenden Projekt extrahiert werden.
Eine Stilbeschreibung in einfacher SpracheWird verwendet, wenn keine Screens vorhanden sind, zum Beispiel eine kurze Formulierung, die Farbpalette, Rundung und Schriftart benennt.
Skript-Argumente für den UploadDas Upload-Skript benötigt Projekt-ID, Dateipfad, API-Key und einen generated-by-Wert, die über die Befehlszeile übergeben werden.

03 Innerhalb des Skills

Regeln, die das stitch::manage-design-system Skill 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.

Vor dem Upload auf Benutzerfreigabe warten
Das Skill muss anhalten und nachfragen, bevor irgendetwas zu Stitch hochgeladen wird, dabei Anzeigename, Hauptfarben, Schriftarten und Rundung präsentieren und auf ausdrückliche Freigabe warten.
Beim Anwenden nur Id und sourceScreen senden
selectedScreenInstances enthält überhaupt keine Positions- oder Größenangaben, nur die beiden identifizierenden Felder.
design-system-Instanzen aus der Zielliste ausschließen
Instanzen vom Typ DESIGN_SYSTEM_INSTANCE werden herausgefiltert; nur echte Screens werden an apply_design_system übergeben.
Kennzeichnen, wer das Markdown generiert hat
Das generated-by-Argument benennt das Skill oder Tool, das die DESIGN.md erzeugt hat; wird es weggelassen, greift ein festes Standard-Label.
Das System direkt nach dem Upload erstellen
create_design_system_from_design_md wird unmittelbar nach dem Upload-Schritt aufgerufen, mit projectId und selectedScreenInstance.
Die Asset-Id aus dem Namen des Design Systems auslesen
list_design_systems liefert einen Namen in der Form assets/{assetId}; der Teil nach assets/ ist die assetId, die beim Anwenden verwendet wird.

04 In Betrieb nehmen

stitch::manage-design-system in Claude Code oder Codex installieren

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

stitch::manage-design-system zu Claude Code, Codex oder Ihrem Agent hinzufügen

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::manage-design-system

Generische skills-CLI-Form für plugins/stitch-design/skills/manage-design-system/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Bestätigen Sie, dass der Upload tatsächlich beide Identifikatoren zurückgegeben hat, bevor Sie fortfahren.
Prüfen Sie, dass sowohl das Upload-Skript als auch der create-Aufruf abgeschlossen sind, denn erst dann sind die Tokens auf Projektebene gespeichert.
Rufen Sie die Screen-Instanz-Ids über get_project ab, statt sie zu raten, damit apply_design_system gültige Ziele erhält.
Prüfen Sie die generierte DESIGN.md gegen die anderswo definierte Struktur, bevor Sie sie hochladen.

In OpenDesign importieren Sie stitch::manage-design-system über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend 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/manage-design-system/SKILL.md Inhaltsprü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 google-labs-code/stitch-skills-Repository, das 12 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für stitch::manage-design-system.
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

📥 AbrufVier aufeinanderfolgende Schritte, um Projekt-, Screen- und HTML-Assets über die Stitch-MCP-Tools zu ziehen.
🧠 Synthese aus BeschreibungWann das design-md-Skill wiederverwendet werden soll und wie vage Formulierungen in konkrete Werte übersetzt werden.
📝 AusgabestrukturBesagt, dass DESIGN.md der im design-md-Skill definierten Struktur folgt.
🚀 Design System in Stitch erstellen oder aktualisierenZweistufiger Upload- und Erstellungsablauf hinter einem verpflichtenden Bestätigungspunkt durch den Nutzer.
🎨 Design System auf Screens anwendenExakte JSON-Struktur sowie die drei Schritte zum Einholen der benötigten IDs.
📋 Projektmetadaten aktualisierenSchreibt .stitch/metadata.json mit Projekt-ID, Titel, Screens und Systemzusammenfassung.
Schema-ReferenzVerweist auf reference/tool-schema.md für das vollständige Schema des designSystem-Objekts.
💡 Best PracticesVerweist bei Empfehlungen zur Beschreibung von Designelementen auf das design-md-Skill.

Die eigene Beschreibung des Skills

"- Verwalten Sie Design-Systeme in Stitch mit MCP-Tools. Umfasst das Abrufen von Assets, Erstellen/Aktualisieren von Design-Systemen in Stitch und deren Anwendung auf Screens."

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

06 Vor der Installation

Fragen zum Skill stitch::manage-design-system

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

Wird etwas zu Stitch hochgeladen, ohne dass ich zustimme?

Nein. Es gibt einen expliziten Kontrollpunkt: Das Skill muss eine Zusammenfassung des zu erstellenden Design Systems vorlegen – mit Anzeigename, Kernfarben, Schriften und Rundung – und auf Ihre Zustimmung warten, bevor der Upload erfolgt.

Was ist, wenn meine DESIGN.md größer als ein paar KB ist?

Verwenden Sie stattdessen das empfohlene Uploader-Skript anstelle des direkten MCP-Tools. Es kodiert das Markdown intern als Base64 und sendet es an den batchCreate-Endpunkt, wodurch die Grenzen der Output-Token umgangen werden.

Woher stammen die IDs zum Anwenden eines Design Systems?

get_project liefert die screenInstances mit ihrer id und sourceScreen, wiederum nur auf echte Screens gefiltert.

Funktioniert es auch bei einem völlig neuen Projekt ohne jegliche Screens?

Ja. Wenn keine Screens vorhanden sind oder der Nutzer eine direkte Beschreibung liefert, ordnet das Skill die vagen Begriffe präzisen Werten zu – wählt konkrete Hex-Codes, Schriftfamilien und Rundungen – und erzeugt anschließend die DESIGN.md.

Stitch Manage Design System

Führen Sie stitch::manage-design-system auf einer echten Brand- und Designsystem-Aufgabe aus.

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

OpenDesign herunterladen Alle Skills durchsuchen