stitch::code-to-designvon Google Labs

Stitch Code to Design Skill.

Ein Claude Code- und Codex-Skill für UI-Design: wandelt Frontend-Code über statisches HTML und Design-System-Extraktion in ein Stitch-Design um.

Web & UI
Design-Datei

OpenDesign herunterladen Anleitung ansehen

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

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

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

01 Was es tut

Was der Skill stitch::code-to-design in Claude Code und Codex bewirkt

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

Wandelt eine bestehende Frontend-Codebasis (React + Vite, Next.js, Angular, Vue) in ein Stitch Design um, indem drei Skills verkettet werden: extract-static-html, extract-design-md und upload-to-stitch. Er richtet sich an Designer und Entwickler, die eine laufende App oder ein gebautes Web-Verzeichnis nach Stitch verschieben möchten, um dort weiter daran zu arbeiten.

Der Workflow extrahiert eine eigenständige HTML-Datei, schreibt ein Design System nach .stitch/DESIGN.md, legt das Design System in Stitch an und lädt anschließend das HTML als Screen hoch, der mit dem Routenpfad der Seite benannt ist. Dies ist der erforderliche Pfad für Speicher-, Migrations- oder Upload-Anfragen, und die HTML-Verifizierung ist optional und blockiert den Lauf nie.

Was er erzeugt

Eine eigenständige HTML-Datei, zum Beispiel /path/to/extracted/standalone.html.
Eine als DESIGN.md verfasste Beschreibung des Design Systems.
Ein zu Stitch hochgeladener Screen, dessen Name und Titel die Route identifizieren, aus der er in der Anwendung stammt.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Eine eigenständige HTML-Datei extrahieren
Übergibt an den Skill extract-static-html, der mit dem Build-Output oder einem laufenden Dev-Server wie Vite oder Angular CLI ng serve arbeitet und eine eigenständige HTML-Datei erzeugt.
02
Verifizierung anbieten, ohne zu pausieren
Nach der Extraktion teilen Sie dem Nutzer mit, wo sich die Datei befindet, damit er sie selbst im Browser prüfen kann, und der Lauf wird unabhängig davon mit dem nächsten Schritt fortgesetzt.
03
Die Quelle in ein Design-System analysieren
Der Skill extract-design-md liest die Komponenten, Stylesheets und Theme-Konfigurationen des Projekts, und das Ergebnis wird als Design-System-Datei ausgegeben.
04
Das Design-System in Stitch erstellen
Der Skill manage-design-system lädt DESIGN.md hoch und ruft create_design_system_from_design_md mit den erforderlichen Schemas auf.
05
Das HTML als Screen hochladen
Dasselbe Upload-Skript sendet das eigenständige HTML mit dem Stitch-API-Key und der projectId, wobei das title-Argument auf die Seitenroute gesetzt wird, damit der Screen in Stitch identifizierbar ist.

02 Finden Sie Ihren Favoriten

Wann Sie den stitch::code-to-design Skill verwenden

Verwenden Sie den stitch::code-to-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

Eine bestehende App, geschrieben in React + Vite, Next.js, Angular oder Vue, die der Nutzer nach Stitch verschieben und dort weiter verbessern möchte.
Eine Anfrage, die locker als speichern, migrieren oder hochladen formuliert ist, statt als explizite Konvertierungsaufgabe.
Ein Projekt, das bereits auf einem Vite-Dev-Server läuft oder über die Angular CLI ng serve bereitgestellt wird.
Ein Angular-Workspace, organisiert mit angular.json, externen .html-Templates, Theme-Dateien und Komponenten, die alle in die Design-System-Extraktion einfließen.

Grenzen kennen

Es gibt nichts Ausführbares, worauf verwiesen werden kann: Der Workflow benötigt entweder einen laufenden lokalen Dev-Server oder ein gebautes Web-App-Verzeichnis mit index.html und Assets.

Was Sie bereitstellen sollten

Die Ziel-Stitch-projectIdDie Uploads benötigen ein Zielprojekt; ist es unbekannt, muss es zunächst mit list_projects ermittelt werden.
Der Pfad zum extrahierten HTMLDie in Schritt 1 erzeugte eigenständige Datei muss zusammen mit dem API-Key und der projectId an den Upload-Schritt übergeben werden.
Die Projekt-QuelldateienKomponenten, Stylesheets und Theme-Konfigurationen sind das, was die Design-System-Analyse liest, um DESIGN.md abzuleiten.

