the.invest.room · ressource gratuite

Le skill apple-design et le prompt d'audit

Claude audite ton interface avec les règles de design d'Apple, puis la réécrit à côté

Mis à jour le 2 novembre 2026
Le skill apple-design est un fichier de règles (SKILL.md) qui résume les conférences design d'Apple à la WWDC, surtout « Designing Fluid Interfaces » (2018), traduites pour le web : réagir dès l'appui, un panneau qui suit le doigt, des ressorts au lieu d'animations figées, l'interlettrage des titres. Il est publié en licence MIT par Emil Kowalski. Dans le Reel, on l'a lancé dans une session neuve de Claude Code sur une petite appli de suivi de chantiers, écrite exprès mal faite : il a rendu un audit de 40 défauts, chacun avec la règle enfreinte, puis une nouvelle version de l'appli dans un autre fichier. Ici : comment installer le skill, le prompt exact, et les pages du test pour comparer toi-même.

Installer le skill

  1. Avec Claude Code : le dépôt donne la commande npx skills@latest add emilkowalski/skills, qui installe les skills d'Emil Kowalski, dont apple-design (nous ne l'avons pas lancée : pour le test, on a copié le dossier à la main, comme à l'étape suivante).
  2. Ou à la main : télécharge le dossier skills/apple-design du dépôt github.com/emilkowalski/skills et copie-le dans .claude/skills/apple-design/ à la racine de ton projet (le fichier SKILL.md doit être dedans).
  3. Ouvre Claude Code dans ce dossier : le skill est chargé quand la demande touche au design d'interface. Le prompt ci-dessous le nomme pour être sûr qu'il s'en serve.

Le prompt, tel que testé

J'ai une petite appli web dans avant.html. Le skill apple-design est installé dans .claude/skills/apple-design. Utilise le skill apple-design pour auditer mon interface : écris dans audit.md la liste des problèmes précis que tu trouves, avec pour chacun la règle du skill qu'il enfreint. Puis corrige-les tous et écris la nouvelle version dans apres.html (un seul fichier, mêmes contenus, mêmes fonctions). Ne modifie pas avant.html.

Adapter à ton projet

  1. Remplace avant.html par ton fichier (une page, un composant React, une feuille de style) et apres.html par le nom du nouveau fichier.
  2. Garde la demande « avec pour chacun la règle du skill qu'il enfreint » : c'est ce qui donne un audit qu'on peut relire et trier, au lieu d'une réécriture en bloc.
  3. Garde aussi « Ne modifie pas » l'original : tu compares les deux versions côte à côte et tu choisis ce que tu reprends.

Les pages du test

Kit du test : 4 fichiersà télécharger

L'appli de départ (à nous), la version « rends-la plus premium » sans skill, la version avec le skill et l'audit complet de 40 défauts, tels que Claude les a écrits.

Télécharger le kit →
Le skill apple-designGitHub

Dépôt d'Emil Kowalski, licence MIT, avec ses autres skills de design.

Voir le dépôt →

Ce qu'il faut savoir

  1. Un seul test par version, le 2 novembre 2026, dans Claude Code. Le skill n'a pas été essayé dans claude.ai ni dans un autre outil.
  2. Dans son message de fin, Claude annonce 37 problèmes ; le fichier audit.md qu'il a écrit en liste 40, numérotés de A1 à F9 (il est dans le kit).
  3. L'appli de départ a été écrite exprès avec beaucoup de défauts (délai de 300 ms sur un bouton, panneau bloqué pendant son animation, contrastes trop faibles) : sur une interface déjà soignée, l'audit en trouvera beaucoup moins.
  4. Sans le skill, « rends-la plus premium » donne déjà une page sombre et propre, et le bouton réagit aussi à l'appui. La vraie différence est sous le doigt : le panneau qui se tire, les ressorts, l'interlettrage, la réduction des animations si le téléphone la demande.
  5. Claude a précisé qu'il n'avait pas ouvert la page dans un navigateur : c'est nous qui l'avons testée et filmée, sur Chrome en mode mobile, avec de vrais appuis et glissers. Relis toujours le code avant de le mettre en ligne.
  6. Claude Code demande un abonnement Claude payant ou une clé d'API.
Skill apple-design d'Emil Kowalski, licence MIT, non affilié à Apple. Apple et WWDC sont des marques d'Apple Inc. Sorties de Claude montrées telles quelles, un seul test par version.
Tu as aimé ? Suis @the.invest.room : une astuce IA, archi ou investissement chaque jour.