83.3K+Download
Zur Nutzungsanleitung springen
design-mdvon Google Labs

Design MD Skill.

Ein Claude Code- und Codex-Skill für Brand- und Design-System-Arbeit: analysiert Stitch-Projekte und schreibt eine semantische DESIGN.md.

  • Brand & Design Systems
  • DESIGN.md
OpenDesign herunterladenAnleitung ansehen
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Front Matter und Abschnittsüberschriften aus der vorgelagerten Datei vom 14.09.2026 · 7.644 Zeichen vollständig

01 Was es tut

Was der design-md Skill 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

Dieser Skill verwandelt ein bestehendes Stitch-Projekt in eine DESIGN.md, die als Quelle der Wahrheit dient, um Stitch zur Generierung neuer Screens in derselben Designsprache zu prompten. Er richtet sich an Designer und Entwickler mit Stitch-MCP-Zugriff und mindestens einem gestalteten Screen: Der Skill ermittelt den MCP-Namespace, löst Projekt- und Screen-IDs auf, ruft das Screen-Objekt samt HTML und Screenshot ab und liest das designTheme des Projekts.

Anschließend dokumentiert er visuelles Thema und Atmosphäre, Farben als beschreibende Namen mit Hex-Codes und funktionalen Rollen, Typografie, Component-Stylings und Layoutprinzipien — in einer eindrucksvollen Designsprache statt in rohen technischen Werten.

Was er erzeugt

  • Ein fünfteiliges Designsystem, das visuelles Thema und Atmosphäre, die Farbpalette mit Rollen, Typografieregeln, Component-Stylings für Buttons, Karten und Eingabefelder sowie Layoutprinzipien umfasst.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 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 des Servers.

  2. 02
    Projekt und Screen auflösen

    Eigene Projekte auflisten, wenn keine Projekt-ID angegeben ist, dann die Screens für die numerische Projekt-ID auflisten und einen Screen-Titel wie Home oder Landing Page zuordnen.

  3. 03
    Das Screen-Objekt und die Assets abrufen

    get_screen liefert die Download-URLs für Screenshot und HTML, die Bildschirmabmessungen, den Gerätetyp und das designTheme; das HTML wird anschließend heruntergeladen und auf Tailwind-Klassen und Komponentenmuster hin analysiert.

  4. 04
    Design Theme auf Projektebene lesen

    Ein get_project-Aufruf mit dem vollständigen Pfad projects/{id} liefert das designTheme-Objekt mit Farbmodus, Schriften, Rundungsgrad und benutzerdefinierten Farben.

  5. 05
    Das semantische System synthetisieren

    Extrahieren Sie Design-Tokens aus dem Screen, erfassen Sie die Gesamtstimmung mit einprägsamen Adjektiven und übersetzen Sie technische Werte in eine beschreibende Sprache.

  6. 06
    DESIGN.md schreiben

    Erstellen Sie die DESIGN.md im Projektverzeichnis exakt nach dem vorgeschriebenen Fünf-Abschnitte-Format.

02 Finden Sie Ihren Favoriten

Wann Sie den design-md Skill einsetzen

Verwenden Sie den design-md Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Sie haben bereits ein Stitch-Projekt mit mindestens einem gestalteten Screen und möchten daraus ein schriftliches Design-System ableiten.
  • Sie möchten eine verlässliche Quelle, um Stitch zur Erzeugung neuer Screens im Stil einer bestehenden Designsprache zu prompten.
  • Sie kennen das Projekt nur anhand des Titels oder der URL und möchten, dass der Skill die Project ID unter Ihren eigenen Projekten findet.
  • Sie möchten, dass die Stimmung mit einprägsamen Adjektiven benannt wird, statt das CSS nur umzuformulieren.

Grenzen kennen

  • Ohne den Stitch MCP Server und ein Stitch-Projekt mit bereits gestaltetem Screen funktioniert er nicht.
  • Er erzeugt ein Markdown-Design-System, keine neuen Screens; die DESIGN.md dient als Grundlage für späteres Prompting in Stitch.
  • Unübersetzter technischer Fachjargon wie rounded-xl wird ausdrücklich als zu vermeidende Falle genannt.
  • Das Weglassen von Hex-Codes und die alleinige Verwendung beschreibender Farbnamen wird als Fehler bezeichnet.

Was Sie bereitstellen sollten

  • Project ID (optional)Wird sie nicht angegeben, listet der Skill die eigenen Projekte auf und ordnet das Zielprojekt anhand von Titel oder URL-Muster zu.
  • Screen ID (optional)Wird sie nicht angegeben, prüft der Skill die Screen-Titel, um den Ziel-Screen zu identifizieren.
  • Stitch Effective Prompting GuideReferenz für die Sprache und Muster, die die Design-Ausarbeitung verwenden sollte.

03 Innerhalb des Skills

