gpt-tastepar Leonxlnx

GPT Taste Skill.

Un skill Claude Code et Codex pour la conception UI : mises en page éditoriales, variété de layouts et animations GSAP réunis en un seul skill frontend.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

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

En-tête et titres de section lus depuis le fichier d'origine le 14/09/2026 · 7 857 caractères au total

01 Ce qu'il fait

Ce que fait le skill gpt-taste dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill impose une conception frontend primée qui rompt avec les biais de mise en page standards des LLM.

Il utilise une randomisation pilotée par Python pour éviter les mises en page répétitives, impose une structure de page AIDA avec un espacement massif entre sections, limite les titres du hero à 2-3 lignes grâce à des conteneurs ultra-larges, construit des grilles bento sans espaces mathématiquement parfaites avec grid-flow-dense, met en œuvre des GSAP ScrollTriggers avancés pour l'épinglage, l'empilement et les animations scrubbées, intègre des micro-images en ligne directement dans la typographie, et interdit les méta-labels comme « SECTION 01 » et les conteneurs étroits provoquant des retours à la ligne sur 6 lignes de texte. Chaque page nécessite un bloc de vérification design_plan avant de produire le code UI.

Ce qu'il produit

Code React/UI avec des animations GSAP ScrollTrigger et des grilles mathématiquement parfaites

Voir l'exemple de prompt ↗

Fonctionnement

01
Simuler une randomisation Python à partir d'une graine issue du prompt
Avant d'écrire tout code UI, simuler un script Python utilisant le nombre de caractères du prompt utilisateur pour sélectionner de manière déterministe une architecture de hero, une pile typographique, trois architectures de composants et deux paradigmes GSAP.
02
Structurer la page selon le framework AIDA
Construire la page en suivant Attention (hero cinématographique), Intérêt (grille bento à haute densité), Désir (effets de défilement GSAP) et Action (CTA massif et footer).
03
Construire des grilles bento sans espaces avec une précision mathématique
Utiliser grid-flow-dense de Tailwind sur chaque grille bento et vérifier mathématiquement que les valeurs col-span et row-span s'imbriquent parfaitement, sans vide ni coin manquant.
04
Mettre en œuvre des animations GSAP ScrollTrigger avancées
Écrire du GSAP réel avec ScrollTrigger pour l'épinglage au défilement avec des mises en page divisées, des effets de mise à l'échelle et de fondu d'image, des révélations de texte scrubbées avec des changements d'opacité séquentiels, et un empilement dynamique de cartes.
05
Produire la vérification obligatoire du design_plan
Avant d'écrire tout code React ou UI, produire un bloc design_plan contenant l'exécution du RNG Python, la vérification AIDA, la vérification mathématique du hero garantissant 2-3 lignes, la preuve de densité bento et la confirmation du balayage des labels.

02 Trouvez celui qui vous convient

Quand utiliser le skill gpt-taste

Utilisez le skill gpt-taste dans Claude Code ou Codex quand le travail relève de ce type de design UI. Portée et limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Pages frontend primées nécessitant des effets de défilement GSAP cinématographiques et riches en mouvement
Mises en page éditoriales à haute densité avec des grilles bento mathématiquement parfaites
Projets nécessitant une variété de mises en page pour rompre avec les schémas répétitifs des sorties LLM
Interfaces nécessitant un épinglage, un empilement et un scrubbing GSAP ScrollTrigger avancés

Connaître les limites

Les interfaces statiques sans mouvement sont strictement interdites

Quoi fournir

NécessiteGSAP — indiqué comme requis dans le SKILL.md.

03 Dans le skill

Règles que le skill gpt-taste donne à Claude Code et Codex

6 instructions concrètes, valeurs par défaut et limites que SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

Titres du hero limités à 2-3 lignes maximum
Utiliser des conteneurs ultra-larges comme max-w-5xl ou max-w-6xl pour le H1 et réduire la taille de police avec clamp(3rem, 5vw, 5.5rem) pour garantir que le titre ne dépasse jamais 2 à 3 lignes.
Méta-labels définitivement interdits
Les labels comme « SECTION 01 », « SECTION 04 », « QUESTION 05 » et « ABOUT US » sont interdits pour toujours. Supprimez-les entièrement car ils paraissent bon marché et peu professionnels.
La pile typographique exclut la police Inter
Choisir parmi Satoshi, Cabinet Grotesk, Outfit ou Geist. La police Inter est explicitement interdite et ne doit jamais être utilisée.
Aucun emoji dans le code ou la sortie
Maintenez un formatage strictement professionnel en n'utilisant jamais d'emojis dans le code, les commentaires ou toute sortie.
Éviter le défilement horizontal avec un wrapper d'overflow
Enveloppez toute la page dans un élément main avec les classes overflow-x-hidden w-full max-w-full pour empêcher absolument les barres de défilement horizontales causées par des animations hors écran.
Contraste parfait du texte des boutons requis
Les boutons doivent être parfaitement lisibles, avec un texte blanc sur les fonds sombres et un texte sombre sur les fonds clairs. Un texte invisible constitue un échec.

