stitch::extract-static-htmlvon Google Labs

Stitch Extract Static HTML Skill.

Ein Claude Code- und Codex-Skill für UI-Design: extrahiert in sich geschlossene statische HTML-Snapshots mit eingebettetem CSS und Bildern.

Web & UI
HTML

OpenDesign herunterladen Anleitung ansehen

google-labs-code/stitch-skills · plugins/stitch-design/skills/extract-static-html/SKILL.mdSKILL.md

--- name: stitch::extract-static-html description: - Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'. --- ## Which Strategy to Use ## Strategy A: Puppeteer Snapshot (Recommended) ## Strategy B: Browser Subagent Capture ## Appendix: Static Fallback (MockPage.jsx)

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

01 Was es tut

Was der stitch::extract-static-html Skill in Claude Code und Codex macht

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

Erzeugt aus einer laufenden Web-App eine einzige eigenständige HTML-Datei, indem Headless Chrome über Puppeteer gestartet, das vollständig gerenderte DOM erfasst, CSSOM-Regeln inline eingebunden und Bilder in base64-Data-URIs umgewandelt werden. Der Skill funktioniert mit jedem Framework — React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook — ohne dass eine MockPage.jsx erforderlich ist.

Der Skill zwingt den Agent, vor dem Fortfahren zu fragen, welche der beiden Erfassungsstrategien verwendet werden soll, wobei der Puppeteer-Snapshot empfohlen wird, und nach dem Start des lokalen Servers zur Bestätigung zu pausieren. Flags decken Wartezeit, Viewport, Dark Mode, das Entfernen fixierter Elemente, das Inlinen von Canvas und ein Auth-Skript für login-geschützte Seiten ab. Ein dokumentierter Anhang flacht React-Komponenten zu einer manuellen MockPage.jsx ab, wenn die App nicht lokal ausgeführt werden kann.

Was er erzeugt

Eine eigenständige HTML-Datei pro erfasster Route, mit Inline-Styles und Bildern, die als base64 eingebettet sind.
Eine Datei pro Route, wenn Sie mehrere Ansichten erfassen, zum Beispiel Startseite, Preise und Dashboard.
Diagramme, die aus Canvas-Elementen in base64-Bilder serialisiert werden, wenn das Canvas-Flag verwendet wird.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Den Nutzer eine Strategie wählen lassen
Vor jeder Extraktion präsentiert der Agent den A/B-Vergleich, empfiehlt den Puppeteer-Weg und wartet auf eine explizite Entscheidung.
02
Das Snapshot-Skript pro Route ausführen
Ein Befehl pro URL, wobei jede Erfassung in eine eigene Datei in .stitch geschrieben wird, mit einer festen Wartezeit nach Network Idle.
03
Das Skript die Seite inline einbinden lassen
CSSOM-Regeln, verlinkte Stylesheets, Bilder, srcset-Quellen und Icon-Fonts derselben Origin werden in die Datei eingebettet, sodass nichts von einem laufenden Server abhängt.
04
Flags an das Framework anpassen
Wartezeiten und URLs unterscheiden sich je Stack, zum Beispiel eine längere Wartezeit, wenn das Framework serverseitig gerendertes Markup hydratisiert.
05
Geschützte Seiten authentifizieren
Ein Auth-Modul läuft innerhalb der Puppeteer-Sitzung, wonach das Skript mit bestehender Sitzung zur ursprünglichen URL zurückkehrt.
06
Nur bei Bedarf auf ein Mock zurückgreifen
Wenn die App überhaupt nicht starten kann, flacht die Anhang-Route Komponenten zu einer einzigen JSX-Datei ab, statt ein Live-Rendering zu erfassen.

02 Finden Sie Ihren Favoriten

Wann der stitch::extract-static-html-Skill zu verwenden ist

Verwenden Sie den stitch::extract-static-html 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

Sie müssen einen bestimmten UI-Zustand erfassen und jemandem eine statische Version der Seite übergeben.
Sie bereiten Assets zum Hochladen in Stitch vor.
Die App läuft lokal in einem beliebigen Framework und Sie möchten lieber keine MockPage.jsx schreiben.
Sie müssen klicken, ausfüllen oder navigieren, bevor die Seite den gewünschten Zustand erreicht.
Sie möchten eine einzelne Storybook-Story statt einer ganzen App-Route.