Regeln, die der design-md-Skill Claude Code und Codex vorgibt

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

  1. Nur numerische IDs

    Übergeben Sie projectId und screenId als numerische IDs, niemals als vollständigen Pfad projects/{id}, außer bei get_project, das den vollständigen Namen erwartet.

  2. Niemals eine bloße Farbe

    Jede Farbe erhält einen beschreibenden Namen in natürlicher Sprache, den exakten Hex-Code in Klammern und ihre funktionale Rolle, etwa Deep Muted Teal-Navy (#294056) für primäre Aktionen.

  3. Geometrie übersetzen, nicht zitieren

    Wandeln Sie border-radius- und Layout-Werte in physische Beschreibungen um: rounded-full wird zu Pillenförmig, rounded-lg wird zu Leicht abgerundete Ecken, rounded-none wird zu Scharfe, kantige Ränder.

  4. Generische Begriffe vermeiden

    Vermeiden Sie Begriffe wie „blau“ oder „abgerundet“; bevorzugen Sie Ocean-deep Cerulean (#0077B6) oder Gently curved edges.

  5. Halten Sie sich an die vorgegebene Struktur

    Die Datei beginnt mit dem Projekttitel und der Projekt-ID, gefolgt von fünf nummerierten Abschnitten: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Erklären Sie das Warum, nicht nur das Was

    Geben Sie exakte Werte in Klammern nach der beschreibenden Formulierung an und nennen Sie stets, wofür jedes Designelement verwendet wird.

  7. Halten Sie die Terminologie konsistent

    Verwenden Sie durchgängig dieselbe Terminologie, damit sich das Designsystem wie ein einheitliches System liest.

04 In Betrieb nehmen

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.

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 design-md

Generische skills-CLI-Form für plugins/stitch-utilities/skills/design-md/SKILL.md; das Repository dokumentiert unter Umständen einen eigenen Pfad.

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

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Prüfen Sie, ob das Format exakt der vorgegebenen DESIGN.md-Struktur entspricht und nicht einem improvisierten Layout.
  • Prüfen Sie, ob jeder Farbcode korrekt ist und jede Farbe sowohl einen beschreibenden Namen als auch ihren Hex-Wert behält.
  • Überprüfen Sie, ob die funktionale Rolle jedes Elements genannt wird und nicht nur sein Erscheinungsbild.
  • Prüfen Sie, ob der Abschnitt zur Atmosphäre spezifisch statt vage ist und ob Schatten und Abstände nicht übersprungen wurden.

In OpenDesign ist design-md gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart 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-utilities/skills/design-md/SKILL.md Content-Prü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 design-md.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. ÜberblickDefiniert DESIGN.md als Single Source of Truth für das Prompten neuer Stitch-Screens.
  2. VoraussetzungenErfordert Stitch-MCP-Zugriff, einen entworfenen Screen und den Prompting-Guide.
  3. Das ZielWiederholt, dass Stitch visuelle Beschreibungen liest, die durch konkrete Farbwerte belegt sind.
  4. Abruf und NetzwerkSechs Schritte: Namespace, Projekt, Screen, Metadaten, Asset-Download, Projekt-designTheme.
  5. Anweisungen zur Analyse & SyntheseExtrahieren Sie Identität, Atmosphäre, Farbpalette, Geometrie und Elevation.
  6. Richtlinien zur AusgabeNur beschreibende Sprache, saubere Markdown-Formatierung, exakte Hex-Codes, das Warum erklären.
  7. Ausgabeformat (DESIGN.md-Struktur)Vorgefertigtes fünfteiliges Markdown-Gerüst zum wörtlichen Ausfüllen.
  8. AnwendungsbeispielDurchgang anhand des Projekts Furniture Collection und dessen Home-Seite.
  9. Best PracticesBeschreibend, funktional, konsistent, visuell und präzise vorgehen.
  10. Tipps für den ErfolgZuerst das große Ganze, nach Mustern suchen, semantisch benennen, Hierarchie dokumentieren.
  11. Häufige Fehler, die Sie vermeiden solltenKein unübersetzter Fachjargon, keine fehlenden Codes, keine vagen oder unvollständigen Beschreibungen.
Die eigene Beschreibung des Skills
„Stitch-Projekte analysieren und ein semantisches Designsystem in DESIGN.md-Dateien synthetisieren"

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

06 Vor der Installation

Fragen zum design-md Skill

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

Welche Tools verwendet der Skill, um Stitch zu erreichen?

Er deklariert die stitch-Tools sowie Read, Write und web_fetch. In der Praxis führt er zunächst list_tools aus, um das MCP-Präfix zu finden, und ruft dann list_projects, list_screens, get_screen und get_project mit diesem Präfix auf.

Was genau erhalte ich am Ende?

Eine DESIGN.md-Datei, die im Projektverzeichnis erstellt wird, strukturiert als Projekttitel und ID, gefolgt von Abschnitten zu visuellem Thema und Atmosphäre, Farbpalette und Rollen, Typografieregeln, Komponentenstilen und Layoutprinzipien. Sie soll als Referenzquelle wiederverwendet werden, wenn Sie Stitch für neue Screens promoten.

Ersetzt das die manuelle Arbeit?

Er übernimmt die Extraktion und den Entwurf für Sie, jedoch mit einer bestimmten Vokabularanforderung: Farben erhalten evokative Namen plus exakte Hex-Codes und funktionale Rollen, und Radius-Werte werden zu Formulierungen wie Pillenförmig oder Scharfe, eckige Kanten statt roher Klassennamen. Außerdem sollen Sie das Warum hinter jeder Entscheidung erläutern.

Design MD

Führen Sie design-md für eine echte Marken- und Designsystem-Aufgabe aus.

Das design-md-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter Plugins → Skills aus, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md