04 Mettez-le en pratique

Installer gpt-taste dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter gpt-taste à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour skills/gpt-tasteskill/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que le titre du hero s'affiche sur 2-3 lignes en utilisant des conteneurs ultra-larges comme max-w-5xl ou max-w-6xl
Confirmez que la grille bento utilise grid-flow-dense et s'imbrique mathématiquement sans aucun espace vide
Vérifiez que tous les méta-labels comme SECTION 01 ou QUESTION 05 sont supprimés
Vérifiez que le contraste du texte des boutons est parfait, avec un texte blanc sur fond sombre et un texte sombre sur fond clair
Confirmez que la structure de la page suit le cadre AIDA avec Navigation, Attention hero, Interest bento, Desire GSAP et Action footer
Vérifiez qu'aucune icône de tampon ni tag spam n'existe dans la section hero

Dans OpenDesign, importez gpt-taste depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branche main
Fichier du skill: skills/gpt-tasteskill/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit ccbc156
License: MIT D'après LICENSE.
Étoiles du dépôt: 86 946 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt Leonxlnx/taste-skill, qui contient 11 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour gpt-taste.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

DIRECTIVE FONDAMENTALE : INGÉNIERIE DE DESIGN NIVEAU AWWWARDSPositionne le skill comme une ingénierie de design d'élite qui brise les biais statistiques des LLM dans la génération de mise en page
RANDOMISATION RÉELLE PILOTÉE PAR PYTHON (BRISER LA BOUCLE)Impose un script Python simulé qui s'appuie sur le nombre de caractères du prompt pour sélectionner les mises en page de manière déterministe et éviter la répétition
STRUCTURE AIDA & ESPACEMENTExige le cadre Attention, Interest, Desire, Action avec un espacement vertical massif py-32 md:py-48 entre les sections
ARCHITECTURE DU HERO & LA RÈGLE D'AIRAIN DES 2 LIGNESImpose des conteneurs ultra-larges et un maximum de 2-3 lignes pour les titres, interdit les conteneurs étroits provoquant des retours à la ligne sur 6 lignes
LA GRILLE BENTO SANS ESPACEExige grid-flow-dense et une vérification mathématique que les valeurs col-span et row-span ne laissent aucun vide
MOTION GSAP AVANCÉ & PHYSIQUE DE SURVOLDéfinit l'épinglage au défilement, le fondu-échelle des images, les révélations de texte défilantes, l'empilement de cartes et les effets de transformation au survol
ARSENAL DE COMPOSANTS & CRÉATIVITÉRépertorie les images typographiques en ligne, les accordéons horizontaux, les bandeaux défilants infinis et les carrousels de témoignages pour une sélection aléatoire
CONTENU, RESSOURCES & INTERDICTIONS STRICTESInterdit définitivement les méta-labels, spécifie l'amorçage d'images picsum avec des filtres CSS et exige un wrapper overflow-x-hidden
VÉRIFICATION PRÉALABLE OBLIGATOIRE <design_plan>Exige un bloc de vérification avant tout code UI avec un RNG Python, un contrôle AIDA, un calcul du hero, une preuve de densité bento

Description du skill lui-même

Expert UX/UI & ingénierie GSAP avancée. Applique une randomisation authentique pilotée par Python pour la variance de mise en page, structure AIDA stricte, typographie éditoriale large (interdit les blocs de 6 lignes), grilles bento sans espaces, ScrollTriggers GSAP stricts (épinglage, empilement, scrubbing), micro-images inline et espacements massifs entre sections.

Description en préambule du fichier SKILL.md. Le fichier complet fait environ 7 857 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill gpt-taste

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Pourquoi ce skill utilise-t-il une randomisation Python avant de générer le code UI ?

Les LLM sont intrinsèquement paresseux et choisissent toujours la première option de mise en page en raison de biais statistiques. Le skill simule un script Python utilisant le nombre de caractères de votre prompt comme graine déterministe pour forcer la sélection d'architectures de hero, de piles typographiques, de composants et d'animations GSAP variées, évitant ainsi une sortie répétitive.

Goût GPT

Exécuter gpt-taste sur une vraie tâche de design UI.

Téléchargez OpenDesign, importez gpt-taste depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills