Design aux couleurs de votre marque avec Claude Design · Du Design System au site en ligne [Session 25].

La plupart des outils de design dopés à l'IA génèrent un premier beau résultat, puis lorsque vous en demandez un autre, le style change totalement. Couleurs différentes, police différente, ambiance différente. Pour une marque, c'est un désastre, car une marque repose sur la cohérence. Lors de la session 25 du AI Master Club, nous avons exploré Claude Design, le nouvel outil de design d'Anthropic (la même entreprise derrière Claude Code). Ce qui le distingue, c'est précisément ce point : on crée un Design System une seule fois (logo, couleurs, typographie, boutons, ton éditorial), et tout ce que l'on produit ensuite, qu'il s'agisse d'une présentation, d'une landing page, d'un carrousel Instagram ou d'une maquette d'application, sort aux couleurs de la marque et de manière homogène, exactement comme si un seul et même graphiste avait tout réalisé. Pendant la session, nous avons vu cela en action : nous avons cloné l'identité visuelle d'une grande marque avec une précision troublante, construit une landing page pour une boulangerie à partir de zéro, récupéré des dizaines d'images d'un vrai site web avec Firecrawl, et enfin transformé une maquette en site web en ligne. Le tout en langage naturel, sans écrire une seule ligne de code. Ce guide regroupe tout ce que nous avons abordé, étape par étape.

Ce que vous trouverez à la fin de ce guide

• Ce qu'est Claude Design, où y accéder et en quoi il diffère de tous les autres outils de design
• Comment créer un Design System, le cœur de tout le processus, selon 3 méthodes adaptées à votre niveau d'expérience
• Comment générer une présentation, une landing page et un carrousel Instagram respectant tous la même identité visuelle
• La démonstration en direct : création d'une landing page pour une boulangerie à partir de zéro, incluant les questions de précision posées par Claude
• L'intégration d'images réelles provenant de n'importe quel site web grâce à Firecrawl et leur insertion automatique dans le design
• Comment transformer une maquette en site web en ligne avec Claude Code, Vercel et Supabase
• Le conseil le plus important de la session : comment ne pas épuiser votre quota de tokens en une demi-heure

Qu'est-ce que Claude Design et où y accéder

