Construire une charte graphique avec l'IA en 2 heures

Tu as une activité, des clients, peut-être déjà un site, et toujours pas de charte graphique. Pas une vraie. Tu utilises trois bleus différents selon les supports, ta typo change entre LinkedIn et ton site, et chaque fois que tu lances un nouveau visuel, tu reprends tout à zéro. Cet article te donne une méthode concrète en 2 heures pour produire une charte exploitable avec Claude comme copilote. Pas un studio à 8000€, pas une semaine de brief, juste un livrable qui tient debout. Si tu débutes avec l'IA, commence par le guide complet pour apprendre Claude, ça te fera gagner du temps sur les prompts ci-dessous.

Avant d'attaquer : cette méthode marche pour un solo entrepreneur, un freelance, un side project, un MVP. Elle ne remplace pas un studio quand tu prépares une levée de fonds ou un déploiement retail physique. On va y revenir à la fin, sans tourner autour.

Ce qu'une charte graphique IA peut (et ne peut pas) produire

Première règle : Claude ne dessine pas. Il structure, rédige, justifie, exporte. Donc on cadre tout de suite le périmètre.

Ce que tu vas obtenir en 2 heures :

• Un positionnement de marque écrit en 3 paragraphes
• Une palette couleurs avec codes HEX et ratios de contraste WCAG
• Une combinaison typographique (titre + corps) avec tailles modulaires
• Des règles d'usage do/don't applicables tout de suite
• Un ton éditorial avec exemples concrets
• Un fichier tokens.css et un tailwind.config.js prêts à coller dans ton site

Ce que tu n'obtiendras pas : un logo vectoriel finalisé prêt à imprimer en sérigraphie, des illustrations sur-mesure, un système de motion design, une iconographie originale. Pour ces blocs, soit tu passes par Figma et tu finis à la main, soit tu travailles avec un designer. Pour explorer plus largement ce que Claude permet côté visuel, regarde Claude pour le design : identité visuelle, mockups et wireframes.

Le brief de marque en 15 minutes : la matière première

C'est l'étape que tout le monde saute, et c'est aussi la raison pour laquelle 90% des chartes générées par IA finissent génériques. Sans brief précis, Claude te sort du startup-bleu, du Inter en typo, et du ton "chaleureux et professionnel". Bref, rien.

Le brief tient en 6 champs. Tu le rédiges directement dans un Project Claude pour pouvoir y revenir :

Activité : [une phrase, ce que tu vends et à qui]
Cible primaire : [persona précis, pas "les PME"]
3 concurrents : [noms + URLs]
5 adjectifs souhaités : [qui doivent transparaître]
5 adjectifs interdits : [le piège à éviter]
Références visuelles : [3 à 5 sites que tu admires, URLs]

Exemple concret pour un coach business francophone : activité = accompagnement de freelances tech sur le passage à 100k€/an, cible = développeur senior 30-40 ans en bascule freelance, concurrents = trois noms réels avec URLs, adjectifs souhaités = direct, technique, rigoureux, ambitieux, premium, adjectifs interdits = fun, ludique, accessible, bienveillant, chaleureux, références = Stripe, Linear, Vercel, Pitch.

Tu remarques que les adjectifs interdits comptent autant que les souhaités. C'est eux qui empêchent Claude de te servir le pack "coach lifestyle 2019" par défaut.

Générer la palette de couleurs et la typographie (30 min)

Une fois le brief collé, tu lances le prompt couleurs :

À partir du brief ci-dessus, propose-moi 3 palettes de couleurs.
Chaque palette contient :
- 1 couleur primaire (HEX)
- 1 secondaire (HEX)
- 1 accent (HEX)
- 2 neutres (HEX clair + HEX foncé)
Pour chaque couleur : ratio de contraste WCAG AA sur fond blanc et fond foncé.
Pour chaque palette : 2 lignes de justification psychologique liées aux adjectifs souhaités.
Format : tableau markdown.

Claude renvoie trois propositions structurées. Si la palette 2 est trop froide, tu itères :

La palette 2 est trop froide pour la dimension "premium humain".
Garde le bleu #1E3A8A en primaire, propose une variante avec un accent plus chaleureux (terracotta ou ocre) et vérifie les contrastes.

Tu fais pareil pour la typo. Demande deux combinaisons Google Fonts (gratuites, performantes, larges en graisses), avec une échelle modulaire de 6 tailles (12, 14, 16, 20, 28, 40 par exemple), graisses pour titres et corps, et un line-height par taille. C'est tout ce qu'il te faut pour un site et des posts.

Une note importante : Claude peut se tromper sur les ratios WCAG. Vérifie systématiquement avec un outil comme WebAIM Contrast Checker. C'est 30 secondes par couleur, et ça t'évite une charte qui passe pas l'accessibilité.

