Frontend & UI
emil-design-eng
Les règles d’Emil Kowalski pour le timing d’animation, l’easing et la finition des composants.
De quoi il s’agit
Encode une philosophie de design engineering : cadre de décision d’animation, conseils sur les ressorts, principes de composant, techniques de clip-path, gestion des gestes, règles de performance et checklist de revue.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Pourquoi ça compte pour le design
- Les actions fréquentes perdent toute animation : les command palettes restent instantanées.
- Les entrées démarrent à scale(0.95), jamais scale(0) : rien ne surgit de nulle part.
- Les popovers s’agrandissent depuis leur déclencheur plutôt que leur centre, préservant le lien spatial.
Ce que ça couvre
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
Comment l’installer
emil-design-eng
-
Clonez le dépôt.
git clone https://github.com/emilkowalski/skills -
Pointez Codex sur le fichier du skill.
skills/emil-design-eng/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez à Codex de relire du code UI ; il renvoie un tableau Avant, Après, Pourquoi.
-
Pour tout nouveau mouvement, il répond : faut-il animer, pourquoi, quel easing, à quelle vitesse.
-
Il applique la checklist et signale transition: all ainsi que les durées au-delà de 300 ms.
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
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
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. 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.