leonxlnx/taste-skill

Stitch Design Taste – Semantischer Design-System-Skill

Übersicht

Dieser Skill generiert DESIGN.md-Dateien, die für die Bildschirmgenerierung mit Google Stitch optimiert sind. Er übersetzt die kampferprobten Anti-Schlampig-Frontend-Entwicklungsrichtlinien in die native semantische Designsprache von Stitch – beschreibende, natürlichsprachliche Regeln, gepaart mit präzisen Werten, die der KI-Agent von Stitch interpretieren kann, um erstklassige, nicht-generische Oberflächen zu erzeugen.

Die generierte DESIGN.md dient als einzige Quelle der Wahrheit, um Stitch zur Erstellung neuer Bildschirme zu veranlassen, die einer kuratierten, hochwertigen Designsprache folgen. Stitch interpretiert Design durch "Visuelle Beschreibungen", die durch spezifische Farbwerte, Typografie-Spezifikationen und Komponentenverhalten gestützt werden.

Voraussetzungen

• Zugriff auf Google Stitch über labs.google/stitch
• Optional: Stitch MCP Server für die programmatische Integration mit Cursor, Antigravity oder Gemini CLI

Das Ziel

Erzeuge eine DESIGN.md-Datei, die Folgendes kodiert:

1. Visuelle Atmosphäre – die Stimmung, Dichte und Designphilosophie
2. Farbkalibrierung – Neutrale, Akzente und verbotene Muster mit Hex-Codes
3. Typografische Architektur – Schriftstapel, Skalenhierarchie und Anti-Patterns
4. Komponentenverhalten – Buttons, Karten, Eingabefelder mit Interaktionszuständen
5. Layout-Prinzipien – Rastersysteme, Abstandsphilosophie, Responsive-Strategie
6. Bewegungsphilosophie – Animations-Engine-Spezifikationen, Federphysik, ständige Mikrointeraktionen
7. Anti-Patterns – Explizite Liste verbotener KI-Design-Klischees

Analyse- und Syntheseanweisungen

1. Definiere die Atmosphäre

Bewerte die Absicht des Zielprojekts. Verwende ausdrucksstarke Adjektive aus dem Geschmacksspektrum:

• Dichte: "Galerieluftig" (1–3) → "Alltags-App-ausgewogen" (4–7) → "Cockpit-dicht" (8–10)
• Varianz: "Vorhersagbar symmetrisch" (1–3) → "Versetzt asymmetrisch" (4–7) → "Künstlerisch chaotisch" (8–10)
• Bewegung: "Statisch zurückhaltend" (1–3) → "Flüssiges CSS" (4–7) → "Filmische Choreografie" (8–10)

Standard-Baseline: Varianz 8, Bewegung 6, Dichte 4. Passe dich dynamisch an die Beschreibung des Benutzers an.

2. Erstelle die Farbpalette

Gib für jede Farbe an: Beschreibender Name + Hex-Code + Funktionale Rolle.

Verpflichtende Einschränkungen:

• Maximal 1 Akzentfarbe. Sättigung unter 80 %
• Der "KI-Lila/Blau-Neon"-Look ist strengstens VERBOTEN – keine violetten Button-Glows, keine Neon-Verläufe
• Verwende absolute neutrale Basen (Zinc/Slate) mit kontrastreichen einzelnen Akzenten
• Halte dich für die gesamte Ausgabe an eine Palette – kein Wechsel zwischen warmen und kühlen Grautönen
• Verwende niemals reines Schwarz (#000000) – stattdessen Off-Black, Zinc-950 oder Holzkohle

3. Lege Typografie-Regeln fest

• Anzeige/Überschriften: Enge Laufweite, kontrollierte Skalierung. Nicht schreiend. Hierarchie durch Gewicht und Farbe, nicht nur durch enorme Größe
• Fließtext: Lockere Zeilenführung, maximal 65 Zeichen pro Zeile
• Schriftauswahl: Inter ist für erstklassige/kreative Kontexte VERBOTEN. Erzwinge einzigartige Schriftarten: Geist, Outfit, Cabinet Grotesk oder Satoshi
• Serifen-Verbot: Generische Serifenschriften (Times New Roman, Georgia, Garamond, Palatino) sind VERBOTEN. Wenn für redaktionelle/kreative Kontexte eine Serife benötigt wird, verwende nur unverwechselbare moderne Serifen: Fraunces, Gambarino, Editorial New oder Instrument Serif. Serifen sind in Dashboards oder Software-Oberflächen immer VERBOTEN
• Dashboard-Einschränkung: Verwende ausschließlich Serifenlose-Paarungen (Geist + Geist Mono oder Satoshi + JetBrains Mono)
• Hohe-Dichte-Überschreibung: Wenn die Dichte 7 übersteigt, müssen alle Zahlen in Monospace gesetzt werden

4. Definiere den Hero-Bereich

Der Hero ist der erste Eindruck und muss kreativ, auffällig und niemals generisch sein:

• Inline-Bildtypografie: Bette kleine, kontextbezogene Fotos oder Grafiken direkt zwischen Wörtern oder Buchstaben in der Überschrift ein. Bilder sitzen inline auf Zeilenhöhe, abgerundet, und dienen als visuelle Interpunktion. Dies ist die charakteristische kreative Technik
• Keine Überlappungen: Text darf sich niemals mit Bildern oder anderem Text überschneiden. Jedes Element hat seine eigene saubere räumliche Zone
• Kein Fülltext: "Scrollen zum Entdecken", "Nach unten wischen", Scrollpfeil-Icons, hüpfende Chevrons sind VERBOTEN. Der Inhalt sollte Benutzer auf natürliche Weise anziehen
• Asymmetrische Struktur: Zentrierte Hero-Layouts sind VERBOTEN, wenn die Varianz 4 übersteigt
• CTA-Zurückhaltung: Maximal ein primärer CTA. Keine sekundären "Mehr erfahren"-Links

5. Beschreibe Komponenten-Stile

Beschreibe für jeden Komponententyp Form, Farbe, Schattentiefe und Interaktionsverhalten:

• Buttons: Taktiles Druckfeedback im aktiven Zustand. Keine Neon-Außenglow. Keine benutzerdefinierten Mauszeiger
• Karten: Nur verwenden, wenn Erhabenheit Hierarchie vermittelt. Schatten mit Hintergrundfarbe tönen. Für Layouts mit hoher Dichte Karten durch obere Randtrennlinien oder Negativraum ersetzen
• Eingabefelder/Formulare: Bezeichnung oberhalb des Feldes, optionaler Hilfetext, Fehlertext unterhalb. Standardabstände
• Ladezustände: Skelett-Ladeanimationen, die den genauen Layout-Maßen entsprechen – keine generischen kreisförmigen Spinner
• Leere Zustände: Zusammengestellte Kompositionen, die darauf hinweisen, wie Daten eingefügt werden
• Fehlerzustände: Klare Inline-Fehlermeldungen

6. Definiere Layout-Prinzipien

• Keine überlappenden Elemente – jedes Element hat seine eigene klare räumliche Zone. Kein absolut positionierter Inhalt, der übereinander liegt
• Zentrierte Hero-Bereiche sind VERBOTEN, wenn die Varianz 4 übersteigt – erzwinge geteilten Bildschirm, linksbündig oder asymmetrischen Weißraum
• Die generische "3 gleiche Karten horizontal"-Funktionszeile ist VERBOTEN – verwende 2-spaltigen Zickzack, asymmetrisches Raster oder horizontalen Scroll
• CSS Grid vor Flexbox-Mathematik – niemals calc()-Prozentsatz-Hacks verwenden
• Begrenze Layouts mit Max-Width-Einschränkungen (z. B. 1400px zentriert)
• Vollbildbereiche müssen min-h-[100dvh] verwenden – niemals h-screen (katastrophaler Sprung im iOS Safari)

7. Definiere Responsive-Regeln

Jedes Design muss über alle Viewports hinweg funktionieren:

• Mobile-First-Zusammenbruch (< 768px): Alle mehrspaltigen Layouts brechen auf eine Spalte zusammen. Keine Ausnahmen
• Kein horizontales Scrollen: Horizontaler Überlauf auf Mobilgeräten ist ein kritischer Fehler
• Typografie-Skalierung: Überschriften skalieren über clamp(). Fließtext mindestens 1rem/14px
• Touch-Ziele: Alle interaktiven Elemente mindestens 44px große Antippfläche
• Bildverhalten: Inline-Typografie-Bilder (Fotos zwischen Wörtern) werden auf Mobilgeräten unter der Überschrift gestapelt
• Navigation: Desktop-horizontale Navigation bricht zu einem sauberen mobilen Menü zusammen
• Abstände: Vertikale Abschnittsabstände reduzieren sich proportional (clamp(3rem, 8vw, 6rem))

8. Kodiere die Bewegungsphilosophie

• Federphysik Standard: stiffness: 100, damping: 20 – erstklassiges, schweres Gefühl. Kein lineares Easing
• Ständige Mikrointeraktionen: Jede aktive Komponente sollte einen unendlichen Schleifenzustand haben (Pulse, Typewriter, Float, Shimmer)
• Gestaffelte Orchestrierung: Mounte Listen niemals sofort – verwende Kaskadenverzögerungen für Wasserfall-Enthüllungen
• Leistung: Animieren ausschließlich über transform und opacity. Niemals top, left, width, height animieren. Korn/Rauschfilter nur auf fixierten Pseudoelementen

9. Liste Anti-Patterns (KI-Verrat)

Kodiere diese als explizite "NIEMALS MACHEN"-Regeln in der DESIGN.md:

• Keine Emojis irgendwo
• Keine Schriftart Inter
• Keine generischen Serifenschriften (Times New Roman, Georgia, Garamond) – nur unverwechselbare moderne Serifen, falls nötig
• Kein reines Schwarz (#000000)
• Keine Neon-/Außenglow-Schatten
• Keine übersättigten Akzente
• Keine übermäßigen Verlaufstexte auf großen Überschriften
• Keine benutzerdefinierten Mauszeiger
• Keine überlappenden Elemente – immer saubere räumliche Trennung
• Keine 3-spaltigen gleichgroßen Kartenlayouts
• Keine generischen Namen ("John Doe", "Acme", "Nexus")
• Keine gefälschten runden Zahlen (99,99%, 50%)
• Keine KI-Text-Klischees ("Elevate", "Nahtlos", "Entfesseln", "Next-Gen")
• Kein Fülltext für die Benutzeroberfläche: "Scrollen zum Entdecken", "Nach unten wischen", Scrollpfeile, hüpfende Chevrons
• Keine defekten Unsplash-Links – verwende picsum.photos oder SVG-Avatare
• Keine zentrierten Hero-Bereiche (für Projekte mit hoher Varianz)

Ausgabeformat (DESIGN.md-Struktur)

# Designsystem: [Projekttitel]

## 1. Visuelles Thema & Atmosphäre
(Ausdrucksstarke Beschreibung der Stimmung, Dichte, Varianz und Bewegungsintensität.
Beispiel: "Eine zurückhaltende, galerieluftige Oberfläche mit souveränen asymmetrischen Layouts
und flüssiger Federphysik-Bewegung. Die Atmosphäre ist klinisch und doch warm – wie ein
gut beleuchtetes Architekturbüro.")

## 2. Farbpalette & Rollen
- **Leinwandweiß** (#F9FAFB) – Primäre Hintergrundfläche
- **Reine Oberfläche** (#FFFFFF) – Karten- und Containerfüllung
- **Holzkohletinte** (#18181B) – Primärtext, Zinc-950-Tiefe
- **Gedämpfter Stahl** (#71717A) – Sekundärtext, Beschreibungen, Metadaten
- **Flüsterrand** (rgba(226,232,240,0.5)) – Kartenränder, 1px Strukturlinien
- **[Akzentname]** (#XXXXXX) – Einzelner Akzent für CTAs, aktive Zustände, Fokusringe
(Max. 1 Akzent. Sättigung < 80 %. Kein Lila/Neon.)

## 3. Typografie-Regeln
- **Anzeige:** [Schriftname] – Enge Laufweite, kontrollierte Skalierung, gewichtsgesteuerte Hierarchie
- **Fließtext:** [Schriftname] – Lockere Zeilenführung, 65ch maximale Breite, neutrale Sekundärfarbe
- **Monospace:** [Schriftname] – Für Code, Metadaten, Zeitstempel, Zahlen in hoher Dichte
- **Verboten:** Inter, generische Systemschriften für Premium-Kontexte. Serifenschriften in Dashboards verboten.

## 4. Komponenten-Stile
* **Buttons:** Flach, kein Außenglow. Taktile -1px Verschiebung bei Aktivierung. Akzentfüllung für primär, Geist/Umriss für sekundär.
* **Karten:** Großzügig abgerundete Ecken (2,5rem). Diffuser Flüsterschatten. Nur verwendet, wenn Erhabenheit der Hierarchie dient. Hohe Dichte: durch obere Randtrennlinien ersetzen.
* **Eingabefelder:** Bezeichnung oben, Fehler unten. Fokusring in Akzentfarbe. Keine schwebenden Bezeichnungen.
* **Ladeanimationen:** Skelett-Shimmer, der genauen Layout-Maßen entspricht. Keine kreisförmigen Spinner.
* **Leere Zustände:** Zusammengestellte, illustrierte Kompositionen – nicht nur "Keine Daten"-Text.

## 5. Layout-Prinzipien
(Rasterorientierte responsive Architektur. Asymmetrische Splits für Hero-Bereiche.
Strenger einspaltiger Zusammenbruch unter 768px. Max-Breite-Begrenzung.
Keine Flexbox-Prozentrechnung. Großzügige Innenabstände.)

## 6. Bewegung & Interaktion
(Federphysik für alle interaktiven Elemente. Gestaffelte Kaskaden-Enthüllungen.
Ständige Mikroschleifen auf aktiven Dashboard-Komponenten. Hardwarebeschleunigte
Transformationen nur. Isolierte Client-Komponenten für CPU-intensive Animationen.)

## 7. Anti-Patterns (Verboten)
(Explizite Liste verbotener Muster: keine Emojis, kein Inter, kein reines Schwarz,
keine Neon-Glows, keine 3-spaltigen gleichgroßen Raster, keine KI-Text-Klischees,
keine generischen Platzhalternamen, keine defekten Bildlinks.)

Best Practices

• Sei beschreibend: "Tiefe Holzkohletinte (#18181B)" – nicht nur "dunkler Text"
• Sei funktional: Erkläre, wofür jedes Element verwendet wird
• Sei konsistent: Gleiche Terminologie im gesamten Dokument
• Sei präzise: Gib exakte Hex-Codes, rem-Werte, Pixelwerte in Klammern an
• Sei meinungsstark: Dies ist keine neutrale Vorlage – es erzwingt eine bestimmte, erstklassige Ästhetik

Tipps für den Erfolg

1. Beginne mit der Atmosphäre – verstehe die Stimmung, bevor du Tokens detaillierst
2. Suche nach Mustern – identifiziere konsistente Abstände, Größen und Stile
3. Denke semantisch – benenne Farben nach Zweck, nicht nur nach Aussehen
4. Berücksichtige die Hierarchie – dokumentiere, wie visuelles Gewicht Bedeutung vermittelt
5. Kodiere die Verbote – Anti-Patterns sind genauso wichtig wie die Regeln selbst

Häufige Fallstricke, die es zu vermeiden gilt

• Verwendung von Fachjargon ohne Übersetzung ("rounded-xl" statt "großzügig abgerundete Ecken")
• Weglassen von Hex-Codes oder nur Verwendung beschreibender Namen
• Vergessen der funktionalen Rollen von Designelementen
• Zu vage Atmosphärenbeschreibungen
• Ignorieren der Anti-Pattern-Liste – diese machen die Ausgabe erstklassig
• Zurückfallen auf generische "sichere" Designs anstatt die kuratierte Ästhetik durchzusetzen