Claude Design • Casser les biais du modèle pour inclure l’accessibilité dès le départ

Claude Design n'est pas prêt pour la production tel quel. Si vous voulez un résultat de qualité, vous devez d'abord lui fournir un véritable design system avant de demander quoi que ce soit de visuel, puis verrouiller les bases de l'accessibilité pour qu'il arrête de saccager vos landing pages.

Étape 1 : donnez à Claude votre design system

Avant d'écrire le moindre prompt de design, listez ce que vous avez déjà. Claude fonctionne à partir de contraintes, pas de vibes, et les prompts vagues produisent systématiquement des résultats génériques et bateau.

• Variantes de boutons : plain, ghost, light, ainsi que leurs déclinaisons de couleur
• Palette de couleurs complète (nommez chaque couleur, ne vous contentez pas de coller des codes hexadécimaux)
• Logos et icônes existants utilisés pour votre identité de marque
• Hiérarchie typographique et polices spécifiques, avec leurs règles de fallback
• Règles d'espacement et contraintes de grille/layout pour que Claude n'improvise pas dessus
• Composants auxquels vous devriez déjà penser ou que vous avez déjà : bannières hero, navigation principale (le cas échéant), liens de type bouton en différentes tailles, styles de titres, etc.

Il faut travailler sur un système qui fonctionnera pour la majorité de vos créations : faites d'abord le travail difficile de conception du système, puis produisez des landing pages ou des concepts plus rapidement, avec la cohérence comme bénéfice principal.

À partir de ce travail de design system, vous pouvez même esquisser des cartes de visite, des concepts de présentation, ou des templates de documents officiels.

Étape 2 : uploadez de vrais assets, ne vous contentez pas de les décrire

Claude Design peut ingérer directement des assets de marque existants, fichiers Figma, dépôts GitHub, ou PDF, plutôt que de dépendre de votre description en texte.

Uploader vos vrais fichiers de logo, votre set d'icônes, et tout style guide existant ancre Claude sur ce que vous avez déjà, au lieu qu'il invente un rendu qui jure avec votre marque.

Les fichiers Figma et les exports SVG de vos logos sont un bon début. Utilisez-les si vous avez déjà quelque chose à partager avec l'outil.

Étape 3 : intégrez l'accessibilité dès le départ

L'accessibilité n'est pas une passe qu'on fait une fois le design "terminé". Incluez ces règles directement dans votre prompt initial pour que Claude les traite comme des contraintes non négociables, pas comme un ajout après coup. Les labels manquants, le contraste insuffisant et l'absence de texte alternatif restent les échecs les plus fréquents sur les sites en production, ils méritent donc d'être rappelés explicitement à chaque fois.

• Respectez une hiérarchie de titres correcte (un seul <h1>, aucun niveau sauté)
• Prenez en compte la navigation au clavier sur tous les éléments interactifs, et assurez-vous qu'aucun ne crée un piège clavier (keyboard trap)
• Stylez un état de focus visible clair : contour de 2px, décalé de 2px
• Respectez les ratios de contraste de couleur : minimum 4.5
  pour le texte normal, 3
  pour le grand texte, vérifiés par rapport aux vraies couleurs de fond, pas supposés
• Utilisez un anglais/français simple et un langage clair dans les textes
• Utilisez une hauteur de ligne (line-height) de 1.5 sur le texte courant (ajustable légèrement pour les titres)
• N'utilisez jamais le style de police italique
• Tous les formulaires ont des labels clairs et permanents, jamais de placeholders en guise de label
• Tous les formulaires ont des messages d'erreur accessibles, clairement associés à leur champ via aria-describedby
• Utilisez <label> pour les champs simples, et <fieldset> + <legend> pour les champs groupés (comme les groupes de radio ou de cases à cocher, ou les champs groupés complexes)
• Chaque image porteuse de sens a besoin d'un texte alternatif descriptif ; les images purement décoratives ont un alt="" vide
• Chaque lien a besoin d'un texte descriptif, jamais "cliquez ici" ou "en savoir plus" seul
• Chaque élément de type bouton doit être un vrai lien HTML (<a>), pas un <div>, <span> ou <button> stylisé
• Déclarez la langue de la page avec <html lang="fr"> (ou la locale correcte selon le prompt utilisateur)
• Ajoutez un lien "Aller au contenu principal" en haut de page pour les utilisateurs au clavier
• Le contenu doit rester lisible et utilisable à 200% de zoom, sans casser le layout
• Tout contenu vidéo a besoin de sous-titres ou d'une transcription
• Utilisez la préférence utilisateur prefers-reduced-motion pour limiter les animations

Cela ne réglera pas tous les problèmes d'accessibilité, mais ça donnera à l'IA une base claire.

Étape 4 : utilisez une formule de prompt structurée

Les experts qui utilisent Claude Design pointent systématiquement vers une formule de prompt en 4 parties qui surpasse une simple demande en freeform : objectif, layout, contenu, et audience. Précisez à quoi sert la page, comment les sections doivent être ordonnées, quel contenu va dans chaque section, et à qui elle s'adresse. Cela donne à Claude le même brief qu'attendrait un designer humain, plutôt que de le laisser deviner l'intention.

• Objectif : ce que la page ou le composant doit accomplir
• Layout : ordre exact des sections (hero, bandeau de confiance, fonctionnalités, tarifs, FAQ, etc.)
• Contenu : contraintes de copywriting concrètes, comme la longueur du titre ou le nombre de fonctionnalités listées
• Audience : qui va lire ceci, car le ton et la densité changent en conséquence

Bien sûr, pour les prompts d'idéation, n'hésitez pas à laisser plus de liberté à l'IA en lui disant précisément ce que vous cherchez à obtenir.

Étape 5 : itérez avec du feedback, pas en un seul coup

Traitez le premier résultat comme un brouillon, pas comme une version finale. Une boucle serrée de captures d'écran, de commentaires en ligne, et demander à Claude de s'auto-critiquer par rapport à ses propres règles d'accessibilité et de design system produit des résultats nettement meilleurs qu'un seul méga-prompt.

Surveillez aussi la consommation de tokens sur les sessions longues, car de très longs échanges peuvent faire dériver Claude par rapport aux instructions de design system données plus tôt.

Rappelez-vous que le temps, et les tokens, investis dans un design system clair, vous aideront ensuite en cohérence et en efficacité.

Pourquoi ces instructions comptent

Fournir d'abord le design system et la formule de prompt donne à Claude le vocabulaire visuel et structurel pour rester cohérent d'un composant à l'autre, au lieu d'improviser un nouveau style à chaque session.

Superposer les règles d'accessibilité comble l'écart que Claude laisse ouvert par défaut, car il traite l'accessibilité comme optionnelle tant qu'elle n'est pas explicitement et systématiquement demandée.

En combinant design system, formule de prompt et règles d'accessibilité, vous vous attaquez aux trois problèmes les plus récurrents de Claude : des visuels génériques dus à l'absence de contraintes, une dérive structurelle due à un prompt unique, et un balisage inaccessible dû à l'absence de règles explicites. C'est la structure de prompt de base à réutiliser à chaque nouvelle session Claude Design.