03 Innerhalb des Skills

Regeln, die der Skill stitch::code-to-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.

Immer bei Speichern-, Migrieren- oder Hochladen-Intent verwenden
Jede Überführung bestehender Web-Apps oder React-/Angular-/Vue-Komponenten nach Stitch muss über diesen Skill laufen, selbst bei einem einfachen Speichern, da dies der einzige Weg ist, der zusätzlich das Design-System extrahiert und Assets verknüpft.
Das Design-System nach .stitch/DESIGN.md schreiben
Die Design-System-Datei liegt unter .stitch/DESIGN.md und muss der vom Skill extract-design-md definierten Struktur folgen.
Niemals bei der Verifizierung blockieren
Die Verifizierung des extrahierten HTML liegt beim Nutzer und ist optional; der Agent muss direkt mit dem Design-System-Schritt fortfahren, statt zu warten.
Den Design-System-Upload taggen
Beim Hochladen von DESIGN.md das Argument --generated-by 'stitch::code-to-design' übergeben, damit die Herkunft des generierten Artefakts erfasst wird.
Den HTML-Upload anders taggen
Der HTML-Upload verwendet den anderen Marker, --generated-by 'stitch::extract-static-html', nicht den für Code-to-Design.
Denselben API-Key für beide Uploads wiederverwenden
Der in Schritt 4 angegebene Stitch-API-Key ist derselbe Key, der für den HTML-Upload benötigt wird; es gibt keine zweite Anmeldeinformation.

04 In Betrieb nehmen

stitch::code-to-design 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::code-to-design 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::code-to-design

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

Dem Skill eine erste UI-Design-Aufgabe geben

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

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

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:

Öffnen Sie die extrahierte Datei in einem Browser, um zu bestätigen, dass die Seite wie erwartet dargestellt wird.
Wenn der Nutzer nach der Prüfung der Extraktion mit Problemen zurückkommt, beheben Sie diese, bevor Sie den Workflow fortsetzen.

Importieren Sie in OpenDesign stitch::code-to-design ü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/code-to-design/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 0337446
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 8.304 GitHub-Snapshot vom 2026-09-14 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::code-to-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

WorkflowWeist den Agent an, die aufgeführten Schritte zu befolgen, um vorhandenen Code zu konvertieren.
VoraussetzungenBenötigt einen laufenden Dev-Server oder ein gebautes App-Verzeichnis sowie eine Stitch-projectId.
SchritteFünf geordnete Schritte, die jeweils an einen anderen Skill oder ein Skript delegieren.

Die eigene Beschreibung des Skills

- Konvertieren Sie Frontend-Code (Vite, React, Angular, Vue usw.) in ein Stitch-Design, indem Sie statische HTML-Extraktion, Design-System-Extraktion und Datei-Upload verketten. Verwenden Sie diesen Skill **IMMER**, wenn die Absicht des Benutzers darin besteht, bestehende Web-Apps oder React/Angular/Vue-Komponenten in Stitch zu verschieben (z. B. Anfragen zum "Speichern", "Migrieren" oder "Hochladen"). Sie müssen diesen Skill auch für einfache "Speichern"-Operationen verwenden, da dies der einzige Weg ist, um sicherzustellen, dass das Design-System extrahiert und Assets ordnungsgemäß verknüpft werden.

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

06 Vor der Installation

Fragen zum Skill stitch::code-to-design

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

Lädt es nur einen Screen hoch, oder erstellt es auch das Design-System?

Beides. Die Datei DESIGN.md wird hochgeladen, und das Design-System wird in Stitch über den Workflow manage-design-system erstellt, der das Upload-Skript und den Aufruf create_design_system_from_design_md mit den erforderlichen Schemas verwendet.

Welcher Skill zieht das HTML eigentlich aus meiner App?

extract-static-html führt die Extraktion durch und erzeugt eine einzelne, in sich geschlossene HTML-Datei aus dem Build-Output oder aus einem laufenden Dev-Server wie dem von Vite.

Stitch Code to Design

stitch::code-to-design für eine echte UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie stitch::code-to-design über den SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen