In den eigenen Worten des Skills
Diese Skill generiert DESIGN.md-Dateien, die für die Bildschirmgenerierung mit Google Stitch optimiert sind. Sie übersetzt Anti-Slop-Frontend-Engineering-Direktiven in Stitchs native semantische Designsprache – beschreibende, natürlichsprachliche Regeln gepaart mit präzisen Werten, die der KI-Agent von Stitch interpretieren kann. Die Datei dient als Single Source of Truth, um Stitch anzuweisen, hochwertige, nicht generische Interfaces zu generieren.
Sie erzwingt strikte Typografieregeln, kalibrierte Farbpaletten, asymmetrische Layouts, dauerhafte Mikro-Bewegungen und hardwarebeschleunigte Performance. Die Skill enthält explizite Anti-Pattern-Listen, die KI-Design-Klischees wie die Inter-Schrift, Neon-Glows, zentrierte Hero-Sektionen und generische Platzhalterinhalte verbieten.
Was er erzeugt
- Eine DESIGN.md-Datei mit sieben strukturierten Abschnitten: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Motion & Interaction und Anti-Patterns
So funktioniert es
- 01Die Atmosphäre definieren
Bewerten Sie die Zielsetzung des Projekts anhand aussagekräftiger Adjektive aus dem Taste-Spektrum entlang drei Dimensionen: Density (1–10, von Airy bis Cockpit Dense), Variance (1–10, von Symmetric bis Chaotic) und Motion (1–10, von Static bis Cinematic).
- 02Die Farbpalette festlegen
Geben Sie für jede Farbe einen beschreibenden Namen, den Hex-Code und die funktionale Rolle an. Maximal eine Akzentfarbe mit einer Sättigung unter 80 %.
- 03Die Hero-Section definieren
Erzeugen Sie eindrucksvolle erste Eindrücke mit Inline-Bildtypografie (kleine Fotos, die zwischen Wörtern auf Texthöhe eingebettet sind), asymmetrischen Strukturen bei einer Variance über 4 und maximal einem primären CTA.
- 04Component Stylings beschreiben
Legen Sie Form, Farbe, Schattentiefe und Interaktionsverhalten für Buttons, Cards, Inputs, Ladezustände und Fehlerzustände fest.
- 05Die Motion-Philosophie kodieren
Definieren Sie Standardwerte für Federphysik (Stiffness: 100, Damping: 20), dauerhafte Mikro-Interaktionen für aktive Komponenten, gestaffelte Orchestrierung für das Einblenden von Listen sowie Performance-Beschränkungen, die Animationen ausschließlich auf transform und opacity limitieren.