Frontend e UI
gpt-taste
Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti.
Che cos’è
Una direttiva frontend che forza varietà di layout tramite selezione casuale simulata di hero, tipografia, componenti e paradigmi GSAP. Impone anche la struttura di pagina AIDA e spaziature ampie tra le sezioni.
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
Perché conta per il design
- I titoli hero restano su due o tre righe perché i contenitori si allargano invece di spezzarsi in muri di testo.
- Le griglie bento usano grid-flow-dense, così nessuna cella resta vuota o spezzata.
- Le etichette meta di scarsa qualità sono bandite e il contrasto del testo dei bottoni viene verificato prima dell’output.
Cosa copre
- 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
Come installarlo
gpt-taste
-
Clona il repository.
git clone https://github.com/Leonxlnx/taste-skill -
Punta Codex sul file della skill.
skills/gpt-tasteskill/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi una pagina: la skill emette un blocco design_plan prima di qualsiasi codice UI.
-
Rivedi le sue scelte casuali: layout dell’hero, stack di font, componenti, paradigmi GSAP.
-
Controlla i punti di pre-flight: calcolo della larghezza dell’hero, densità della griglia, verifica delle etichette, contrasto.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. 
Frontend e UI Cosa fa imagegen-frontend-web Genera un’immagine di riferimento orizzontale per ogni sezione della landing page. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.