gpt-tastedi Leonxlnx

GPT Taste Skill.

Una skill per Claude Code e Codex per il design UI: layout editoriali, varietà di layout e animazioni GSAP in un'unica skill frontend.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

Leonxlnx/taste-skill · skills/gpt-tasteskill/SKILL.mdSKILL.md

--- name: gpt-taste description: 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 ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. --- ## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP) ## 2. AIDA STRUCTURE & SPACING ## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE ## 4. THE GAPLESS BENTO GRID ## 5. ADVANCED GSAP MOTION & HOVER PHYSICS ## 6. COMPONENT ARSENAL & CREATIVITY

Intestazione e sezioni lette dal file originale il 14/09/2026 · 7.857 caratteri in totale

01 Cosa fa

Cosa Fa la Skill gpt-taste in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill impone un'ingegneria del design frontend da premio che supera i bias standard degli LLM nel layout.

Utilizza una randomizzazione basata su Python per evitare layout ripetitivi, impone una struttura di pagina AIDA con ampie spaziature tra le sezioni, limita i titoli hero a 2-3 righe usando container ultra-larghi, costruisce bento grid matematicamente perfette e senza vuoti con grid-flow-dense, implementa GSAP ScrollTrigger avanzati per animazioni di pinning, stacking e scrubbing, incorpora micro-immagini inline direttamente nella tipografia e vieta meta-etichette come 'SECTION 01' e container troppo stretti che causano testi su 6 righe. Ogni pagina richiede un blocco di verifica design_plan prima di generare il codice UI.

Che cosa produce

Codice React/UI con animazioni GSAP ScrollTrigger e grid matematicamente perfette

Vedi l'esempio di prompt ↗

Come funziona

01
Simulare la Randomizzazione Python a Partire dal Seed del Prompt
Prima di scrivere qualsiasi codice UI, simulare uno script Python che utilizza il conteggio dei caratteri del prompt dell'utente per selezionare in modo deterministico un'architettura hero, uno stack tipografico, tre architetture di componenti e due paradigmi GSAP.
02
Strutturare la Pagina con il Framework AIDA
Costruire la pagina seguendo Attenzione (hero cinematografico), Interesse (bento grid ad alta densità), Desiderio (effetti di scroll GSAP) e Azione (CTA imponente e footer).
03
Costruire Bento Grid Senza Vuoti con Precisione Matematica
Utilizzare grid-flow-dense di Tailwind su ogni bento grid e verificare matematicamente che i valori col-span e row-span si incastrino perfettamente senza vuoti o angoli mancanti.
04
Implementare Animazioni GSAP ScrollTrigger Avanzate
Scrivere GSAP reale con ScrollTrigger per il pinning dello scroll con layout divisi, effetti di scala e dissolvenza delle immagini, reveal di testo in scrubbing con cambi sequenziali di opacità e stacking dinamico delle card.
05
Generare la Verifica Obbligatoria del Design_plan
Prima di scrivere qualsiasi codice React o UI, generare un blocco design_plan contenente l'esecuzione dell'RNG Python, il controllo AIDA, la verifica matematica dell'hero per garantire 2-3 righe, la prova di densità del bento e la conferma dell'assenza di etichette.

02 Trova la tua applicazione

Quando usare la skill gpt-taste

Usa la skill gpt-taste in Claude Code o Codex quando il lavoro è design UI di questo tipo. Campo d'azione e limiti qui sotto sono tratti dal file della skill.

Buona applicazione

Pagine frontend premiate che richiedono effetti di scroll GSAP cinematografici e ricchi di movimento
Layout editoriali ad alta densità con bento grid matematicamente perfette
Progetti che necessitano di varietà nel layout per rompere schemi di output ripetitivi degli LLM
Interfacce che richiedono pinning, stacking e scrubbing avanzati con GSAP ScrollTrigger

Conosci i limiti

Le interfacce statiche senza movimento sono severamente vietate

Cosa fornire

RichiedeGSAP — indicato nel SKILL.md come obbligatorio.

03 Dentro la skill

Regole che la Skill gpt-taste Impone a Claude Code e Codex

6 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Titoli Hero Limitati a un Massimo di 2-3 Righe
Utilizzare container ultra-larghi come max-w-5xl o max-w-6xl per l'H1 e rendere la dimensione del font più piccola usando clamp(3rem, 5vw, 5.5rem) per garantire che il titolo non superi mai 2 o 3 righe.
Meta-etichette Vietate in Modo Permanente
Etichette come 'SECTION 01', 'SECTION 04', 'QUESTION 05' e 'ABOUT US' sono vietate per sempre. Vanno rimosse completamente poiché appaiono economiche e poco professionali.
Lo Stack Tipografico Esclude il Font Inter
Selezionare tra Satoshi, Cabinet Grotesk, Outfit o Geist. Il font Inter è esplicitamente vietato e non deve mai essere utilizzato.
Nessuna emoji nel codice o nell'output
Mantenere una formattazione strettamente professionale non usando mai emoji nel codice, nei commenti o in qualsiasi output.
Evitare lo scorrimento orizzontale con un wrapper overflow
Racchiudere l'intera pagina in un elemento main con le classi overflow-x-hidden w-full max-w-full per impedire in modo assoluto la comparsa di barre di scorrimento orizzontali causate da animazioni fuori schermo.
Contrasto perfetto del testo dei pulsanti richiesto
I pulsanti devono essere perfettamente leggibili: sfondi scuri con testo bianco e sfondi chiari con testo scuro. Un testo invisibile è un errore.

04 Mettila al lavoro

Installa gpt-taste in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi gpt-taste a Claude Code, Codex o al tuo Agent

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste

Comando generico della CLI skills per skills/gpt-tasteskill/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Build a landing page for [product name] showcasing [three key features]. Use a cinematic hero with inline typography images, a gapless bento grid for the feature cards, GSAP scroll pinning to reveal testimonials as the user scrolls, and horizontal accordion components for the FAQ section. Include a massive CTA section at the bottom.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verificare che il titolo hero si distribuisca su 2-3 righe usando contenitori ultra-larghi come max-w-5xl o max-w-6xl
Confermare che la griglia bento usi grid-flow-dense e si incastri matematicamente senza spazi vuoti
Controllare che tutte le meta-etichette come SECTION 01 o QUESTION 05 siano state rimosse
Verificare che il contrasto del testo dei pulsanti sia perfetto: testo bianco su sfondi scuri e testo scuro su sfondi chiari
Confermare che la struttura della pagina segua il framework AIDA con Navigation, Attention hero, Interest bento, Desire GSAP e Action footer
Verificare che non ci siano icone a forma di timbro o tag spam nella sezione hero

In OpenDesign importa gpt-taste dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
File della skill: skills/gpt-tasteskill/SKILL.md Checksum del contenuto registrato alla verifica; commit ccbc156
License: MIT Da LICENSE.
Stelle del repository: 86.946 Snapshot GitHub scattata il 14/09/2026 per l'intero repository Leonxlnx/taste-skill, che contiene 11 skill in questo catalogo. Non è un punteggio o conteggio utilizzi per gpt-taste.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

DIRETTIVA FONDAMENTALE: DESIGN ENGINEERING DI LIVELLO AWWWARDSPosiziona lo skill come design engineering d'élite che rompe i bias statistici degli LLM nella generazione di layout
RANDOMIZZAZIONE REALE GUIDATA DA PYTHON (ROMPERE IL CICLO)Impone uno script Python simulato che usa il conteggio dei caratteri del prompt per selezionare i layout in modo deterministico e prevenire le ripetizioni
STRUTTURA E SPAZIATURA AIDARichiede il framework Attention, Interest, Desire, Action con un'ampia spaziatura verticale py-32 md:py-48 tra le sezioni
ARCHITETTURA HERO E LA REGOLA FERREA DELLE 2 RIGHEImpone contenitori ultra-larghi e un massimo di 2-3 righe per i titoli, vietando contenitori stretti che causano andate a capo su 6 righe
LA GRIGLIA BENTO SENZA VUOTIRichiede grid-flow-dense e la verifica matematica che i valori di col-span e row-span non lascino alcun vuoto
MOTION GSAP AVANZATO E FISICA DELL'HOVERDefinisce il pinning dello scroll, la dissolvenza con scala delle immagini, le rivelazioni di testo con scrubbing, l'impilamento delle card e gli effetti di trasformazione al passaggio del mouse
ARSENALE DI COMPONENTI E CREATIVITÀElenca immagini tipografiche inline, accordion orizzontali, marquee infiniti e caroselli di testimonianze per una selezione randomizzata
CONTENUTI, RISORSE E DIVIETI RIGOROSIVieta per sempre le meta-etichette, specifica il seeding delle immagini picsum con filtri CSS e richiede il wrapper overflow-x-hidden
PRE-FLIGHT OBBLIGATORIO <design_plan>Richiede un blocco di verifica prima di qualsiasi codice UI con RNG Python, controllo AIDA, calcolo hero, prova di densità bento

Descrizione della skill

"Ingegnere esperto in UX/UI e motion design GSAP avanzato. Impone randomizzazione vera guidata da Python per varianza di layout, struttura di pagina AIDA rigorosa, tipografia editoriale ampia (vieta wrap di 6 righe), griglie bento senza vuoti, ScrollTrigger GSAP rigorosi (pinning, stacking, scrubbing), micro-immagini inline e spaziatura massiva tra sezioni."

Descrizione del front-matter da SKILL.md. Il file completo è circa 7.857 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill gpt-taste

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Perché questo skill usa la randomizzazione Python prima di generare il codice UI?

Gli LLM sono intrinsecamente pigri e scelgono sempre la prima opzione di layout a causa di bias statistici. Lo skill simula uno script Python usando il numero di caratteri del tuo prompt come seed deterministico per forzare la selezione di architetture hero, stack tipografici, componenti e animazioni GSAP variati, evitando output ripetitivi.

GPT Taste

Esegui gpt-taste su un compito di UI design reale.

Scarica OpenDesign, importa gpt-taste dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/Leonxlnx/taste-skill --skill gpt-taste