Le skill qui donne à Claude le sens du détail d'Apple
Un fichier gratuit, une commande, et ton agent arrête de produire des interfaces qui sentent le template.
Le problème : un agent n'a pas de goût
Tu demandes une interface à Claude. Le code marche, tout est là. Et pourtant ça ne ressemble à rien : les animations sont molles, les ombres sont des bordures grises, les panneaux apparaissent d'un côté et repartent de l'autre.
Ce n'est pas un problème de capacité, c'est un problème de références. Un agent connaît la syntaxe, mais personne ne lui a dit quelle valeur choisir ni pourquoi. Alors il prend la plus courante, qui est aussi la plus fade.
Les agents n'ont pas beaucoup de goût. Je l'ai vu un paquet de fois : ils ne choisissent pas les bons ingrédients pour une animation. Toutes ces petites choses s'accumulent et font que ton interface est soit excellente, soit... juste correcte.Emil Kowalski, dans le dépôt du skill
Un skill, c'est exactement le correctif : un fichier de règles que Claude lit avant de coder. Celui-ci s'appelle apple-design, il fait 283 lignes, et il contient les règles de mouvement, de matière et de typographie d'Apple, tirées de ses propres conférences et traduites pour le web.
Qui l'a écrit, et pourquoi ça compte
Un fichier de règles de design ne vaut que par la personne qui l'a écrit. Celui-ci vient d'Emil Kowalski, design engineer chez Linear, passé par l'équipe design de Vercel.
Il est surtout l'auteur de deux librairies que tu as déjà croisées sans le savoir : sonner (les notifications toast) et vaul (le panneau qui monte du bas, celui qu'on attrape au doigt). À elles deux, elles sont téléchargées près de 88 millions de fois par semaine sur npm. Autrement dit, les règles de ce fichier ne sont pas des opinions de blog : ce sont celles qui tournent déjà dans une bonne partie du web.
L'installer
Le dépôt contient neuf skills en tout. Le plus simple, si tu n'as pas envie de toucher au terminal : colle ce prompt dans Claude Code. Il installe les neuf d'un coup, vérifie ce qui est bien arrivé et te dit où.
Installe les skills de design d'Emil Kowalski sur cette machine, pour tous mes projets (installation globale). 1. Lance : npx skills@latest add emilkowalski/skills --all -g 2. Vérifie que les neuf skills sont bien arrivés dans le dossier des skills de Claude Code : apple-design, emil-design-eng, animate, review-animations, improve-animations, find-animation-opportunities, animation-vocabulary, pick-ui-library, prototype. 3. Dis-moi lesquels sont installés, à quel emplacement exact, et ce que fait chacun en une phrase. Si la commande échoue, montre-moi l'erreur telle quelle. Ne réessaie pas en boucle et ne télécharge pas les fichiers à la main pour contourner.
-g de la commande à l'intérieur du prompt.Si tu préfères le terminal
Cette commande n'installe que le skill qui nous intéresse ici, dans le projet courant :
npx skills@latest add emilkowalski/skills --skill apple-design
Le skill atterrit dans .claude/skills/, donc il ne vaut que pour ce projet. Pour l'avoir sur tous tes projets, ajoute -g : il s'installe alors dans ~/.claude/skills/.
npx skills@latest add emilkowalski/skills --skill apple-design -g
Deux autres commandes utiles : --list affiche les neuf skills sans rien installer, et --all les prend tous d'un coup.
skills n'est pas d'Emil : c'est un installeur open source de Vercel Labs qui sert à poser des skills depuis n'importe quel dépôt GitHub. Il gère Claude Code et plus de 75 autres agents, chacun avec son dossier. Tu peux donc aussi t'en servir pour tes propres skills.Ce qu'il change concrètement
Le fichier tient en dix-sept sections. Voici celles qui changent le plus le rendu de ce que Claude te sort.
Le retour visuel se joue à l'appui, pas au relâchement
Un bouton doit réagir à l'instant où le doigt le touche, pas quand on le lâche. Attendre le clic donne une interface qui semble morte. La règle vaut pour toute la durée du geste : pendant un glissement, l'interface suit en continu, elle n'anime pas seulement à la fin.
Tout doit pouvoir être rattrapé en plein vol
C'est le principe que le skill désigne comme le plus important. Une fenêtre qui se ferme et qu'on rattrape doit repartir vers le doigt, sans finir sa fermeture d'abord. Conséquence directe dans le code : on anime depuis la valeur affichée à l'écran, jamais depuis la valeur cible, sinon l'élément saute. Et on évite les transitions CSS pour tout ce qui se manipule au doigt, car elles ne se rattrapent pas.
Des ressorts, pas des durées
Une animation à durée fixe ne sait pas répondre à un nouveau geste. Un ressort, si : l'objectif change, le mouvement reste continu. Apple a remplacé le trio masse, raideur, amortissement par deux réglages lisibles par un designer : l'amortissement (le rebond) et la réponse (la vivacité).
La vitesse du doigt passe dans l'animation
Quand le geste se termine, l'animation reprend exactement à la vitesse du doigt. Il n'y a donc aucune couture entre le moment où on lâche et le moment où ça continue tout seul. Le skill appelle ça le détail qui sépare « fluide » de « correct ».
On vise là où le geste allait, pas là où il s'arrête
Un lancer ne s'accroche pas au point le plus proche du relâchement, mais au point le plus proche de là où le mouvement allait finir. Le skill donne la formule exacte utilisée par Apple, et précise au passage que la formule de physique qu'on trouve partout ailleurs n'est pas celle-là.
Ce qui entre par la droite ressort par la droite
Un panneau qui arrive d'un côté et repart par le bas désoriente. Même chemin à l'aller et au retour, et l'élément part de ce qui l'a déclenché : un menu s'ouvre depuis son bouton, pas depuis le centre de l'écran.
Les bords résistent, ils ne bloquent pas
Arrivé en bout de course, l'élément continue de suivre le doigt en résistant de plus en plus. Un arrêt net se lit comme un bug, une résistance progressive se lit comme « c'est la fin, mais je te réponds toujours ».
La transparence sert à hiérarchiser, pas à décorer
Les barres et panneaux sont des couches translucides sous lesquelles le contenu défile, pas des bandes opaques. Le skill va jusqu'au détail qui trahit les copies ratées : ne jamais empiler deux surfaces translucides claires, et faire apparaître une surface en verre en animant le flou et l'échelle ensemble, pas en la faisant simplement apparaître.
L'espacement des lettres dépend de la taille
Une seule valeur d'interlettrage pour tout le site est forcément fausse quelque part. Les grands titres se resserrent (valeur négative), le texte courant reste proche de zéro. Même logique pour l'interligne, serré sur les gros titres, aéré sur le corps de texte.
Le mouvement réduit n'est pas l'absence de mouvement
Le skill traite trois réglages système distincts, pas seulement le premier : mouvement réduit (on remplace les glissements par des fondus courts), transparence réduite (les surfaces deviennent opaques) et contraste renforcé. La plupart des interfaces générées ignorent les deux derniers.
Les valeurs de ressort qu'Apple utilise vraiment
C'est le genre de chiffres qu'un agent invente s'il ne les a pas. Le skill les lui donne :
| Interaction | Amortissement | Réponse |
|---|---|---|
| Déplacer un élément | 1.0 | 0.4 |
| Rotation | 0.8 | 0.4 |
| Panneau qui monte du bas | 0.8 | 0.3 |
La règle de conduite qui va avec compte autant que les valeurs : pas de rebond par défaut. On met de l'amortissement à 1.0 partout, et on n'autorise le rebond que si le geste lui-même portait de l'élan. Un menu qui apparaît en fondu et qui rebondit, c'est faux. Une carte qu'on a lancée et qui rebondit, c'est juste.
Comment s'en servir
Une fois le fichier posé, tu n'as rien de particulier à faire : Claude le charge quand le sujet s'y prête. Tu peux aussi l'appeler explicitement, ce qui est plus fiable quand la demande est courte.
Utilise le skill apple-design. Construis un panneau qui monte du bas de l'écran (bottom sheet), en React. Il doit se manipuler au doigt : suivi 1:1 pendant le glissement, résistance progressive au-delà du bord haut, et fermeture décidée par la vitesse du geste et non par la position atteinte. Je dois pouvoir le rattraper en pleine fermeture et le renvoyer en haut sans attendre la fin de l'animation.
L'autre usage, plus rentable : le lâcher sur une interface qui existe déjà.
Utilise le skill apple-design. Relis les animations et les transitions de ce projet, puis liste ce qui s'écarte des règles du skill. Pour chaque point : le fichier, ce qui ne va pas, la correction concrète, et l'effet que ça aura pour l'utilisateur. Classe du plus visible au moins visible. Ne modifie rien pour l'instant.
Les huit autres skills du même dépôt
apple-design n'est qu'un des neuf. Les autres, décrits par leur auteur :
emil-design-eng
Le skill principal : surtout de l'animation, avec des conseils de design.
animate
Construit une animation de zéro en choisissant la bonne courbe, la bonne durée et les bonnes propriétés.
review-animations
Passe tes animations au crible, sévèrement, selon ses règles.
improve-animations
Audite toutes les animations du projet et rend des plans autonomes et priorisés, exécutables par n'importe quel agent.
find-animation-opportunities
Cherche les endroits de ton interface qui gagneraient vraiment à être animés, et te dit aussi ce qu'il ne faut pas animer.
animation-vocabulary
Te donne les mots exacts pour décrire l'animation que tu veux, et donc l'obtenir.
pick-ui-library
Fait choisir à ton agent une librairie éprouvée plutôt que de recoder un composant à la main ou d'installer un paquet abandonné.
prototype
Construit plusieurs versions d'un même bout d'interface et te les fait comparer dans un sélecteur.
npx skills@latest add emilkowalski/skills --allSources
Le skill a été lu dans son intégralité pour écrire ce guide, et les conférences Apple dont il se réclame ont été vérifiées une par une. Les chiffres de téléchargement viennent de l'API npm, relevés le 5 août 2026.
Le skill : github.com/emilkowalski/skills (licence MIT). L'installeur : vercel-labs/skills. Les conférences Apple citées : Designing Fluid Interfaces (WWDC 2018), The details of UI typography (WWDC 2020), Designing Audio-Haptic Experiences (WWDC 2019) et Principles of great design (WWDC 2026).
Ce guide n'a aucun lien avec Apple, qui ne publie pas ce skill et ne le cautionne pas : il s'agit d'une lecture des conférences publiques d'Apple par un tiers. Un skill ne remplace pas ton jugement, il donne à l'agent des références par défaut. Relis toujours ce qu'il produit, surtout sur les interactions au doigt, et teste sur un vrai téléphone.
Lire un guide, c'est bien.
Construire pendant 30 jours, c'est autre chose.
Ce guide t'a donné une méthode. Le problème, c'est qu'on enregistre des astuces IA et qu'on n'en applique aucune. Le Challenge IA, c'est l'inverse : un défi par jour, un système construit par jour, pendant 30 jours. Les inscriptions ouvrent bientôt.
Un challenge par jour
30 jours, 30 systèmes qui tournent pour toi.
Tes propres agents
Prompts et agents à installer pendant que tu construis.
Vidéos et démos réelles
Je construis devant toi, tu refais derrière.
Accès à vie
Ce que tu construis reste à toi, sans limite de temps.
Gratuit et sans engagement. Les inscrits sont prévenus en premier.
Pas le temps d'apprendre ? On le fait pour toi.
Des solutions IA sur mesure, clés en main, pour automatiser tes process, réduire tes coûts et gagner du temps sur ce qui compte. Agents IA, automatisations, outils internes : on construit, tu récoltes.
De 0 à 70 000 abonnés en 3 mois. Ne cherche plus jamais quoi poster.
Je l'ai construite pour moi, parce que je perdais mes journées à chercher quoi poster. Zoe surveille les créateurs de ta niche, repère les Reels qui explosent cette semaine, comprend pourquoi ils marchent, et t'écrit le script du tien avec ta manière de parler. Elle tourne toujours sur mon compte tous les jours. Elle est maintenant ouverte à tout le monde.
Elle repère
Les Reels qui font x5 la moyenne du compte qui les a publiés.
Elle explique
Ce qui a marché dans la vidéo, hook par hook.
Elle écrit
Le script prêt à tourner, avec ta manière de parler.
Sans engagement, résiliable en un clic. Les résultats dépendent de ton travail : Zoe te dit quoi tourner, elle ne tourne pas à ta place.
Lis la suite gratuitement
Entre tes infos pour débloquer le guide complet.