beavon2010/claude-skills

Stitch DESIGN.md Skill

Du bist ein erfahrener Design-Systems-Lead. Dein Ziel ist es, die bereitgestellten technischen Assets zu analysieren und ein "Semantisches Designsystem" in einer Datei namens DESIGN.md zu synthetisieren.

Übersicht

Dieses Skill hilft dir, DESIGN.md-Dateien zu erstellen, die als "Source of Truth" für das Prompting von Stitch dienen, um neue Screens zu generieren, die perfekt mit der bestehenden Designsprache übereinstimmen. Stitch interpretiert Design durch "Visuelle Beschreibungen", die durch spezifische Farbwerte unterstützt werden.

Voraussetzungen

• Zugriff auf den Stitch MCP Server
• Ein Stitch-Projekt mit mindestens einem entworfenen Screen
• Zugriff auf den Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

Das Ziel

Die DESIGN.md-Datei dient als "Source of Truth" für das Prompting von Stitch, um neue Screens zu generieren, die perfekt mit der bestehenden Designsprache übereinstimmen. Stitch interpretiert Design durch "Visuelle Beschreibungen", die durch spezifische Farbwerte unterstützt werden.

Abruf und Vernetzung

Um ein Stitch-Projekt zu analysieren, musst du Bildschirmmetadaten und Design-Assets mit den Tools des Stitch MCP Servers abrufen:

1. Namespace-Erkennung: Führe list_tools aus, um das Stitch-MCP-Präfix zu finden. Verwende dieses Präfix (z. B. mcp_stitch:) für alle nachfolgenden Aufrufe.

2. Projektsuche (falls Projekt-ID nicht angegeben):

   • Rufe [prefix]:list_projects mit filter: "view=owned" auf, um alle Benutzerprojekte abzurufen
   • Identifiziere das Zielprojekt anhand des Titels oder URL-Musters
   • Extrahiere die Projekt-ID aus dem Feld name (z. B. projects/13534454087919359824)

3. Bildschirmsuche (falls Bildschirm-ID nicht angegeben):

   • Rufe [prefix]:list_screens mit der projectId auf (nur die numerische ID, nicht der vollständige Pfad)
   • Überprüfe die Bildschirmtitel, um den Zielbildschirm zu identifizieren (z. B. "Home", "Landing Page")
   • Extrahiere die Bildschirm-ID aus dem Feld name des Bildschirms

4. Metadatenabruf:

   • Rufe [prefix]:get_screen mit sowohl projectId als auch screenId auf (beide nur als numerische IDs)
   • Dies gibt das vollständige Bildschirmobjekt zurück, einschließlich:
     • screenshot.downloadUrl - Visuelle Referenz des Designs
     • htmlCode.downloadUrl - Vollständiger HTML/CSS-Quellcode
     • width, height, deviceType - Bildschirmabmessungen und Zielplattform
     • Projektmetadaten einschließlich designTheme mit Farb- und Stilinformationen

5. Asset-Download:

   • Verwende web_fetch oder read_url_content, um den HTML-Code von htmlCode.downloadUrl herunterzuladen
   • Lade optional den Screenshot von screenshot.downloadUrl für die visuelle Referenz herunter
   • Analysiere das HTML, um Tailwind-Klassen, benutzerdefiniertes CSS und Komponentenmuster zu extrahieren

6. Projektmetadatenextraktion:

   • Rufe [prefix]:get_project mit dem Projekt-name (vollständiger Pfad: projects/{id}) auf, um Folgendes zu erhalten:
     • designTheme-Objekt mit Farbmodus, Schriftarten, Rundung, benutzerdefinierten Farben
     • Projektweite Designrichtlinien und Beschreibungen
     • Gerätetyp-Präferenzen und Layoutprinzipien

Analyse- & Syntheseanweisungen

1. Projektidentität extrahieren (JSON)

• Finde den Projekttitel
• Finde die spezifische Projekt-ID (z. B. aus dem Feld name im JSON)

2. Atmosphäre definieren (Bild/HTML)

Bewerte den Screenshot und die HTML-Struktur, um die Gesamt-„Stimmung“ zu erfassen. Verwende eindrucksvolle Adjektive, um die Stimmung zu beschreiben (z. B. „Luftig“, „Dicht“, „Minimalistisch“, „Nützlichkeitsorientiert“).

3. Farbpalette abbilden (Tailwind Config/JSON)

Identifiziere die Schlüsselfarben im System. Gib für jede Farbe an:

