Construire une charte graphique avec l'IA en 2 heures

Tu veux une identité visuelle qui tienne debout, pas un poster accroché au mur du studio pendant six semaines. Deux heures, un abonnement Claude, un générateur d'image pour les visuels, Figma ou Canva pour l'assemblage. Ce guide fait partie du guide complet pour apprendre Claude et détaille une méthode qui marche quand on n'est pas designer, qu'on refuse de payer 8 000 € à un studio pour un logo, et qu'on a besoin d'un livrable utilisable par un dev ou un prestataire dès demain matin.

Avant d'ouvrir Claude, cadre bien ce que tu attends. Beaucoup d'entrepreneurs reviennent frustrés parce qu'ils ont demandé à l'IA ce qu'elle ne sait pas faire.

Ce qu'une charte graphique doit contenir (et ce que l'IA peut vraiment produire)

Une charte graphique utilisable, c'est six briques : un moodboard qui montre le territoire visuel, une palette couleur structurée (primaire, secondaire, neutres, états), un système typographique (titres, corps, interface), un logo avec ses déclinaisons, des règles d'espacement, et une page do/don't pour éviter que ton prestataire étire ton logo sur une bannière Facebook.

Claude fait très bien le texte, les specs, les règles d'application, le naming, la justification stratégique d'un choix, la génération de tokens design en JSON. Il ne dessine pas de logo pixel, il n'exporte pas de SVG propre, il ne vectorise pas. Pour la partie image, il faut un générateur type Midjourney ou le mode image de ChatGPT, puis un passage dans Figma pour nettoyer. L'assemblage final tient dans un document Notion, une page Figma, ou un fichier markdown qu'un dev lira sans se plaindre.

Le combo retenu dans cet article : Claude pour la stratégie et les specs, un générateur d'image pour les visuels (voir aussi comment générer des images sans passer par DALL-E), Figma ou Canva pour poser le tout. Rien de magique, du séquencement propre.

Bloc 1 (30 min) : brief de marque et direction visuelle avec Claude

Ouvre un nouveau projet Claude et colle ce prompt :

Tu es directeur artistique senior. Mon activité : [décris en 3 lignes].
Cible : [persona précis, pas "les entrepreneurs"].
3 concurrents directs : [nom + URL].
5 adjectifs qui doivent transparaître : [ex : rigoureux, chaleureux, direct, premium, moderne].
Ce que je refuse absolument : [ex : fun infantilisant, startup bleue générique, luxe froid].

