Le style d'Apple dans ton code en 5 minutes

Le guide pour brancher la bibliothèque de fichiers DESIGN.md sur Claude Code et faire construire ton interface dans le style exact d'Apple, Tesla, Ferrari ou Anthropic.

Ce que c'est

Plus de 2 000 sites des plus grandes marques du monde ont été décortiqués, puis rangés dans des fichiers DESIGN.md que ton agent de code lit et applique directement. Un fichier = tout le système visuel d'une marque : couleurs exactes, polices, espacements, mises en page, plus les règles à suivre et les erreurs à éviter.

Les bibliothèques

Bibliothèque	Lien
DesignMD (catalogue + MCP)	https://www.designmd.co/
DESIGN.md Library	https://designmd.app/library
shadcn.io / design	https://www.shadcn.io/design
Awesome Design MD (GitHub)	https://github.com/rohitg00/awesome-claude-design

La page MCP est ici : https://www.designmd.co/mcp

La méthode, étape par étape

Ouvre le catalogue et cherche la marque qui colle à ton projet (Apple, Tesla, Anthropic, Stripe, Spotify...).
Choisis ton format de sortie : Tailwind v4, CSS Variables ou Design Tokens. Version Compact pour aller vite, Extended pour tout le détail.
Copie le fichier DESIGN.md à la racine de ton projet, à côté de ton CLAUDE.md. Ou branche le MCP sur Claude Code et l'agent va chercher la marque tout seul.
Demande à ton agent de construire l'écran : il applique les tokens et les règles sans que tu aies à décrire quoi que ce soit.

Ce que contient un fichier

Tokens de couleur : chaque teinte avec son rôle. Exemple chez Apple : #0071e3 en bleu d'action, #0066cc pour les liens dans le texte.
Typographie : la police, les graisses, les tailles, l'interlettrage.
Espacements et formes : rayons d'arrondi, rythme vertical.
Guidelines : la liste TO DO et la liste DON'T.

Les règles Apple, telles qu'elles sont écrites

SF Pro Display weight 700 pour les titres hero, 80 à 96px, tracking négatif.
Alterner les fonds de section entre #ffffff et #f5f5f7, sans bordures ni séparateurs.
28px de border-radius sur toutes les cartes et images produit.
Boutons pilule à 980px ou 9999px de radius.
Corps de texte à 17px, SF Pro Text weight 400, letter-spacing -0.022em.
Pas d'ombre ni d'élévation sur les cartes.
Pas de titre sous 40px.
Pas de bordure pour séparer des sections : on alterne la couleur du fond.
Pas de dégradé décoratif sur les boutons ou les cartes.
Pas de paragraphe centré : les titres peuvent l'être, pas le texte courant.

Le prompt à donner à ton agent

Lis le fichier DESIGN.md à la racine du projet et construis la landing page
en respectant strictement ses tokens (couleurs, typographie, espacements,
rayons) et ses guidelines TO DO / DON'T. N'invente aucune couleur,
aucune taille et aucun arrondi qui ne soit pas dans le fichier.

Une question ? Réponds directement à ce message.