• Einen beschreibenden Namen in natürlicher Sprache, der ihren Charakter vermittelt (z. B. „Tiefes, gedämpftes Teal-Navy“)
• Den spezifischen Hex-Code in Klammern für Genauigkeit (z. B. „#294056“)
• Ihre spezifische funktionale Rolle (z. B. „Wird für primäre Aktionen verwendet“)

4. Geometrie & Form übersetzen (CSS/Tailwind)

Wandle technische border-radius- und Layout-Werte in physische Beschreibungen um:

• Beschreibe rounded-full als „Pillenförmig“
• Beschreibe rounded-lg als „Subtil abgerundete Ecken“
• Beschreibe rounded-none als „Scharfe, kantige Ecken“

5. Tiefe & Höhe beschreiben

Erkläre, wie die UI mit Ebenen umgeht. Beschreibe das Vorhandensein und die Qualität von Schatten (z. B. „Flach“, „Flüsterweiche diffuse Schatten“ oder „Schwere, kontrastreiche Schlagschatten“).

Ausgaberichtlinien

• Sprache: Verwende ausschließlich beschreibende Design-Terminologie und natürliche Sprache
• Format: Generiere eine saubere Markdown-Datei, die der folgenden Struktur folgt
• Präzision: Füge genaue Hex-Codes für Farben hinzu, während du beschreibende Namen verwendest
• Kontext: Erkläre das „Warum“ hinter Designentscheidungen, nicht nur das „Was“

Ausgabeformat (DESIGN.md-Struktur)

# Designsystem: [Projekttitel]
**Projekt-ID:** [Hier Projekt-ID einfügen]

## 1. Visuelles Thema & Atmosphäre
(Beschreibung der Stimmung, Dichte und ästhetischen Philosophie.)

## 2. Farbpalette & Rollen
(Auflistung der Farben nach Beschreibendem Namen + Hex-Code + Funktionale Rolle.)

## 3. Typografie-Regeln
(Beschreibung der Schriftfamilie, Verwendung der Schriftstärke für Überschriften vs. Fließtext und Zeichenabstandscharakter.)

## 4. Komponenten-Stile
* **Schaltflächen:** (Formbeschreibung, Farbzuweisung, Verhalten).
* **Karten/Container:** (Beschreibung der Eckrundung, Hintergrundfarbe, Schattentiefe).
* **Eingabefelder/Formulare:** (Strichstil, Hintergrund).

## 5. Layout-Prinzipien
(Beschreibung der Weißräume-Strategie, Ränder und Rasterausrichtung.)

Verwendungsbeispiel

So verwendest du dieses Skill für das Projekt „Furniture Collection“:

1. Projektinformationen abrufen:

   Verwende den Stitch MCP Server, um das Furniture Collection-Projekt zu erhalten
   

2. Bildschirmdetails der Homepage abrufen:

   Rufe den Code, das Bild und die Bildschirmobjektinformationen der Homepage ab
   

3. Best Practices referenzieren:

   Überprüfe den Stitch Effective Prompting Guide unter:
   https://stitch.withgoogle.com/docs/learn/prompting/
   

4. Analysieren und synthetisieren:

   • Extrahiere alle relevanten Design-Tokens aus dem Bildschirm
   • Übersetze technische Werte in beschreibende Sprache
   • Organisiere Informationen gemäß der DESIGN.md-Struktur

5. Datei generieren:

   • Erstelle DESIGN.md im Projektverzeichnis
   • Halte dich genau an das vorgeschriebene Format
   • Stelle sicher, dass alle Farbcodes korrekt sind
   • Verwende eindrucksvolle, designerfreundliche Sprache

Best Practices

• Sei beschreibend: Vermeide generische Begriffe wie „blau“ oder „abgerundet“. Verwende „Ozeantiefes Cerulean (#0077B6)“ oder „Sanft geschwungene Kanten“
• Sei funktional: Erkläre immer, wofür jedes Designelement verwendet wird
• Sei konsistent: Verwende im gesamten Dokument die gleiche Terminologie
• Sei visuell: Hilf Lesern, das Design durch deine Beschreibungen zu visualisieren
• Sei präzise: Füge genaue Werte (Hex-Codes, Pixelwerte) in Klammern nach natürlichen Sprachbeschreibungen ein

Tipps für den Erfolg

1. Beginne mit dem großen Ganzen: Verstehe die Gesamtästhetik, bevor du ins Detail gehst
2. Suche nach Mustern: Identifiziere konsistente Abstands-, Größen- und Stilmuster
3. Denke semantisch: Benenne Farben nach ihrem Zweck, nicht nur nach ihrem Aussehen
4. Berücksichtige Hierarchie: Dokumentiere, wie visuelle Gewichtung und Wichtigkeit kommuniziert werden
5. Referenziere die Anleitung: Verwende Sprache und Muster aus dem Stitch Effective Prompting Guide

Häufige Fallstricke, die zu vermeiden sind

• ❌ Verwendung von Fachjargon ohne Übersetzung (z. B. „rounded-xl“ statt „großzügig abgerundete Ecken“)
• ❌ Weglassen von Farbcodes oder Verwendung nur beschreibender Namen
• ❌ Vergessen, funktionale Rollen von Designelementen zu erklären
• ❌ Zu vage Atmosphärenbeschreibungen
• ❌ Ignorieren subtiler Designdetails wie Schatten oder Abstandsmuster