Produis un positionnement visuel en une page :
1. Archétype de marque (parmi les 12 classiques) + justification en 2 lignes.
2. Trois directions visuelles contrastées (A, B, C) avec pour chacune :
   - un nom court
   - 5 mots-clés
   - 3 marques de référence qui existent déjà dans ce territoire
   - ambiance couleur (famille chromatique, pas encore de HEX)
   - ambiance typo (serif éditorial, grotesque technique, humaniste, etc.)
   - un contre-exemple (ce que cette direction n'est PAS)

Pourquoi trois directions contrastées : si tu demandes une seule proposition, tu la valides par réflexe. Avec trois, l'une devient évidente et les deux autres servent de garde-fou pour recadrer Claude si tu dérives au bloc suivant. Les archétypes de marque (le Sage, le Créateur, le Rebelle, etc.) donnent à Claude un vocabulaire précis qui le force à sortir des généralités type « moderne et dynamique ».

Choisis une direction. Copie-la en haut de la conversation. Elle sert d'ancrage pour les trois blocs qui suivent.

Bloc 2 (30 min) : palette de couleurs et système typographique

Dans la même conversation, enchaîne :

Sur la base de la direction [B], propose une palette complète :
- 1 couleur primaire (HEX, RGB, HSL)
- 1 couleur secondaire
- 2 ou 3 accents
- 5 neutres (du blanc cassé #FAFAFA au quasi-noir #0F0F0F)
- 4 couleurs d'état : succès, warning, error, info

Pour chaque paire texte/fond critique (primaire sur blanc, blanc sur primaire,
neutre foncé sur blanc, texte sur accents), donne le ratio de contraste WCAG
et précise si ça passe en AA ou AAA pour texte normal et texte large.

Prévenu : Claude se trompe régulièrement sur les calculs de contraste, le ratio annoncé peut s'écarter sensiblement du vrai résultat. Vérifie toi-même sur webaim.org/resources/contrastchecker avant de valider. Compte dix minutes.

Pour la typo, enchaîne avec un prompt qui demande trois pairings Google Fonts (une famille pour les titres, une pour le corps), chacun avec justification stratégique et échelle complète (h1 à h6, body, small, caption) avec taille en rem, line-height, letter-spacing. Précise ton contexte d'usage : site web, slides, print, les trois. Un pairing pensé pour l'écran rend mal en impression et inversement.

À ce stade tu as 45 minutes de travail, une palette validée et une typo testable. Télécharge les polices, pose-les dans un Figma ou un doc Google avec ta vraie accroche de landing. Si ça pique les yeux, Claude t'en propose deux autres en trente secondes.

Bloc 3 (30 min) : logo, variantes et déclinaisons

Partie la plus frustrante si tu l'attaques mal. Claude n'écrit pas ton logo, il écrit le prompt image qui va servir à le générer. Demande-lui :

Écris un prompt Midjourney détaillé pour générer 4 pistes de logo pour [marque].
Contraintes :
- forme : [symbole, monogramme, lettermark, wordmark]
- style : [plat, géométrique, organique, trait fin]
- cohérent avec la direction [B] et la palette validée
- lisible à 32px (favicon)
- SANS texte intégré dans l'image générée (le texte sera ajouté en vectoriel ensuite)

Ajoute les paramètres : --ar 1:1 --style raw --v 6
Et un négative prompt pour éviter : dégradés, 3D, ombres portées, effet brillant.

Génère 4 à 6 variations, choisis une direction, puis demande à Claude un cahier des charges d'une page pour un illustrateur Fiverr (compte 50 à 150 € pour une vectorisation propre) ou pour toi-même si tu vectorises dans Figma. Les variantes à prévoir : logo horizontal, carré, favicon 32px et 16px, version monochrome noir, version monochrome blanc pour fond sombre. Ajoute la zone de protection (en multiples de la hauteur de ton symbole) et la taille minimale lisible.

Pour le détail du processus logo pur, j'ai écrit un guide dédié : créer un logo avec Claude. Les deux articles sont complémentaires.

Bloc 4 (30 min) : document de charte et règles d'application

Dernier bloc, le plus important pour que la charte serve à autre chose qu'à prendre la poussière. Demande à Claude :

Produis le document de charte graphique final en markdown, structuré ainsi :
1. Page de garde (nom, version, date, auteur)
2. Positionnement de marque (3 lignes)
3. Logo : usage, zone de protection, taille mini, do/don't en 6 points
4. Palette : HEX, RGB, HSL, usage recommandé pour chaque couleur
5. Typographie : échelle complète, line-height, letter-spacing, exemples d'usage
6. Iconographie : style recommandé (outline 1.5px, filled, duotone...)
7. Photographie : traitement, cadrage, ce qu'on évite
8. Ton éditorial : 5 règles, 3 exemples avant/après
9. Ressources : liens Google Fonts, fichiers logo

Et surtout, le livrable qui change tout quand tu bosses avec un dev :

Génère un fichier design-tokens.json exploitable par Tailwind CSS v4 et Figma :
- tokens de couleur (color.primary.500, color.neutral.900, etc.)
- tokens typographiques (fontSize, lineHeight, fontFamily, fontWeight)
- tokens d'espacement (spacing.1 à spacing.24)
- tokens de radius (none, sm, md, lg, full)
- tokens d'ombre (shadow.sm, shadow.md, shadow.lg)

Ce JSON, tu le colles dans ton projet Next.js, ton dev configure Tailwind en trois minutes et toute la stack respecte ta charte sans négociation. Si tu construis ton site avec Claude, c'est le même fichier qui pilote les couleurs des composants, les boutons, les cartes. Fini les débats sur « c'est quoi déjà le bleu de la marque ».

Erreurs fréquentes et limites de l'exercice

Les pièges que je vois revenir chez les entrepreneurs qui testent la méthode :

Les limites honnêtes de la méthode : si tu lèves plus de 2 M€, si tu attaques le retail physique avec packaging, si tu vises une marque grand public à forte charge émotionnelle (cosmétique, mode, food premium), passe par un vrai directeur artistique. Compte 6 000 à 25 000 € pour un studio sérieux, trois à six semaines de travail. Pour tout le reste (SaaS, cabinet de conseil, agence, formation, outil interne, side-project), la méthode Claude + Midjourney + Figma tient la route sans honte.

Et après : utiliser la charte dans vos projets Claude

Ta charte n'a de valeur que si elle vit dans ton travail quotidien. L'astuce : crée un project Claude dédié à ta marque, colle les design tokens en fichier de contexte, et toutes les demandes suivantes (mockups, landing pages, visuels de slides, bannières LinkedIn) respectent par défaut ton identité. Plus besoin de redonner les codes HEX à chaque conversation. Je détaille ce workflow dans le guide configurer Claude pour qu'il connaisse ton contexte.

Pour aller plus loin sur la partie visuelle (mockups d'interface, wireframes, slides commerciales), tout est centralisé dans le pilier design du blog. Et si ton prochain chantier est le site qui va porter cette charte, le pilier site web enchaîne naturellement : les tokens que tu viens de produire s'y branchent directement.

Deux heures bien séquencées valent mieux que six semaines à attendre un retour de studio. Si tu veux apprendre à enchaîner ce genre de livrables (charte, site, blog, automatisations) semaine après semaine avec un cadre et des cohortes d'entrepreneurs qui bossent en parallèle, regarde la formation Maîtriser Claude au quotidien, cinq modules et cinq projets concrets, dont la refonte de ton identité visuelle au module design.