Design-Systeme
Stitch Design Taste
Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt.
Worum es geht
Erzeugt eine DESIGN.md-Datei, die auf die Screen-Generierung von Google Stitch abgestimmt ist. Sie kodiert Atmosphäre, Farbe, Typografie, Komponenten, Layout, Motion und eine explizite Liste verbotener Muster.
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
Warum das fürs Design zählt
- Stitch-Screens erben eine Akzentfarbe unter 80 % Sättigung statt Neon-Lila-Verläufen.
- Zentrierte Heros und drei gleich große Kartenreihen sind oberhalb der festgelegten Varianz verboten.
- Loading- und Empty-States werden skeletal und komponiert statt generischer Spinner.
Was es abdeckt
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
So installierst du es
Stitch Design Taste
-
Klone das Repo.
git clone https://github.com/Leonxlnx/taste-skill -
Verweise Codex auf die Skill-Datei.
skills/stitch-skill/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Beschreib die Stimmung des Projekts, und der Skill setzt Werte für Dichte, Varianz und Motion.
-
Er liefert eine DESIGN.md mit sieben Abschnitten, Hex-Codes und funktionalen Farbrollen.
-
Gib diese Datei direkt an Stitch weiter, oder über den Stitch-MCP-Server.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. 
Frontend & UI Was es macht imagegen-frontend-web Erzeugt ein horizontales Referenzbild pro Section einer Landingpage. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.