Grenzen kennen

Große Seiten, die über den Browser-Subagent erfasst werden, können durch das Kontextfenster des Agent abgeschnitten werden.
Von der manuellen Flatten-Route wird abgeraten, wann immer die App tatsächlich gestartet werden kann.
Externe Fonts werden nicht in Data-URIs umgewandelt, nur Assets mit gleichem Ursprung und relative Assets werden es.
UI-Zustände, die durch Navigation nicht erreichbar sind, etwa Fehlerbildschirme und leere Zustände, benötigen stattdessen die Mock-Route.

Was Sie bereitstellen sollten

Ihre Wahl der StrategieDer Agent startet nicht ohne eine explizite Entscheidung zwischen dem Puppeteer-Snapshot und dem Browser-Subagent.
Die auf localhost laufende AppEin für Sie erreichbarer Server, etwa gestartet mit dem Dev-Script des Projekts, da das Script von der Live-Seite abruft.
Ein Ausgabe-Dateipfad--output ist erforderlich, entscheiden Sie also, wo jede erfasste Route landet, typischerweise unter .stitch.
Ein Auth-Modul für zugangsbeschränkte SeitenEine JS/TS-Datei, deren Default-Export eine asynchrone Funktion ist, die die Puppeteer-Page erhält, verwendet für Login-Formulare, Tokens oder Modul-Injektion.
Eine Node-Umgebung mit puppeteerDas Snapshot-Script wird mit npx tsx ausgeführt und benötigt puppeteer als auflösbar in dieser Umgebung.

03 Innerhalb des Skills

Regeln, die die Skill stitch::extract-static-html 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.

Wählen Sie Niemals Selbst die Strategie
Der Agent darf nicht anstelle des Nutzers zwischen Puppeteer und dem Browser-Subagent entscheiden oder fortfahren, bevor der Nutzer bestätigt.
Strategie A Ist der Angegebene Standard
Die Optionen müssen klar präsentiert werden, mit Strategie A als Empfehlung und einer kurzen Zusammenfassung von Vor- und Nachteilen für jede.
Checkpoint vor dem Snapshotting
Nach dem Starten des lokalen Servers muss der Agent pausieren und eine Bestätigung einholen, bevor das Snapshot-Script ausgeführt oder ein Browser-Subagent gestartet wird.
Stoppen Sie Danach den Dev-Server
Ein Dev-Server, der nur für die Extraktion gestartet wurde, muss gestoppt oder sein Hintergrundprozess beendet werden, sobald die Erfassung abgeschlossen ist.
Warten Sie Standardmäßig 1000 Ms
--wait ist standardmäßig 1000 ms nach Network-Idle und muss für Apps mit Lazy-Loading erhöht werden; --viewport ist standardmäßig 1280x800.
Liefern Sie Keine Scripts Aus
Die Ausgabe enthält keine Script-Tags; Vite-HMR-Dev-Style-Blöcke (createHotContext, import.meta.hot) und Dev-Overlays werden entfernt.
Fixed Elements Sind Opt-in
--remove-fixed ist standardmäßig false und ist das Flag, um Cookie-Banner und Chat-Widgets aus der Erfassung zu entfernen.
Flatten Alles für den Mock-Pfad
Der Appendix-Fallback ist keine Live-Erfassung; er erfordert das manuelle Flachklopfen von React-Komponenten in eine einzelne JSX-Datei.

04 In Betrieb nehmen

stitch::extract-static-html 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::extract-static-html 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::extract-static-html

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

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

The app is running at http://localhost:5173. Snapshot the [dashboard] route to .stitch/dashboard.html with --html-class dark and --inline-canvas, and pass --wait 5000 because the ECharts graphs load late. That page sits behind a login guard, so run it with my [auth-myapp.ts] script first.

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:

