Claude ne devine pas ta marque — voici comment lui donner ton design system et ta voix (2026)
« Fais-le moderne et premium » donne du générique. Le vrai levier, c'est de donner à Claude ton vrai système : tokens via MCP, voix par l'exemple, et un CLAUDE.md qui sert de contrat. Le guide d'un praticien.
Claude ne devine pas ta marque
La scène se répète chez presque tous mes clients qui débutent avec l'IA. Ils ouvrent Claude, écrivent « fais-moi une page d'accueil moderne et premium pour ma marque », et reçoivent quelque chose de… correct. Propre, compétent, et complètement interchangeable avec ce que dix mille autres entreprises obtiendraient avec le même prompt. Le problème n'est pas Claude. Le problème, c'est qu'on lui a demandé de deviner une marque qu'on ne lui a jamais donnée.
C'est exactement le glissement que j'ai décrit ailleurs entre prompt engineering et context engineering : en 2026, la qualité de ce que produit l'IA dépend moins de la formule du prompt que du contexte qu'on lui fournit. Et une marque, ça ne se résume pas en trois adjectifs. C'est un système de tokens, une voix avec ses tics et ses interdits, et un ensemble de contraintes. Donner ces trois choses à Claude, correctement, transforme un générateur de générique en collaborateur qui sonne comme toi. Voici comment je m'y prends.
Trois choses à donner, par trois canaux différents
L'erreur la plus commune est de tout déverser dans un prompt géant. En réalité, les trois composantes d'une marque se transmettent par des canaux distincts, et chacun a sa bonne méthode.
| Ce que tu donnes | Le bon canal | Le piège à éviter |
|---|---|---|
| Design system (couleurs, espacements, composants) | tokens réels via MCP / Code Connect | décrire « du bleu corporatif » au lieu de fournir les tokens |
| Voix de marque (ton, vocabulaire) | exemples concrets en few-shot | empiler des adjectifs (« chaleureux, expert ») |
| Contraintes (conventions, interdits) | un fichier CLAUDE.md permanent | les répéter à chaque conversation |
Le fil rouge des trois : montre, ne décris pas. Un adjectif est une interprétation ; un token, un exemple ou une règle est une donnée. L'IA travaille infiniment mieux avec des données qu'avec des impressions.
Le design system : donne les vrais tokens, pas leur description
C'est le canal qui a le plus progressé en 2025. Plutôt que d'expliquer ta palette à Claude, tu lui donnes accès à ton système réel. Le serveur MCP de Figma, passé en disponibilité générale, permet à Claude d'aller lire directement la structure d'une maquette : composants, variables, espacements. Couplé à Code Connect, qui mappe chaque composant Figma à son équivalent codé, Claude ne génère plus un bouton approximatif — il utilise ton composant Button, avec ses vraies variantes.
Mais tout ça repose sur un préalable que je martèle à chaque mandat : la qualité de génération de l'IA est plafonnée par la qualité de ta tokenisation. Si tes couleurs s'appellent bleu-2 et bleu-final-v3, aucun agent ne devinera laquelle est ta couleur d'action. Si elles s'appellent color/action/primary, il la trouve — et un humain aussi. Donner son design system à Claude commence donc, paradoxalement, par mettre de l'ordre dans son design system. Une convention de nommage sémantique propre n'est plus une coquetterie de designer : c'est ce qui rend ton système lisible par une machine.
La voix de marque : montre-la, ne la décris pas
C'est ici que la plupart des tentatives échouent. On écrit à Claude « notre ton est professionnel mais accessible, chaleureux mais expert » — et on obtient une bouillie tiède, parce que ces mots veulent tout et rien dire. La voix ne se décrit pas, elle se démontre. Ma méthode est le few-shot : je donne trois à cinq morceaux de texte réels que l'équipe juge excellents, représentatifs de la marque, et je demande à Claude d'écrire dans le même registre. Le modèle capte ce qu'aucun adjectif ne transmet — la longueur des phrases, le niveau de tutoiement, l'usage de l'humour, le rythme.
J'accompagne ces exemples d'un court document de voix structuré non pas en qualificatifs, mais en règles observables : les formulations qu'on utilise, celles qu'on bannit, des paires avant/après. « On n'écrit jamais "solutions innovantes", on dit ce que le produit fait. » « On tutoie. » « On évite le jargon corporate : pas de "synergie", pas de "leviers". » Ces interdits sont souvent plus utiles que les permissions, parce qu'ils éliminent précisément les réflexes génériques du modèle. Le test final est simple : je fais générer trois variantes et je demande à quelqu'un de l'équipe « est-ce que ça sonne comme nous ? ». Si la réponse hésite, le contexte de voix n'est pas encore assez nourri.
Le CLAUDE.md : le contrat permanent
Le plus haut levier de productivité, et le plus négligé, c'est le fichier de contexte permanent. Avec Claude Code comme avec un projet structuré, un fichier CLAUDE.md à la racine est lu automatiquement à chaque conversation. C'est le brief que tu ne réécriras jamais. J'y encode les conventions techniques, le ton, les noms de tokens et les interdits — tout ce qui devrait être vrai à chaque génération.
# CLAUDE.md — Marque & conventions
## Voix
- Tutoiement. Phrases courtes. Zéro jargon corporate.
- Bannir : « solutions innovantes », « synergie », « leviers ».
- Exemples de référence : voir /brand/voice-samples.md
## Design system
- Tokens dans tokens.json (format DTCG). Ne jamais coder une couleur en dur.
- Couleur d'action : color/action/primary
- Composants : utiliser ceux de /components, jamais réinventer
## Technique
- Server Components par défaut ; use client réservé à l'interactif
- Valider les entrées avec ZodCe fichier évite la dérive : sans lui, chaque nouvelle session repart de zéro et réintroduit du générique. Avec lui, la marque est un acquis du projet, pas une consigne qu'on espère que l'IA respectera.
Industrialiser : skills, agents et versionnage
Une fois ces trois canaux en place, l'étape suivante est de les empaqueter pour qu'ils se réutilisent sans copier-coller. C'est le rôle des skills et des configurations d'agents : on encapsule le design system, la voix et les contraintes dans un module que Claude charge quand le contexte le demande. Sur mes propres projets, c'est exactement ce que je fais — un skill qui porte les guidelines de marque s'active dès qu'il s'agit de produire du contenu, sans que j'aie à réexpliquer quoi que ce soit.
Traite ton contexte de marque comme du code : versionne-le. Le CLAUDE.md, les exemples de voix, les tokens exportés vivent dans un dépôt Git, évoluent avec la marque, et se révisent en équipe. Une marque donnée à l'IA n'est pas un document figé qu'on rédige une fois — c'est un actif vivant qui s'améliore à mesure qu'on observe ce que le modèle produit.
Le vrai enjeu : échapper à l'uniformité
Si tu ne donnes à Claude qu'un vibe, il te rendra la moyenne statistique du web — c'est-à-dire exactement ce qui rend tant de marques interchangeables en 2026. La ressemblance est devenue la stratégie la plus coûteuse, et l'IA mal nourrie l'accélère. À l'inverse, un modèle nourri de ton vrai système — tes tokens, ta voix démontrée, tes contraintes explicites — produit quelque chose qui te ressemble, parce qu'il travaille à partir de toi, pas à partir d'une approximation de toi.
Reste une dernière vérité que je rappelle toujours : donner ta marque à Claude ne te dispense pas de la diriger. Le modèle exécute le système que tu lui fournis avec une fidélité remarquable, mais il ne décidera pas à ta place ce que ta marque doit devenir. Le jugement, la vision, le « non, pas comme ça » — ça reste ton travail. L'IA n'est pas l'auteur de ta marque. Elle en est, quand tu la nourris bien, le porte-voix le plus rapide et le plus cohérent que tu aies jamais eu.
Ton design system parle maintenant à une IA : ce qui change vraiment dans Figma en 2026
En 2026, un design system n'est plus une bibliothèque de composants : c'est la couche que l'IA lit pour comprendre ton produit. Ce que Figma a réellement livré en 2025, et comment bâtir sans usine à gaz.
Le prompt engineering pour le design est déjà dépassé — place au context engineering
Fignoler le wording d'un prompt comptait en 2023. En 2026, la qualité du design assisté par IA se joue sur le contexte : prompt système, few-shot, MCP et tool use. Le guide d'un praticien.
Du token Figma au composant React en 5 étapes — et la moitié de la glue d'avant ne sert plus à rien
Le pipeline token→composant que tout le monde recopie est à moitié périmé. Depuis Tailwind v4 et la spec Design Tokens stable, voici les 5 étapes qui comptent vraiment pour passer de Figma à React.