Faites attention à ces trois points avant de commencer : Claude Design nécessite un abonnement payant à Claude (pas d'accès gratuit), il fonctionne actuellement uniquement dans le navigateur, et il dispose d'un compteur de tokens séparé et limité par rapport à l'utilisation classique de Claude. Ce compteur se réinitialise toutes les 5 heures. Vous pouvez le vérifier en cliquant sur le cercle en haut, puis sur Settings et Usage. Tout ce guide est construit autour de cet objectif : tirer le maximum de l'outil sans gaspiller de tokens.

Design System · Le cœur de tout le processus

3 méthodes pour créer un Design System

• Via Claude Code (recommandé, économise le plus de tokens) : demandez à Claude Code de construire le Design System à partir de votre site web, de vos images, de votre logo et de vos polices. À la fin, exécutez la commande slash en tapant /Design et en sélectionnant Design Sync. Cela récupère tous les fichiers et les transfère automatiquement vers Claude Design. Un nouveau système apparaîtra alors sous la zone de texte, et il ne reste plus qu'à le nommer.
• Directement dans Claude Design : allez dans Projects, puis Design Systems, Create Design System et Create Here. Indiquez une URL de site web (si vous en avez une), importez un fichier Figma (pour les graphistes), cliquez sur Browse et déposez tous vos éléments visuels : logo, images, publications sur les réseaux sociaux. Dans le champ Any other notes, ajoutez une consigne textuelle (par exemple : j'aime le bleu, je veux que tout soit dans des tons bleus). Donnez un nom et cliquez sur Generate. Le traitement prend environ 5 minutes.
• La version alternative avec n'importe quel modèle de langage : demandez à ChatGPT d'analyser un site web ou une référence, demandez-lui de formater un Design System sous forme de fichier PDF, puis importez ce fichier dans Claude Design. C'est moins précis que les deux méthodes précédentes, mais cela fonctionne lorsque vous ne disposez pas d'une base de code.

Prompt pour créer un Design System dans Claude Code

Je veux que tu construises un Design System complet pour mon entreprise. Les sources : [Collez ici un lien vers votre site web, ou glissez-déposez votre logo, vos polices, des captures d'écran et des publications des réseaux sociaux]. Extrais et définis : une palette de couleurs avec des codes précis, la typographie (polices, tailles, épaisseur, hiérarchie), la forme et la taille des boutons, le ton éditorial (incluant la gestion des langues), les appels à l'action et la politique en matière d'emojis. Quand tu as terminé, exécutez /Design et sélectionne Design Sync pour transférer le tout vers Claude Design.

Première démonstration · Cloner l'identité visuelle d'une grande marque

Prompts pour générer des contenus aux couleurs de la marque

Présentation : Crée une présentation sur [le sujet, par exemple la nouvelle collection 2026], en te basant sur le Design System que j'ai joint et les images fournies. Landing page produit : Crée une landing page qui présente ce produit [joignez des images du produit], en te basant sur le Design System. Carrousel Instagram : Crée-moi un carrousel Instagram sur [le sujet], en te basant sur le Design System. Une série de diapositives dans la même charte graphique.

Astuce contenu en or : les carrousels sont l'un des formats les plus viraux du moment. Instagram et LinkedIn mettent en avant les publications comportant plusieurs images bien plus que celles avec une seule image. Maintenant qu'il est possible de générer un carrousel aux couleurs de sa marque en une minute, aucune raison de s'en priver une fois par semaine.

Édition manuelle · Le secret pour économiser des tokens

Deuxième démonstration · Une landing page pour une boulangerie à partir de zéro

Prompt pour une landing page à partir de zéro (avec questions de précision)

Crée-moi une landing page pour [type d'entreprise, par exemple une boulangerie artisanale]. Avant de commencer le design, pose-moi toutes les questions nécessaires pour affiner le projet : nom de l'entreprise, ambiance et style souhaités, langue du texte, produits ou services proposés, action principale attendue de la part du visiteur et nombre de versions à générer. Une fois mes réponses fournies, construis la page. S'il manque des images, indique-moi où les placer, et je les ajouterai via Browse Files.

Intégration d'images réelles avec Firecrawl

Le AI Master Club vous ouvre ses portes : une session en direct chaque semaine, des replays et une communauté. 47 ₪ par mois, résiliable à tout moment.

Prompts Firecrawl et intégration d'images

Téléchargement des images (dans Claude Code) : Utilise Firecrawl pour télécharger toutes les images de ce site web : [Colle le lien du site]. Enregistre-les dans un sous-dossier du projet. Intégration dans le design (dans Claude Design, après Browse Files) : Place les images pertinentes sur le site, partout où une image est manquante. Choisis pour chaque emplacement l'image la plus adaptée.

Animation, ajustements et effets

De la maquette au site web en ligne · Claude Code, Vercel et Supabase

Prompt de construction et de déploiement (pour Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

Pourquoi c'est capital pour votre entreprise : une landing page comme celle que nous avons créée pour la boulangerie coûte environ 1 000 shekels auprès d'un graphiste débutant, et autour de 3 000 shekels avec un designer plus expérimenté. Ici, vous l'avez conçue vous-même en quelques minutes, aux couleurs de votre marque, avec la possibilité de la publier immédiatement en ligne. Cela ne remplace pas un designer professionnel pour chaque projet, mais pour la grande majorité des besoins courants d'une petite entreprise, c'est amplement suffisant.

Tous les outils de la session

La plateforme pour Claude Design et Claude Code. Nécessite un abonnement payant. Le panneau Design est actuellement disponible uniquement dans le navigateur

Un agent qui parcourt n'importe quel site web pour télécharger images et textes. Se connecte à Claude en tant que Skill et économise des tokens. Propose une offre gratuite

Déploiement de sites web en ligne et lien de partage. Claude Code s'y connecte en un clic. Offre gratuite généreuse

Base de données pour site web · Stockage des emails, des formulaires et des avis. Se connecte à Claude Code. Offre gratuite généreuse

L'outil de Google pour la conception de maquettes, que nous avons comparé pendant la session. Résultats plus génériques que Claude Design

Le guide complet de toutes les fonctionnalités de Claude Design, au-delà de ce qui a été couvert dans cette session

Questions abordées pendant la session

Non. Un abonnement payant à Claude est requis. De plus, ses tokens sont séparés et limités par rapport à l'utilisation classique, et ils se réinitialisent toutes les 5 heures. En revanche, Vercel et Supabase, nécessaires pour publier un site en ligne, proposent une offre gratuite généreuse.

C'est similaire à une charte graphique, mais en plus complet. Au-delà des couleurs et des polices, cela inclut également les composants et le code, ce qui permet de transposer l'identité visuelle directement dans le monde numérique et dans une application. C'est la première chose que l'on construit, et c'est ce qui garantit que chaque production sera cohérente et aux couleurs de la marque.

Il est possible de demander à Claude Code d'analyser un site web pour en extraire un Design System, mais le résultat sera moins performant car vous ne disposez pas du code source initial du site. Cela fonctionne beaucoup mieux lorsque vous possédez l'actif, car Claude accède directement au code et aux composants plutôt qu'à l'apparence visuelle extérieure.

Absolument. En cliquant sur Edit, tout le texte devient cliquable pour une édition manuelle. Vous pouvez également l'exporter au format PDF, vidéo, PowerPoint ou HTML. Il est recommandé de modifier manuellement le contenu directement dans Claude Design plutôt que de demander chaque petite modification à l'agent, car l'édition manuelle permet d'économiser un nombre considérable de tokens.

Exportez le design au format HTML ou ZIP, confiez-le à Claude Code ou Codex qui génère le code et le déploie sur Vercel pour obtenir un lien en ligne. S'il est nécessaire de stocker des données provenant du site, connectez Supabase comme base de données. Il est également possible d'associer votre propre nom de domaine.

C'est possible, il existe un connecteur et un MCP pour WordPress. Mais la préférence lors de la réunion était de construire sur Claude et de déployer sur Vercel, car travailler avec WordPress est plus complexe que le flux fluide de Claude Code et Vercel.

Directement auprès de Firecrawl. Ils fournissent un extrait de code à installer une seule fois dans Claude Code, et depuis, la compétence est disponible à chaque session. Ils proposent également un plan gratuit qui suffit pour la plupart des besoins.

Oui, Claude Design est un outil collaboratif. Si chaque membre de l'équipe possède un compte Anthropic, tout le monde peut travailler sur le même projet. Il est possible de définir un système de design par défaut pour l'entreprise, ainsi qu'un système de design distinct pour chaque client.

Et lors de la prochaine réunion

L'enregistrement complet de la réunion 25, ainsi que toutes les compétences et les instructions que nous avons examinées, sont disponibles pour les membres du club dans la bibliothèque de contenu. Avez-vous construit quelque chose de genré en quelques minutes lors de la réunion? Partagez-le dans la communauté. C'est exactement la connaissance qui fait vivre le club.

Questions fréquentes

Claude Design est-il gratuit?

Non. Un abonnement payant à Claude est nécessaire. Ses jetons sont également séparés et limités par rapport à l'utilisation normale, et ils se réinitialisent toutes les 5 heures. En revanche, Vercel et Supabase, nécessaires pour mettre en ligne un site web, proposent un plan gratuit généreux.

Qu'est-ce qu'un système de design et est-ce la même chose qu'un livre de marque?

C'est similaire à un livre de marque mais plus complet. Au-delà des couleurs et des polices, il comprend également les composants et le code, ce qui permet de traduire la marque directement dans le monde numérique et dans une application. C'est la première chose à construire, et c'est ce qui garantit que chaque produit sera genré et cohérent.

Comment extraire un système de design d'un site qui ne m'appartient pas, comme une grande marque?

Il est possible de demander à Claude Code d'analyser le site et d'en construire un système de design, mais le résultat sera plus faible car vous ne disposez pas du code source du site. Cela fonctionne beaucoup mieux lorsque l'actif vous appartient, car Claude accède alors au code et aux composants eux-mêmes et pas seulement à l'apparence visuelle.

La présentation et la page sont-elles modifiables après leur création?

Tout à fait. Cliquez sur Modifier et tout le texte devient cliquable pour une édition manuelle. Il est également possible d'exporter au format PDF, vidéo, PowerPoint ou HTML. Il est recommandé d'éditer manuellement dans Claude Design plutôt que de demander chaque petit changement à l'agent, car l'édition manuelle économise énormément de jetons.

Comment transformer la maquette en un site web en direct avec un domaine et un hébergement?

Exportez le design au format HTML ou ZIP, apportez-le à Claude Code ou Codex, qui construira le code et le téléchargera sur Vercel qui fournit un lien en direct. Si vous devez enregistrer des informations à partir du site web, connectez Supabase comme base de données. Il est également possible de connecter votre propre domaine.

Est-il possible de le télécharger sur un site WordPress existant?

C'est possible, il existe un connecteur et un MCP pour WordPress. Mais la préférence lors de la réunion était de construire sur Claude et de déployer sur Vercel, car travailler avec WordPress est plus complexe que le flux fluide de Claude Code et Vercel.

D'où vient la compétence Firecrawl?

Directement auprès de Firecrawl. Ils fournissent un extrait de code à installer une seule fois dans Claude Code, et depuis, la compétence est disponible à chaque session. Ils proposent également un plan gratuit qui suffit pour la plupart des besoins.

Est-il possible de travailler dessus en équipe?

Oui, Claude Design est un outil collaboratif. Si chaque membre de l'équipe possède un compte Anthropic, tout le monde peut travailler sur le même projet. Il est possible de définir un système de design par défaut pour l'entreprise, ainsi qu'un système de design distinct pour chaque client.