Stoppen Sie den Dev-Server und öffnen Sie die gespeicherte Datei: Wenn Bilder kaputt sind, hat das Inlining der srcset nicht gehalten, und der Fallback auf den inlined src ist entscheidend.
Lesen Sie das Skript-Log nach der Anzahl der inlined Bilder, bevor Sie der Ausgabe vertrauen.
Wenn Icons als Text oder in einer Serifen-Fallback-Schrift erscheinen, ist die CSSOM-Erfassung oder das Inlining der @font-face nicht erfolgt.
Eine helle Seite trotz Anfrage nach Dark Mode bedeutet, dass das html-class-Flag im Lauf fehlte.
Grafiken, die als leere Boxen dargestellt werden, bedeuten, dass das canvas-Flag nicht übergeben wurde.
Bei Next.js werden optimierte Bilder nur inline eingebettet, solange der Dev-Server während der Erfassung noch läuft.

In OpenDesign importieren Sie stitch::extract-static-html über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen 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/extract-static-html/SKILL.md Content-Prüfsumme bei Verifikation 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::extract-static-html.
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

Welche Strategie verwendenVergleichstabelle von Puppeteer vs. Browser-Subagent; der Agent muss vor dem Fortfahren die Zustimmung des Nutzers einholen.
Strategie A: Puppeteer-Snapshot (empfohlen)Headless-Chrome-Snapshot, eigenständiges HTML, funktioniert mit jedem Framework, keine MockPage.jsx erforderlich.
Skript-FlagsStandardwerte für die Flags url, output, wait, viewport, html-class, remove-fixed, full-height, title, auth-script und inline-canvas.
Was automatisch geschiehtCSSOM-Erfassung, Inlining von Stylesheets und Bildern, srcset-Bereinigung, Entfernung von Skripten und HMR, Auflösung von url().
Framework-HinweiseWartezeiten und Standard-URLs für React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook und SSR.
FehlerbehebungTabelle mit Symptom-zu-Flag-Zuordnung für fehlende Bilder, Icon-Schriften, Dark Mode, Cookie-Banner, Auth und Canvases.
Auth-geschützte SeitenErstellung eines Puppeteer-Auth-Moduls; das Skript navigiert nach dem Login erneut zur ursprünglichen url.
Strategie B: Browser-Subagent-ErfassungDer Subagent navigiert und interagiert, extrahiert dann outerHTML; große Seiten können im Agent-Kontext abgeschnitten werden.
Anhang: Statischer Fallback (MockPage.jsx)Letzter Ausweg: extract_inline_html.ts wird gegen eine manuell flachgeklopfte MockPage.jsx ausgeführt, wenn die App nicht laufen kann.
MockPage.jsx-RegelnVollständiges Layout einbeziehen, Bedingungen flachklopfen, Daten hartcodieren, Logos erhalten, schwebende Elemente entfernen.
Nachbearbeitungpost_process.ts bettet lokale Bilder ein und verwendet das App-Verzeichnis als base-dir.

Die eigene Beschreibung des Skills

„- Extrahiert eigenständiges statisches HTML aus einer gebauten Webanwendung oder React-Komponenten durch Inline-Einbettung von CSS und Bildern. Verwenden Sie diesen Skill, wann immer Sie einen bestimmten UI-Zustand erfassen, eine statische Version einer Seite teilen oder Assets für den Stitch-Upload vorbereiten müssen, auch wenn der Benutzer nur ‚HTML speichern' oder ‚Ansicht mocken' sagt."

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

Stitch Extract Static HTML

Führen Sie stitch::extract-static-html für eine echte UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie stitch::extract-static-html ü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

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::extract-static-html

Was der stitch::extract-static-html Skill in Claude Code und Codex macht

In den eigenen Worten des Skills

So funktioniert es

Wann der stitch::extract-static-html-Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die die Skill stitch::extract-static-html Claude Code und Codex Vorgibt

Wählen Sie Niemals Selbst die Strategie

Strategie A Ist der Angegebene Standard

Checkpoint vor dem Snapshotting

Stoppen Sie Danach den Dev-Server

Warten Sie Standardmäßig 1000 Ms

Liefern Sie Keine Scripts Aus

Fixed Elements Sind Opt-in

Flatten Alles für den Mock-Pfad