stitch::extract-design-mdvon Google Labs

Stitch Extract Design MD Skill.

Ein Claude Code- und Codex-Skill für Brand- und Design-System-Arbeit: extrahiert eine vollständige DESIGN.md aus Frontend-Quellcode beliebiger Frameworks.

Brand & Design Systems
DESIGN.md

OpenDesign herunterladen Anleitung ansehen

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

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

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

01 Was es tut

Was der stitch::extract-design-md 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 liest eine Frontend-Codebasis und schreibt eine DESIGN.md, die deren visuelle Sprache erfasst, ohne die App zu bauen oder zu rendern. Er erkennt das Framework anhand von package.json und Konfigurationsdateien (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, reines CSS) und arbeitet sich dann durch Atmosphäre, Farbpalette und -rollen, Typografie, Komponenten-Stylings, Layoutprinzipien und Hinweise für die Stitch-Generierung.

Die Ausgabe landet unter .stitch/DESIGN.md und muss mit einem YAML-Frontmatter-Block beginnen, der name und eine colors-Zuordnung enthält, da andere Skills sie parsen. Gedacht für Designer und Entwickler, die das Design-System eines bestehenden Projekts zurückentwickeln, prüfen oder migrieren.

Was er erzeugt

Ein DESIGN.md-Dokument, zusammengestellt im Standardformat für Design-Systeme.
Ein YAML-Frontmatter-Block mit name und einer colors-Zuordnung oben in dieser Datei, gefolgt von den Markdown-Abschnitten.
Ein abschließender Abschnitt mit Design-System-Hinweisen für die Stitch-Generierung, der Sprache, Farbreferenzen und Komponenten-Prompts abdeckt.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Framework und Stack erkennen
Durchsucht das Projektstammverzeichnis nach verräterischen Dateien wie package.json, tailwind.config.js, postcss.config.js, theme.js oder tokens.js, liest dann package.json, um Framework, CSS-Tooling und etwaige Design-Token-Bibliotheken zu ermitteln.
02
Die passende Framework-Referenz lesen
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular und reines CSS verfügen jeweils über eine Referenzdatei mit framework-spezifischen Mustern zum Auffinden von Farben, Typografie und Abständen.
03
Farbpalette extrahieren und Rollen zuweisen
Farben stammen aus CSS-Custom-Properties, der Tailwind-Konfiguration, Theme-Dateien, Komponentenstilen, gescopten Klassen und CSS-in-JS-Objekten und werden dann nach Funktion statt nach Farbton gruppiert.
04
Komponenten und Layout analysieren
Der Skill betrachtet Buttons, Cards, Navigation, Eingabefelder und domänenspezifische Komponenten sowie Grid, Weißraum, Ausrichtung und responsives Verhalten.
05
Die DESIGN.md schreiben
Alles wird im Standard-DESIGN.md-Format zusammengestellt und in ein .stitch-Verzeichnis geschrieben, das bei Bedarf erstellt wird.
06
Optional an Stitch übergeben
Wenn der Nutzer das Design-System in Stitch übertragen möchte, wird die verfasste DESIGN.md zur Eingabe für den Skill manage-design-system.

02 Finden Sie Ihren Favoriten

Wann Sie das stitch::extract-design-md Skill verwenden

Verwenden Sie den stitch::extract-design-md Skill in Claude Code oder Codex, wenn die Aufgabe Brand and design-system Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Sie haben eine Frontend-Codebasis und möchten deren Design-System aus dem Quellcode extrahieren oder dokumentieren lassen.
Die App kann nicht gebaut oder gerendert werden, aber die Quelldateien sind vorhanden.
Sie möchten die bestehende visuelle Identität eines Projekts nach Stitch migrieren.
Das Styling in einer Codebasis ist uneinheitlich und muss vereinheitlicht oder abgeglichen werden.

Grenzen kennen

Dies ist nicht der Weg über gerendertes HTML; das übernimmt der separate design-md-Skill ausgehend von gerendertem HTML.
Er kann nicht ohne Zugriff auf das Quellverzeichnis des Frontend-Projekts ausgeführt werden.

Was Sie bereitstellen sollten

Theme- oder Token-Dateien, falls vorhandenDer Verweis auf theme.- oder tokens.-Dateien liefert die verlässlichste Quelle für Designwerte.
Projektname und, falls bekannt, IDDer Dokumenttitel verwendet den Projektnamen; die Projekt-ID wird angegeben, sofern verfügbar, andernfalls weggelassen.
Eine Entscheidung zur Übertragung nach StitchWenn der Nutzer das Design-System in Stitch übertragen möchte, geht der Workflow über Phase 3 hinaus in die Integrationsübergabe.

03 Innerhalb des Skills

Regeln, die der Skill stitch::extract-design-md 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.

YAML-Frontmatter Ist Pflicht
Die Datei muss mit einem YAML-Block beginnen, der name und eine colors-Zuordnung enthält, passend zu examples/DESIGN.md.
Farben Nach Charakter Benennen, Nicht Nach Farbton
Jede Farbe erhält einen beschreibenden Namen, der ihre Wirkung heraufruft, sodass #294056 zu „Deep Muted Teal-Navy“ wird und nicht zu „Blau“.
Nahezu Identische Farben Zusammenführen
Nahezu identische Farben wie #333 und #2C2C2C werden unter dem Namen zusammengeführt, der die beabsichtigte Farbe am besten repräsentiert.
Bei der Tailwind-Konfiguration Beginnen
Eine angepasste tailwind.config.js wird als das Design-System selbst betrachtet, zuerst daraus extrahiert, wobei Komponenten anschließend stichprobenhaft auf Abweichungen geprüft werden.
Theme-Dateien Haben Vorrang vor Komponentenstilen
Eine Theme-Datei, die eine Palette definiert, zeigt das beabsichtigte Design-System, während verstreute Inline-Styles nur zeigen, was tatsächlich ausgeliefert wurde.
CSS Custom Properties Als Absicht Behandeln
Eine Variable wie --brand-primary ist ein bewusst gesetztes Design-Token und kein Zufallswert und sollte entsprechend respektiert werden.
Stitch-Notizen in Natürlicher Sprache Verfassen
Die Generierungsnotizen beschreiben Komponenten in Fließtext statt CSS-Syntax oder Rohwerte einzufügen.
Atmosphäre-Editorial beibehalten
Der Atmosphäre-Abschnitt ist als redaktioneller Text über Stimmung und Philosophie verfasst, nicht als technische Dokumentation.

04 In Betrieb nehmen

stitch::extract-design-md 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-design-md 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-design-md

Generische skills-CLI-Form für plugins/stitch-design/skills/extract-design-md/SKILL.md; das Repository kann einen 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

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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:

Jede Farbe hat einen beschreibenden Namen, einen Hex-Code und eine funktionale Rolle.
Typografie umfasst Schriftfamilie, eine Zeichenbeschreibung und die vollständige Hierarchie.
Komponentenstile legen Form, Farbe, Zustände und Übergänge fest.
Das Layout legt maximale Breite, Grid, Breakpoints und die Abstandsstrategie fest.
Das Dokument erfasst die Absicht hinter dem Styling, nicht nur reine Werte.

In OpenDesign importieren Sie stitch::extract-design-md über den SKILL.md-Link: Plugins → Add → Skill → Import from link, 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/extract-design-md/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 Repository google-labs-code/stitch-skills, das 12 Skills aus diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für stitch::extract-design-md.
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

Warum es das gibtQuellcode zu lesen ist schneller als gerendertes HTML und funktioniert auch, wenn der Build defekt ist.
Wann verwendenAuslöser: Extrahieren, Dokumentieren, Auditieren, Migrieren eines Design Systems, Vereinheitlichen inkonsistenter Stile.
VoraussetzungenNur Zugriff auf das Quellverzeichnis; keine Build- oder Laufzeitabhängigkeiten erforderlich.
WorkflowVier Phasen: Projekterkundung, Tiefenextraktion, Erstellung der DESIGN.md, optionale Stitch-Integration.
QualitätschecklistePrüfpunkte für Farben, Typografie, Komponenten, Layout, Sprache, Duplikatvermeidung und Absicht.
Tipps für bessere ExtraktionCode-Kommentare auswerten, Token-Bibliotheken und Theme-Dateien bevorzugen, Tailwind-Konfiguration als das System behandeln.

Die eigene Beschreibung des Skills

- Extrahieren Sie ein umfassendes Design-System (DESIGN.md) direkt aus Frontend-Quellcode — React, Vue, Svelte, Angular, reines HTML/CSS oder jedes Web-Framework. Analysiert Komponentendateien, Stylesheets, Tailwind-Konfigurationen, Theme-Definitionen und Design-Tokens, um ein umfangreiches, Stitch-kompatibles Design-System-Dokument zu erstellen. Verwenden Sie diesen Skill, wenn der Benutzer ein Design-System aus einer vorhandenen Codebasis rekonstruieren, die visuelle Sprache eines Projekts prüfen, Design-Tokens aus Quelldateien extrahieren oder die Styling-Muster in einem Frontend-Repository verstehen möchte — selbst wenn er nur fragt "Wie sieht diese App aus?" oder "Zieh das Design aus diesem Code".

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 13.970 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum Skill stitch::extract-design-md

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

Muss ich zuerst Abhängigkeiten installieren oder die App lauffähig machen?

Nein. Der Skill liest nur Quelldateien und benötigt keine Build- oder Laufzeitabhängigkeiten, funktioniert also auch, wenn Abhängigkeiten fehlen oder der Build defekt ist.

Welche Frameworks und Styling-Setups kann er verarbeiten?

React, Vue, Svelte, Angular, reines HTML/CSS und jedes Web-Framework, einschließlich Tailwind-Konfigurationen, CSS-in-JS und Theme- oder Token-Dateien. Framework-spezifische Extraktionsmuster befinden sich in Referenzdateien, die für React/Tailwind, Vue, Svelte, Angular und reines CSS herangezogen werden.

Warum benötigt die DESIGN.md YAML-Frontmatter?

Der Block enthält den Namen und die Farbzuordnung als strukturierte Daten, die andere Skills auswerten. Sie auszulassen oder die Kern-Farbtokens wegzulassen, ist eine fehlerhafte Verwendung des Skills.

Kann er das fertige Design System in Stitch übertragen?

Dieser Schritt ist optional und wird von einer anderen Skill übernommen: Phase 4 übergibt an manage-design-system, die mit der DESIGN.md als Eingabe die MCP-Erstellungs-/Aktualisierungsaufrufe ausführt. Wenn Sie nur das Dokument möchten, endet die Arbeit nach Phase 3.

Stitch Extract Design MD

Führen Sie stitch::extract-design-md für eine echte Brand and design-system Arbeitsaufgabe aus.

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

OpenDesign herunterladen Alle Skills durchsuchen