Comment améliorer le design de ton site avec Apple Design

00 Le principe

Ce que le skill apporte

Écrit par Emil Kowalski, ce skill s’appuie sur des conférences WWDC, les conférences d’Apple pour les développeurs. Ses 17 rubriques adaptent ces enseignements aux interfaces web, avec une place importante donnée au mouvement. Il est indépendant d’Apple.

À regarder

Ce que tu peux améliorer

Typographie

Des titres lisibles et une hiérarchie cohérente entre les tailles, les graisses et les interlignes.

Cohérence visuelle

Des espacements, des couleurs et des formes qui servent la même direction.

Interactions

Des boutons qui réagissent dès l’appui et des gestes qui suivent le mouvement de l’utilisateur.

Animations

Des transitions fluides, qu’on peut interrompre, avec une alternative pour les personnes qui réduisent les animations.

Le skill sert aussi à revoir un site existant, mais ne garantit pas un résultat parfait et ne remplace pas ta direction artistique.

01 Installation

Ajoute Apple Design à ton projet

Ouvre Claude Code dans le dossier de ton site, puis colle ce prompt pour lui faire installer le skill et vérifier les prérequis.

Installe uniquement le skill apple-design pour Claude Code dans ce projet depuis le dépôt officiel :
https://github.com/emilkowalski/skills

Lis le README et skills/apple-design/SKILL.md avant l’installation. Vérifie les prérequis, puis utilise la commande officielle avec --skill apple-design et --agent claude-code. Choisis une installation locale au projet, pas globale. Si un prérequis manque, explique-moi comment l’installer avant de poursuivre.

À la fin, confirme le chemin installé et vérifie que /apple-design est disponible. Ne modifie pas le site pour l’instant.

Si tu préfères le terminal, la commande suivante installe seulement Apple Design pour ce projet. Elle utilise npx, l’outil fourni avec Node.js ; la version actuelle du programme d’installation demande Node.js 22.20 ou plus.

npx skills@latest add emilkowalski/skills --skill apple-design --agent claude-code

Lis les instructions du skill avant de confirmer, puis conserve la portée projet si l’installation te propose un choix. Tu pourras ainsi essayer ces règles sans les imposer à tous tes projets.

1. 1

   Vérifie le nom dans Claude Code

   Tape /apple-design dans le champ de message. Le skill doit être proposé dans la liste des commandes.

2. 2

   S’il n’apparaît pas, recharge les skills

   Lance /reload-skills dans Claude Code. Au besoin, ouvre une nouvelle session depuis le même dossier.

3. 3

   Donne-lui une tâche précise

   Utilise un des prompts suivants : appeler le skill seul peut simplement afficher son message d’accueil.

02 Site existant

Fais revoir une page avant de la modifier

Commence par une page dont le design te paraît bancal, puis choisis les corrections à appliquer après avoir lu le diagnostic.

/apple-design

Audite le design de la page que nous avons construite. Ouvre-la dans un navigateur si tu en as un ; sinon, précise que ton analyse repose sur le code et demande une capture.

Vérifie la hiérarchie visuelle, la typographie, les espacements, les couleurs, les rayons des coins, les états des boutons et les animations. Vérifie aussi l’affichage mobile et la réduction des animations demandée par l’utilisateur.

Conserve la charte graphique, les textes et les fonctionnalités. Propose les 5 améliorations les plus utiles, avec le problème observé et la correction précise. N’invente aucun résultat de test. Ne modifie rien avant que je choisisse les corrections.

03 Nouvelle page

Donne une direction avant de lancer le code

Remplace le texte entre crochets par ton projet et son public, puis joins tes références ou ta charte graphique si tu en as.

/apple-design

Crée une page pour [décris ton projet et son public]. Utilise les principes du skill pour la hiérarchie, la typographie, les interactions et les animations.

Commence par me proposer une direction visuelle adaptée à mon projet, avec les couleurs, les polices et la structure de la page. Respecte mes références et ma charte si elles sont fournies. Attends mon choix avant de coder.

Après réalisation, vérifie l’affichage mobile, la navigation au clavier et la réduction des animations. Indique ce que tu as réellement testé.

Compare le résultat sur ordinateur et téléphone, puis clique sur les boutons et teste les menus. Le skill fournit des règles ; ton contrôle du rendu reste nécessaire.

04 Liens utiles

Retrouve le skill et les instructions officielles

Apple Design · fichier original

Lis les instructions d’Emil Kowalski avant l’installation. Le fichier du skill est en anglais.

emilkowalski/skillsInstaller des skills

Options de la commande, portée projet ou globale, mise à jour et désinstallation.

vercel-labs/skillsDocumentation Claude Code

Comprendre comment les skills sont chargés et appelés dans un projet.

Installer Node.js

À utiliser seulement si npx est absent de ton ordinateur.