Logo et système visuel : où Claude aide, où il faut autre chose

Là on entre dans la zone grise. Claude n'est pas un outil de dessin, mais il sait écrire du SVG. Pour un wordmark (ton nom de marque typographié) ou un monogramme géométrique, ça suffit pour produire quelque chose d'utilisable que tu finiras dans Figma.

Génère un wordmark SVG pour "[NomMarque]" :
- Police : Inter Bold (ou équivalent fallback)
- Couleur : #1E3A8A (primaire du brief)
- Hauteur : 64px
- Letter-spacing : -0.02em
- Pas d'icône, juste le texte propre, viewBox optimisée
Donne-moi le code SVG complet, copiable dans Figma.

Tu copies le SVG dans Figma, tu ajustes les courbes si besoin, tu exportes en PNG/SVG pour tes supports. Pour un monogramme géométrique (cercle, carré, lettre stylisée), même approche.

Là où Claude bloque : illustrations organiques, mascottes, pictos complexes, logos avec dégradés sophistiqués. Pour ça, Midjourney sert d'éclaireur, et un designer freelance pour la version finale. Compte 300 à 1500€ pour un logo pro selon le niveau. Pas la peine de tricher avec Claude là-dessus, le résultat se voit.

Règles d'usage et ton éditorial (20 min)

C'est la partie que tout le monde oublie et c'est celle qui transforme un PDF joli en charte vraiment utile. Sans règles d'usage, tu te retrouves trois mois plus tard à improviser à chaque post.

Demande à Claude :

• Do/don't sur le logo : espace minimum autour, fonds autorisés, taille minimale, versions monochromes
• Règles d'écriture : tutoiement ou vouvoiement, longueur max des titres LinkedIn, mots bannis (ceux qui contredisent les adjectifs souhaités), structure type d'un email
• 3 exemples de posts LinkedIn qui respectent le ton
• 3 objets d'email qui appliquent les règles
• 3 titres de page web type

Les exemples concrets sont le secret. Une règle abstraite type "ton direct et technique" ne sert à rien. Trois posts LinkedIn écrits dans ce ton, si.

Pour aller plus loin sur l'écriture de marque appliquée au marketing, regarde aussi comment Claude construit un plan marketing, le travail sur le ton y est complémentaire.

Livrable final : PDF de charte et tokens CSS exportables

La dernière étape transforme la conversation en deux fichiers réutilisables.

D'abord le PDF. Demande à Claude un document markdown structuré en 7 sections (positionnement, logo, couleurs, typographie, iconographie, ton, exemples). Tu le convertis en PDF avec Pandoc en ligne de commande, ou avec un convertisseur en ligne :

pandoc charte.md -o charte.pdf --pdf-engine=xelatex

Ensuite le vrai actif : tokens.css. C'est ce qui te permet d'intégrer la charte dans un site créé avec Claude sans la ressaisir :

:root {
  --color-primary: #1E3A8A;
  --color-secondary: #F59E0B;
  --color-accent: #DC2626;
  --color-neutral-light: #F9FAFB;
  --color-neutral-dark: #111827;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Source Serif Pro', serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
}

Bonus si tu codes en Tailwind : demande à Claude de générer un tailwind.config.js qui mappe les mêmes variables. Tu colles le fichier, ton site adopte la charte en 30 secondes.

Voilà la table récap des livrables et de leur usage :

Si ton workflow Claude n'est pas encore solide, jette un œil à configurer Claude pour ce type de projet créatif, ça te fera gagner 20 minutes sur l'aller-retour avec les Projects.

Limites honnêtes et quand passer à un vrai designer

Cette méthode couvre environ 80% des besoins d'un solo entrepreneur ou d'un MVP. Pas plus. Voici où elle tient et où elle craque :

Seuil concret : si ton budget marketing dépasse 50k€ par an, le ROI d'un studio devient positif (compte 8 à 25k€ pour une identité pro complète). En dessous, l'IA fait largement le job, et tu pourras toujours upgrader plus tard sans repartir de zéro, ta charte tokens.css est déjà un actif transmissible.

Passer à la pratique

Tu as la méthode, les prompts, les livrables. Le brief de marque, c'est 15 minutes maintenant si tu connais ton activité. Le reste s'enchaîne. La vraie différence entre une charte IA générique et une charte utile, ce sont les détails du brief et la qualité des itérations sur les prompts couleurs et ton. C'est exactement ce qu'on travaille en profondeur dans Maîtriser Claude au quotidien : passer du prompt naïf au prompt qui produit un livrable exploitable, sur des projets concrets comme celui-ci. Si tu veux que ta prochaine marque (la tienne ou celle d'un client) sorte propre en une après-midi au lieu d'une semaine, c'est là que ça se joue.