Frontend & UI
gpt-taste
Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids.
Worum es geht
Eine Frontend-Direktive, die Layout-Varianz über simulierte Zufallsauswahl von Hero, Typografie, Komponenten und GSAP-Paradigmen erzwingt. Sie setzt außerdem eine AIDA-Seitenstruktur und großzügige Section-Abstände durch.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
Warum das fürs Design zählt
- Hero-Headlines bleiben zwei bis drei Zeilen lang, weil Container breiter werden, statt zu Textwänden umzubrechen.
- Bento-Grids nutzen grid-flow-dense, damit keine Zelle leer oder verzerrt bleibt.
- Billige Meta-Labels sind verboten, und der Textkontrast von Buttons wird vor der Ausgabe geprüft.
Was es abdeckt
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
So installierst du es
gpt-taste
-
Klone das Repo.
git clone https://github.com/Leonxlnx/taste-skill -
Verweise Codex auf die Skill-Datei.
skills/gpt-tasteskill/SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Frag nach einer Seite, und der Skill liefert zuerst einen design_plan-Block, bevor UI-Code entsteht.
-
Prüf seine Zufallsauswahl: Hero-Layout, Font-Stack, Komponenten, GSAP-Paradigmen.
-
Kontrolliere die Pre-Flight-Punkte: Hero-Breitenrechnung, Grid-Dichte, Label-Check, Kontrast.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
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.