Le design d'Apple dans Claude Code : le guide
La bibliothèque de 2000 chartes graphiques de grandes marques et la méthode pour les donner à Claude Code en 3 minutes.
Ce que c'est
Plus de 2000 sites des plus grandes marques du monde ont été désossés et transformés en fichiers DESIGN.md. Un fichier = tout le système visuel d'une marque, écrit dans un format que Claude Code lit et applique directement.
La bibliothèque : styles.refero.design
Ce qu'il y a dans un fichier
| Partie | Ce que tu récupères |
|---|---|
| Tokens, couleurs | Chaque couleur avec son code hexadécimal et son rôle (Apple : #0071e3 pour les boutons d'action uniquement, #0066cc pour les liens) |
| Typographie | La police, les graisses, les tailles (Apple : SF Pro Display 700, titres 80 à 96 px, corps 17 px) |
| Spacing & Shape | Largeur max 1200 px, 100 à 120 px entre les sections, 28 px de padding de carte, 8 à 10 px entre les éléments |
| Guidelines | La liste des DO et des DON'T, règle par règle |
| Export | Tailwind v4, variables CSS, design tokens |
La méthode, étape par étape
- Va sur styles.refero.design
- Cherche la marque ou le style qui colle à ton projet (Apple, Tesla, Ferrari, Anthropic...)
- Ouvre la fiche, clique sur Copy pour récupérer le
DESIGN.md - Colle-le à la racine de ton projet dans un fichier nommé
DESIGN.md - Lance Claude Code dans ce dossier et demande-lui de s'y tenir
Le prompt à lui donner :
Lis DESIGN.md et construis toute l'interface en respectant strictement
ce système visuel : tokens de couleur, typographie, spacing, shape.
Applique les règles DO et n'enfreins aucune règle DON'T.
Utilise Tailwind v4 avec les CSS variables du fichier.Version MCP, pour ne plus copier à la main
Tu branches la bibliothèque sur Claude Code et il va chercher le style tout seul :
claude mcp add refero -- npx -y fidgetcoding-refero-mcpTu redémarres Claude Code, puis tu demandes en langage normal : « trouve-moi un style type Apple pour une landing page fintech ». Le dépôt du serveur : github.com/fidgetcoding/refero-design-mcp
Les règles Apple à connaître, en vrac
- Alterner les fonds
#ffffffet#f5f5f7entre les sections, jamais de bordure pour séparer - 28 px de border-radius sur les cartes et les visuels produit
- Boutons en pilule, radius 980 px ou 9999 px
- Aucune ombre, aucune élévation sur les cartes
- Jamais un titre en dessous de 40 px
- L'interface reste monochrome, c'est l'image produit qui porte la couleur
Une question ? Réponds直 à ce message, je lis tout.