stitch::react-nativevon Google Labs

Stitch React Native Skill.

Ein Skill für Claude Code und Codex für Mobile-App-Design: konvertiert oder synchronisiert Stitch-HTML-Designs zu React-Native-Komponenten.

Mobile Apps
UI-Code

OpenDesign herunterladen Anleitung ansehen

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-native/SKILL.mdSKILL.md

--- name: stitch::react-native description: - Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. --- ## Phase 1: Retrieval and networking ## Phase 2: Theme extraction ## Phase 3: Architectural rules and HTML mapping ## Phase 4: Execution steps

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 12.389 Zeichen insgesamt

01 Was es tut

Was der stitch::react-native Skill 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

Dieser Skill verwandelt Stitch-HTML/CSS-Webdesigns mithilfe von StyleSheet in produktionsreife React-Native-Komponenten und kann außerdem bestehende native Komponenten mit den aktuellsten Stitch-Designs synchronisieren. Er läuft in vier gestaffelten Phasen: Jeder Screen wird mit scripts/fetch-stitch.sh herunterladen und visuell geprüft, tailwind.config-Tokens werden nach src/theme.ts extrahiert, HTML-Elemente und CSS werden nach strengen Architekturregeln auf React-Native-Primitiven abgebildet, und schließlich werden Komponenten aus resources/component-template.tsx entworfen.

Komponenten folgen den Atomic-Design-Ordnern unter src/components/, Logik lebt in src/hooks/, Inhalte in src/data/mockData.ts, und jede Komponentendatei exportiert ein readonly [ComponentName]Props-Interface. Die Validierung über npm run validate und tsc --noEmit ist optional und erfordert die Erlaubnis des Nutzers.

Was er erzeugt

src/theme.ts, eine TypeScript-Token-Datei mit den Farben, Abständen und der Typografie, die aus der tailwind.config des Designs extrahiert wurden.
src/data/mockData.ts, das sämtliche statischen Texte, Bild-URLs und Listen enthält, damit keine Inhalte in Komponenten hartcodiert sind.
Custom Hooks unter src/hooks/, die Event-Handler, API-Aufrufe und Geschäftslogik übernehmen, sodass Komponenten nur noch rendern.
Eine .stitch/metadata.json-Datei, die im App-Ordner geschrieben und im Workspace-Root gespiegelt wird.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den MCP-Namespace ermitteln
Führen Sie list_tools aus, um das Stitch-MCP-Präfix zu finden, und verwenden Sie dieses Präfix dann für jeden weiteren Aufruf in der Sitzung erneut.
02
Über das Skript herunterladen
Interne Fetch-Tools können bei Google-Cloud-Storage-Domains fehlschlagen, daher werden HTML und Screenshots über scripts/fetch-stitch.sh heruntergeladen, das Weiterleitungen und Sicherheits-Handshakes übernimmt.
03
Jeden Screenshot prüfen
Öffnen Sie das heruntergeladene PNG, um Designintention und Layout-Details zu bestätigen, statt anzunehmen, wie das Design aussieht.
04
Das Theme extrahieren
Lesen Sie das tailwind.config-Objekt innerhalb jedes HTML-Head-Skriptblocks nach Farben, Schriften, Abständen, Radien und Typografie und schreiben Sie sie als TypeScript-Konstanten in src/theme.ts.
05
Aus der Vorlage entwerfen
Beginnen Sie jede Komponente mit resources/component-template.tsx und suchen und ersetzen Sie jedes Vorkommen des Platzhalter-Komponentennamens.
06
Sync-Metadaten Erfassen
Speichern Sie die Projektkonfiguration in .stitch/metadata.json mit einem Feld „Last Sync Time“, das der aktuellen Ausführungszeit der Synchronisierung entspricht.

02 Finden Sie Ihren Favoriten

Wann der stitch::react-native Skill zu verwenden ist

Verwenden Sie das stitch::react-native Skill in Claude Code oder Codex, wenn die Aufgabe Mobile-App-Design dieser Art ist. Eignung und Grenzen sind aus der Skill-Datei übernommen.

