Frontend & UI
Details that make interfaces feel better
Seize règles concrètes de finition UI avec une checklist de revue.
De quoi il s’agit
Un ensemble de principes de design engineering pour la finition d’interface : rayons concentriques, alignement optique, ombres en couches, animations d’entrée décalées, chiffres tabulaires, zones cliquables et spécificité des transitions.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Pourquoi ça compte pour le design
- Nomme des valeurs exactes : l’échelle à l’appui est toujours 0.96, jamais au jugé.
- Corrige le décalage de rayons imbriqués qui fait paraître la plupart des composants bancals.
- Attrape le décalage de mise en page dû aux chiffres qui changent avant qu’il n’atteigne les utilisateurs.
Ce que ça couvre
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Comment l’installer
Details that make interfaces feel better
-
Clonez le dépôt.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Pointez Codex sur le fichier du skill.
skills/make-interfaces-feel-better/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Orientez Codex vers un composant et demandez-lui d’appliquer les principes.
-
Demandez une revue ; les constats reviennent en tableaux Avant et Après.
-
Déroulez la checklist de quatorze points avant de merger tout changement frontend.
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.