Frontend & UI
gpt-taste
Construit des pages primables avec du scroll GSAP et des grilles bento sans trous.
De quoi il s’agit
Une directive frontend qui force la variance de mise en page par sélection aléatoire simulée du hero, de la typo, des composants et des paradigmes GSAP. Elle impose aussi une structure de page AIDA et de grands espacements entre sections.
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
Pourquoi ça compte pour le design
- Les titres de hero restent sur deux ou trois lignes : les conteneurs s’élargissent au lieu de former des murs de texte.
- Les grilles bento utilisent grid-flow-dense, donc aucune cellule ne reste vide ou cassée.
- Les libellés méta bon marché sont bannis et le contraste du texte des boutons est vérifié avant livraison.
Ce que ça couvre
- 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
Comment l’installer
gpt-taste
-
Clonez le dépôt.
git clone https://github.com/Leonxlnx/taste-skill -
Pointez Codex sur le fichier du skill.
skills/gpt-tasteskill/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez une page ; le skill émet un bloc design_plan avant toute ligne de code UI.
-
Vérifiez ses choix aléatoires : mise en page du hero, pile de polices, composants, paradigmes GSAP.
-
Contrôlez les points de pre-flight : calcul de largeur du hero, densité de grille, chasse aux libellés, contraste.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. 
Frontend & UI Ce qu’il fait imagegen-frontend-web Génère une image de référence horizontale par section de landing page. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.