HomeCasa Design tokens et spécifications de composants
Définissez les tokens d’un design system (primitifs, sémantiques et de composant) et spécifiez les composants avec états, variantes et accessibilité. Conçu pour ChatGPT, Claude et Gemini. Il comprend 5 variables personnalisables et vous pouvez le copier gratuitement en un clic.
Avancé · Texte · En attente de relecture éditoriale
Prompt
Agis comme un designer de design systems qui sait faire passer des tokens de Figma au code.
Produit : {{product}}.
Plateformes : {{platforms}}.
Identité de marque disponible : {{brand}}.
Composants prioritaires : {{components}}.
Niveau d'accessibilité visé : {{a11y_level}}.
Livre, dans cet ordre :
1. Une architecture de tokens à trois niveaux (primitif → sémantique → composant) et une convention de nommage, avec des exemples.
2. Les tokens primitifs : une échelle de couleurs (9 à 10 paliers par teinte, dérivée de la marque), la typographie (échelle modulaire avec tailles, interlignes et graisses), l'espacement (base 4 ou 8), les rayons, les ombres, les opacités et les durées d'animation.
3. Les tokens sémantiques pour les thèmes clair et sombre (arrière-plan, surface, texte, bordure, action, et états succès, avertissement, erreur et information), en vérifiant le contraste de chaque paire texte/fond.
4. Un export au format W3C Design Tokens (JSON) et son équivalent en propriétés personnalisées CSS.
5. Pour chaque composant prioritaire, une fiche de spécification avec : anatomie, variantes, tailles, états (repos, survol, focus, actif, désactivé, chargement, erreur), tokens utilisés, comportement au clavier, attributs ARIA et interdits.
6. Des règles de gouvernance : quand créer un nouveau token, comment le déprécier et comment gérer les versions.
Contraintes :
- N'invente pas de couleurs de marque : si je n'en ai pas, propose une palette provisoire marquée [PROVISOIRE].
- Indique les rapports de contraste calculés ; si l'un d'eux échoue, propose une alternative.
- Demande-moi tout ce qui manque avant de définir les tokens sémantiques.Comment l'utiliser
- Listez les couleurs et polices de votre marque que vous avez déjà (valeurs hexadécimales si possible).
- Choisissez quelques composants prioritaires pour commencer : bouton, champ de texte, carte et modale.
- Importez le JSON dans Tokens Studio pour Figma ou Style Dictionary pour générer le code.
- Revérifiez les rapports de contraste avec un outil externe avant de valider la palette.
Exemple d'utilisation
Produit : application bancaire pour indépendants · Plateformes : web et mobile · Marque : bleu #1E40AF et la police Inter · Composants : bouton, champ, carte, modale.
Exemple de résultat
1. Architecture des tokens
| Niveau | Exemple | Usage |
|---|---|---|
| Primitif | color.blue.800 = #1E40AF | Valeur brute, jamais dans un composant |
| Sémantique | color.action.primary = {color.blue.800} | Intention, varie selon le thème |
| Composant | button.primary.bg = {color.action.primary} | Utilisé par un seul composant |
Convention : catégorie.propriété.variante.état, par ex. color.text.on-action.disabled.
3. Contraste (thème clair)
| Paire texte/fond | Ratio | WCAG 2.2 AA |
|---|---|---|
| Blanc sur bleu #1E40AF | 8,72:1 | ✅ |
| Blanc sur corail #F97362 | 2,74:1 | ❌ |
| #111827 sur corail #F97362 | 6,47:1 | ✅ |
Proposition : n'utiliser le corail qu'en fond avec du texte foncé, ou un corail assombri pour du texte sur blanc (5,62:1 avec #B4412F, [TEMPORAIRE]).
4. Export
{
"color": {
"blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
"action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
}
}:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }5. Bouton — états
Repos, survol, focus (anneau visible de 2 px), actif, désactivé, chargement (aria-busy="true"), erreur…
Informations clés
- Catégorie
- Design UI/UX · Design systems
- Type de résultat
- Texte
- Niveau
- Avancé
- Conçu pour
- ChatGPT, Claude et Gemini
- Vérifié sur
- En attente de vérification éditoriale
- Variables
- Produit, Plateformes, Identité de marque, Composants prioritaires et Niveau d’accessibilité visé
- Langue
- Français
- Prix
- Gratuit, sans inscription
- Mis à jour
- 07/11/2026
Questions fréquentes
Pourquoi des tokens sémantiques si j’ai déjà des tokens primitifs ?
Les tokens primitifs décrivent des valeurs (« bleu 600 ») alors que les tokens sémantiques décrivent une intention (« couleur de l’action principale »). Cette couche permet de changer de thème ou de refondre la marque sans toucher à chaque composant.
Quel format de tokens utiliser ?
Le format du W3C Design Tokens Community Group s’impose peu à peu comme standard, et des outils comme Tokens Studio et Style Dictionary peuvent le convertir en code CSS, iOS ou Android.
À quoi sert ce prompt ?
Définissez les tokens d’un design system (primitifs, sémantiques et de composant) et spécifiez les composants avec états, variantes et accessibilité.
Avec quels outils d'IA fonctionne-t-il ?
Il est conçu pour ChatGPT, Claude et Gemini. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.
Comment personnaliser le prompt ?
Cliquez sur « Personnaliser » et remplissez les variables (Produit, Plateformes, Identité de marque, Composants prioritaires et Niveau d’accessibilité visé). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.
Faut-il de l'expérience pour l'utiliser ?
Il est de niveau avancé : il s'adresse aux personnes expérimentées dans le domaine, capables d'évaluer et d'ajuster le résultat.
Ce prompt est-il gratuit ?
Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.
Puis-je me fier au résultat de l'IA ?
Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.