Frontend & UI
apple-design
Les principes d’interface fluide d’Apple traduits en ressorts et gestes pour le web.
De quoi il s’agit
Un savoir distillé des conférences design d’Apple à la WWDC, surtout Designing Fluid Interfaces, transposé en CSS, Pointer Events et bibliothèques de ressorts. Couvre réactivité, interruptibilité, inertie, matériaux, typographie et accessibilité.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Pourquoi ça compte pour le design
- Le retour se déclenche au pointer-down : les éléments pressés cessent de paraître inertes.
- Les animations partent de la valeur affichée en temps réel, sans saut visible en cas d’interruption.
- Les gestes vifs projettent un point d’arrivée : le lancer atterrit là où le geste visait.
Ce que ça couvre
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Comment l’installer
apple-design
-
Clonez le dépôt.
git clone https://github.com/emilkowalski/skills -
Pointez Codex sur le fichier du skill.
skills/apple-design/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez à Codex de construire une sheet, un drawer ou une interaction de glissement.
-
Il suit le pointeur au 1:1 avec pointer capture et enregistre l’historique de vélocité.
-
Au relâchement, il transmet la vélocité à un ressort avec les valeurs d’amortissement fournies.
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.