Gut geeignet

Eine bestehende React Native-App, deren Komponenten von den neuesten Stitch-Designs abgewichen sind und wieder darauf abgestimmt werden müssen.
Ein mehrseitiges Stitch-Projekt, das einen NavigationContainer mit einem in App.tsx verdrahteten Stack- oder Tab-Navigator benötigt.
Ein Design, dessen Schatten auf beiden Plattformen korrekt aussehen müssen, gelöst mit Platform.select für iOS-Schatten-Props und Android-Elevation.
Teams, die das Ergebnis vor der Fertigstellung gegen eine schriftliche Architektur-Checkliste prüfen lassen möchten.

Grenzen kennen

Designs, die auf CSS-Hover-, Transition- oder Animationseffekten beruhen: hover und transition haben kein Äquivalent, und Animationen gehören in react-native-reanimated.
Dropdown- oder Select-Felder aus dem Webdesign, da React Native kein integriertes Select mitliefert und einen Drittanbieter-Picker oder ein benutzerdefiniertes Modal benötigt.
Web-Bilderwartungen: Ein React Native Image hat keine intrinsische Größe, daher müssen immer width und height oder ein aspectRatio angegeben werden.

Was Sie bereitstellen sollten

Das Stitch-Projekt und sein MCP-PräfixDer Agent führt list_tools aus, um das Stitch MCP-Präfix zu finden, und verwendet es für alle Aufrufe von get_screen und get_project wieder.
Der Breitenwert des ScreensAn Screenshot-URLs muss =w{width} mit der Breite aus den Screen-Metadaten angehängt werden, da Googles CDN sonst niedrig aufgelöste Thumbnails ausliefert.
Zustimmung für Validierung und App-AusführungVor dem Starten des Packagers oder dem Auslösen visueller Simulator-Audits, um zu prüfen, ob die App auf einem Gerät korrekt gerendert wird, ist eine Freigabe erforderlich.

03 Innerhalb des Skills

Regeln, die die stitch::react-native Skill Claude Code und Codex Vorgibt

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

Kein Abkürzen der Datenabfrage
Phase 1 gilt erst als abgeschlossen, wenn alle Screens über das Skript herunterladen wurden und visuell geprüft wurden; das Lesen lokaler Design-Dateien ohne vorherigen Aufruf von MCP get_screen ist untersagt.
Vor dem Aktualisieren von Designs Nachfragen
Falls .stitch/designs/{page}.html und .png bereits existieren, muss der Agent nachfragen, ob aus dem Stitch-Projekt aktualisiert oder die lokalen Dateien wiederverwendet werden sollen, und erst nach Bestätigung erneut herunterladen.
Keine Rohfarben in Komponenten
Farb-Hexcodes und rgba-Strings sind in Komponentendateien untersagt; jeder Farb-, Abstands- und Schriftgrößenwert muss aus src/theme.ts stammen.
Ein Readonly-Props-Interface Exportieren
Jede Komponentendatei, einschließlich Screens, muss ein Interface mit dem Namen [ComponentName]Props mit readonly-Modifikatoren exportieren, sonst schlägt die Validierung fehl.
Sichere Bereiche aus dem Richtigen Paket
Top-Level-Screens werden mit SafeAreaView aus react-native-safe-area-context umschlossen, nicht mit dem Standard von react-native.
In Atomic-Design-Dateien aufteilen
Komponenten kommen in src/components/atoms/, molecules/ und organisms/; die gesamte UI in einer einzigen Page- oder Screen-Datei unterzubringen ist untersagt.
Google-Header weglassen
Generierte Komponenten folgen den Konventionen des Zielprojekts und dürfen keine Google-Lizenzhinweise enthalten.
Berechtigung vor dem Testen
Validierungsskripte, Packager und Simulator-Audits werden niemals eigenständig gestartet; der Agent muss zuerst die Erlaubnis des Nutzers einholen.

04 In Betrieb nehmen

stitch::react-native 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::react-native 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::react-native

Generische skills-CLI-Form für plugins/stitch-build/skills/react-native/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

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

Starter prompt

Convert the Stitch designs in project [project ID] to React Native. Download every screen with scripts/fetch-stitch.sh, visually audit the screenshots, extract the tailwind.config tokens into src/theme.ts, and build the components from resources/component-template.tsx using the atoms, molecules and organisms folders. Please hold off on starting the packager or a simulator audit for now.

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:

Führen Sie den Validator für jede .tsx-Datei in components und screens aus, um die Gültigkeit der Komponenten zu prüfen.
Führen Sie den TypeScript-Compiler im No-Emit-Modus aus, um zu bestätigen, dass sich das Projekt weiterhin kompilieren lässt.
Prüfen Sie, ob die Farben und Schriften in src/theme.ts wirklich dem entsprechen, was aus dem HTML-Design hervorgegangen ist.
Prüfen Sie, dass kein reiner Text außerhalb einer Text-Komponente steht, da React Native dabei abstürzt.

In OpenDesign importieren Sie stitch::react-native über den 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-build/skills/react-native/SKILL.md Inhalts-Prüfsumme bei Verifizierung erfasst; 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::react-native.
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

Phase 1: Abruf und VernetzungMCP-Präfix finden, jeden Screen abrufen, HTML und Screenshots per Skript herunterladen, visuell prüfen, Metadaten speichern.
Phase 2: Theme-ExtraktionÜbertragen Sie die Farb-, Schrift-, Abstands-, Radius- und Typografie-Tokens aus tailwind.config in src/theme.ts.
Phase 3: Architekturregeln und HTML-MappingOrdnen Sie HTML-Tags den Primitiven zu, konvertieren Sie CSS in StyleSheet, befolgen Sie die Regeln für Atomic Design, Hooks, Theme und Barrierefreiheit.
Phase 4: AusführungsschritteInstallieren Sie Abhängigkeiten, erstellen Sie Theme, Daten und Komponenten aus der Vorlage, verknüpfen Sie die Navigation und validieren Sie anschließend optional mit Berechtigung.
FehlerbehebungLösungen für Fetch-Fehler, Validierungsfehler, nicht umschlossenen Text, Bildgrößen und VirtualizedList-Warnungen.

Die eigene Beschreibung des Skills

Konvertiert Stitch-HTML-Designs in React-Native-Komponenten oder synchronisiert/aktualisiert bestehende Native-Komponenten mit den neuesten Stitch-Designs unter Verwendung von StyleSheet.

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

06 Vor der Installation

Fragen zum stitch::react-native Skill

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

Können Sie das Stitch MCP überspringen und ihm einfach die lokalen HTML-Dateien übergeben?

Nein. Phase 1 verlangt, dass jeder Screen über get_screen abgerufen und mit scripts/fetch-stitch.sh herunterladen wird, bevor irgendetwas gelesen wird. Das direkte Lesen der lokalen Design-HTML ohne vorherigen Aufruf von get_screen wird als Anti-Pattern aufgeführt.

Erstellt dies nur neue Screens, oder kann es auch eine App aktualisieren, die ich bereits habe?

Beides. Neben der Umwandlung von neuem Stitch-HTML in Komponenten synchronisiert und aktualisiert der Skill auch bestehende native Komponenten, sodass sie den neuesten Stitch-Designs entsprechen.

Startet er von selbst einen Simulator oder Packager, um das Ergebnis zu prüfen?

Standardmäßig nicht. Die Verifizierung in Phase 4, Audits und Tests mit Simulator oder Packager sind optional, und der Agent muss Ihre Erlaubnis einholen, bevor er Validierungsskripte ausführt, einen Packager startet oder Simulator-Audits durchführt.

Stitch React Native

Führen Sie stitch::react-native mit einer echten Mobile-App-Designaufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie stitch::react-native ü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