Par Fathi Sehla, formateur IA & Claude Code · ·
Claude Design est l’outil d’Anthropic pour créer des visuels en discutant avec Claude. Il construit ce que vous décrivez sur une zone de travail, à côté de la conversation.
Ce tuto suit les chapitres de la vidéo, dans le même ordre. Vous pouvez passer de la vidéo au texte sans perdre le fil.
L’exemple s’appelle Pétale et Tige. C’est un fleuriste imaginaire, avec trois boutiques à Lyon : Croix-Rousse, Presqu’île et Monplaisir.
On crée d’abord sa charte graphique. Puis cette charte sert à quatre projets.
Pour finir, on retrouve la même charte dans Claude Slides. Les fichiers et les demandes sont dans le kit Claude Design.
Non. Il faut au moins l’offre Pro, selon la page des tarifs lue le 3 octobre 2026. Son tableau indique « Non » pour Free.
Sans être connecté, on voyait Pro à 17 dollars par mois, payés à l’année. Au mois, c’était 20 dollars. Sur l’ordinateur qui a servi au tuto, la page française affichait 15 et 18 euros. Ces prix sont hors taxes, et le vôtre peut différer. Les notes de version du 16 septembre 2026 annonçaient pourtant Design sur toutes les offres, gratuite comprise.
Selon l’aide d’Anthropic, Claude Design compte dans la même limite que vos conversations avec Claude.
Pour savoir où vous en êtes, ouvrez les réglages, page Utilisation. Regardez cette page avant une demande, puis après : vous verrez ce que la demande a coûté.
Une fois la limite atteinte, Claude Design s’arrête jusqu’à la remise à zéro. Sinon, vous pouvez continuer avec des crédits d’utilisation. Ils sont payants.
Seules les demandes à Claude comptent. Les retouches à la main, les curseurs et les téléchargements ne comptent pas. Une astuce : écrivez votre demande à tête reposée dans un bloc-notes. Vous évitez de la refaire trois fois.
Allez sur claude.ai en tapant l’adresse vous-même. Des internautes ont signalé de faux sites qui copient la page de Claude.
Dans la barre de gauche, cliquez sur Design. La page s’ouvre avec quatre cartes en haut.
Si vous venez de Canva, vous chercherez des modèles tout faits. Sur cette page, le 3 octobre, il n’y en avait pas. On part de sa demande et de sa charte.
Sous les cartes, la liste de vos projets. Des vidéos d’avril montrent Claude Design sur un site à part, claude.ai/design. Il existe encore, mais on n’en a pas besoin.
Sur le téléphone, on peut demander un visuel et le regarder. Pour le modifier ou le partager, il faut un ordinateur.
Si vous n’avez jamais utilisé Claude, le tuto Claude pour débutants montre comment créer votre compte et écrire votre première demande.
Premier essai, sans charte. On clique sur la carte Design et on vérifie qu’aucune charte n’est cochée. Puis on demande, en une phrase :
Fais la page d'accueil du site d'un fleuriste à Lyon.Si la page reste vide à la fin, rechargez-la. Ça arrive.
La page marche. Mais Claude ne connaît ni nos couleurs, ni notre logo, ni notre ton. Il a fait la page de n’importe quel fleuriste. Inutile de refaire cet essai : il coûte une demande.
Revenez sur la page Design et cliquez sur la carte Design System. Claude appelle ça un système de design. Nous, on dit la charte.
Il propose trois points de départ. Les deux premiers servent aux équipes qui ont déjà leurs outils. Le plus simple : joindre ses fichiers dans la zone de message. Les deux fichiers de l’exemple sont dans le kit.
Prenez un logo en PNG sur fond transparent. Sinon, il fait un carré blanc sur les fonds de couleur. Pas de charte écrite ? Joignez une plaquette en PDF, une présentation ou une capture de votre site. Le kit contient aussi un modèle de charte à remplir.
La demande tient en deux phrases.
Crée la charte de Pétale et Tige, un fleuriste de Lyon, à partir de ces deux fichiers : le logo et la charte graphique. Garde exactement les couleurs et les polices indiquées, et écris les règles en français.Sans la consigne de garder vos couleurs, Claude peut les arranger à son goût. Les règles seront en français, mais le sommaire de la charte restera en anglais.
En bas de la zone de message, on choisit le modèle de Claude. Selon le modèle, une demande compte plus ou moins dans votre limite. Dans la vidéo, on prend Sonnet. Ce choix ne vaut que pour cette conversation.
Claude met environ deux minutes. Et voilà la charte de Pétale et Tige.
À gauche, Claude dit ce qu’il a gardé et ce qu’il a ajouté. À droite, la page de la charte commence par le ton. Relisez-le : c’est lui qui guide tous les textes.
Cette page se modifie à la main, sans toucher à votre limite. Dans la vidéo, on ajoute une règle : « Sur le site, chaque bouquet affiche son prix. » Claude relit cette page avant chaque visuel.
Plus bas, les quatre couleurs. Comparez leur code avec votre fichier.
Claude vérifie aussi la lisibilité. Le rose poudré et le vert sauge sont trop pâles pour un texte. Il le signale, et il garde vos couleurs quand même.
Les polices doivent être les bonnes : Cormorant Garamond pour les titres, Nunito Sans pour le texte. Elles se choisissent dans une liste : Google Fonts et les polices courantes. Pour une police maison, joignez son fichier dans la conversation de la charte.
La charte montre aussi le logo, avec ses règles.
Vos chartes sont rangées dans les réglages, rubrique Systèmes de design. Vous pouvez en avoir une par entreprise.
Pour un nouveau visuel, cliquez sur la carte Design. Le bouton de la charte ouvre la liste de vos chartes. Celle de Pétale et Tige est déjà cochée.
Inutile de redécrire vos couleurs : la charte contient les couleurs, les polices et le ton.
Premier exemple : la page d’accueil du site. Le nom de la charte s’affiche sous la zone de message.
La demande est plus longue, parce qu’elle dit tout.
Fais la page d'accueil du site de Pétale et Tige, notre fleuriste à Lyon. En haut, le logo et une phrase d'accueil. Puis nos trois boutiques (Croix-Rousse, Presqu'île, Monplaisir) avec leurs horaires, trois bouquets phares, et un bouton pour commander. Le site est en français, pour des clients du quartier qui le regardent surtout sur leur téléphone. Vouvoie le client.Elle donne le contenu de la page, de haut en bas. Puis le public : des clients du quartier. Puis l’écran : le téléphone d’abord, car c’est là que les clients regardent le site. Le vouvoiement est dans la charte, mais le redire ne coûte rien.
Dans la vidéo, Claude ne pose aucune question. Il construit tout de suite. La demande doit donc tout dire.
Comparez avec l’essai sans charte. Cette fois, la page a les couleurs et le logo de Pétale et Tige.
La flèche en haut à gauche ramène à la zone de travail. En haut, la barre d’outils, en anglais.
À droite, le zoom. La page est posée dans un cadre au format téléphone. L’icône d’agrandissement l’ouvre en plein écran. Là, les boutons marchent : un clic sur Commander fait descendre la page.
Le haut de la page ne vous convainc pas ? Plutôt que de le corriger, demandez plusieurs idées.
Propose-moi trois idées différentes pour le haut de la page, chacune dans son propre cadre, pour que je choisisse.Les trois idées arrivent côte à côte. Comparez-les sur un point : laquelle se lit le mieux sur un téléphone. Dans la vidéo, on garde l’idée C, qui montre la boutique en premier.
Je garde l'idée C, intègre-la à la page.Claude Design ne garde pas l’historique des versions. Avant de retoucher, faites une copie.
Il n’y a rien à enregistrer. Tout s’enregistre tout seul, même les retouches à la main.
La copie n’a pas de conversation avec Claude. On continue donc sur l’original, rouvert depuis la page Design. Il s’ouvre sans sa conversation. Le bouton Chat, en haut à droite, la fait revenir. Si une modification vous déplaît, la copie est là.
Relisez la page : Claude ne connaît pas tout de votre boutique.
Les horaires et les adresses sont entre crochets : [HORAIRES], [ADRESSE]. Claude ne les connaissait pas, et il ne les a pas inventés. Les trois bouquets phares, en revanche, il les a choisis lui-même. Il le dit dans sa réponse. On vérifie.
Vous avez déjà vos textes ? Collez-les dans la demande. Demandez à Claude de les garder mot pour mot, sinon il peut les réécrire.
Pour remplacer un texte, pas besoin de redemander à Claude. On modifie à la main, sans toucher à votre limite.
Sur la zone de travail, cliquez sur le nom d’une boutique. Ses propriétés s’ouvrent à droite : la taille, la police, la couleur. La mention Good contrast dit que le texte reste lisible sur son fond.
Un élément glissé change de place dans l’ordre de la page. On ne le pose pas librement.
Pour la couleur, fermez d’abord le panneau des propriétés, sinon la petite barre de couleur ne s’affiche pas. Cliquez sur le texte : la barre apparaît au-dessus. Sa pastille ouvre les couleurs de la charte. La même pastille existe dans les propriétés.
Pour annuler une retouche à la main : Commande Z sur Mac, Contrôle Z sur PC. Une fois par geste.
Dans la vidéo, on veut le bouton Commander en rose poudré, avec le texte en vert profond. Ça fait deux changements d’un coup. On le demande donc à Claude, avec un commentaire.
mets ce bouton en rose poudré, avec le texte en vert profond.Avec un commentaire, Claude sait de quel élément on parle. Pas besoin de le décrire. Il répond dans le fil du commentaire.
Un commentaire semble ignoré ? L’aide d’Anthropic signale ce défaut de la bêta. Elle conseille de recopier la remarque dans la conversation.
Les curseurs se demandent une fois à Claude. Ensuite, vous réglez vous-même, sans toucher à votre limite.
Ajoute des curseurs pour que je puisse changer moi-même la couleur du bandeau du haut, la taille des titres et l'arrondi des cartes. Donne-leur des noms en français.Sans la dernière phrase, Claude nomme les curseurs en anglais.
Pour les ouvrir, cliquez sur l’icône à côté du nom du cadre. Faites glisser le curseur de la taille des titres : la page change tout de suite.
Reste la version ordinateur. On la demande à côté de celle du téléphone.
Fais aussi la version pour ordinateur de cette page, à côté de la version téléphone.Elle arrive posée à côté, avec les mêmes curseurs.
Un site a souvent plusieurs pages. Pour en ajouter une :
Ajoute une deuxième page, Nos boutiques, avec nos trois boutiques, et un menu en haut pour passer d'une page à l'autre.Claude ajoute un menu en haut, sur les deux versions. La nouvelle page a son propre cadre, juste sous l’accueil. Pour l’essayer, ouvrez le cadre du téléphone en plein écran, puis cliquez sur Nos boutiques.
Claude ne fabrique pas de photos. Il leur réserve une place, que vous remplissez avec les vôtres.
Joignez la photo d’un bouquet. Celle de la vidéo, photo-bouquet.jpg, est dans le kit. Elle vient d’Unsplash, un site de photos libres.
Voici la photo d'un de nos bouquets. Mets-la à la place du premier emplacement photo des bouquets, sur la version téléphone et sur la version ordinateur.La photo prend sa place. Dans la vidéo, Claude a même renommé le bouquet d’après la photo. Relisez ce nom : c’est un texte qu’il a inventé.
Tout part du bouton Partager.
Son premier onglet règle qui peut ouvrir le lien vers la page. Ce lien sert à montrer la page, mais son adresse reste celle de Claude.
Pour un vrai site à votre adresse, ouvrez l’onglet Exporter.
Pour changer le site plus tard, modifiez-le dans Claude Design. Puis refaites l’export.
Pour un paiement ou des comptes clients, il faut un autre outil : Claude Code.
Deuxième exemple : Pétale et Tige présente ses fleurs de saison. Cinq images pour Instagram, une story et l’affiche de la vitrine.
Sur la page Design, cliquez sur la carte Design. La charte est déjà choisie. Joignez une image dont vous aimez la mise en page. Celle de la vidéo est dans le kit.
Fais un carrousel Instagram de cinq images pour présenter les fleurs de saison de Pétale et Tige : une image de couverture, trois images avec une fleur chacune (dahlia, rose, hortensia) et une dernière image qui invite à passer en boutique. Inspire-toi de l'image jointe pour la mise en page.La demande dit combien d’images, et le rôle de chacune. L’image jointe montre la mise en page voulue : avec des mots, il faudrait un paragraphe.
Les cinq images arrivent, chacune dans son cadre carré de 1080 × 1080. Il n’y a pas de photo : regardez ce que Claude a mis à la place. Dans sa réponse, il signale les textes qu’il a écrits lui-même.
Prenez le crayon et soulignez d’un trait le titre de la couverture.
À l’écran, aucun bouton n’envoie le dessin à Claude. On le lui explique dans la conversation :
J'ai souligné un texte au crayon sur la couverture. Mets ce texte plus gros, et efface ensuite mon dessin.Le titre grossit, et le dessin disparaît. Claude dit quel texte il a compris : vérifiez que c’est le bon.
La story et l’affiche se demandent en même temps.
Décline la couverture en story Instagram, et en affiche A4 pour la vitrine, avec le prix de chaque fleur à compléter.La story arrive en hauteur, en 1080 × 1920. Vérifiez qu’aucun texte ne touche le haut ou le bas de l’image. Instagram y pose ses boutons.
L’affiche est au format A4. Les prix sont entre crochets, à compléter avant d’imprimer. Un dahlia à [PRIX] se vend assez mal.
Chaque cadre a son icône de téléchargement. Son menu propose une image PNG, en taille normale ou grande. Il propose aussi un PDF ou une page web.
D’autres formats passent par le bouton Partager, onglet Exporter, puis Plus de formats et d’applications. Canva y figure, avec un bouton pour connecter votre compte.
Dans la liste vue le 3 octobre, il n’y avait ni PowerPoint pour un visuel ni Figma. Les présentations, c’est le rôle de Claude Slides. Pour un graphiste sur Figma, envoyez le PDF ou les images.
Troisième exemple : l’application de commande de Pétale et Tige. On en fait la maquette, trois écrans qu’on peut essayer comme sur un téléphone.
Cette fois, on part d’un croquis dessiné à la main et pris en photo. Il montre tout de suite où va chaque bouton. Des rectangles et des mots suffisent. Le kit contient des écrans de téléphone vides, à imprimer.
Sur la page Design, cliquez sur la carte Design. Joignez le croquis et le logo, tous deux dans le kit.
Voici mon croquis de l'application de commande de Pétale et Tige, trois écrans dessinés à la main, et notre logo. Refais-le d'abord en noir et blanc, fidèle au croquis. Puis fais la version aux couleurs de la charte, au format téléphone, et relie les écrans pour qu'on puisse cliquer d'un écran à l'autre. Vouvoie le client.Le noir et blanc d’abord, c’est le plan de la maison avant la couleur des murs. Le vouvoiement est redit : pendant un essai, Claude avait tutoyé le client. Comptez environ trois minutes.
Le résultat tient sur deux rangées. La première montre la maquette en noir et blanc : les trois écrans du croquis, au propre. La deuxième montre les mêmes écrans, aux couleurs de Pétale et Tige.
Le bouton de lecture du premier écran en couleurs lance la maquette. Ouvrez-la en grand.
Dans la vidéo, on choisit la boutique de la Croix-Rousse. On arrive sur les bouquets et on ajoute un bouquet du moment. Puis on va au panier. Les boutons marchent, d’un écran à l’autre.
Vos clients peuvent-ils commander avec cette maquette ? Non. Il n’y a ni paiement, ni comptes clients.
Regardez le panier. Ses trois lignes sont des exemples, sans lien avec ce qu’on a choisi. Claude le signale lui-même dans sa réponse.
La maquette sert à montrer l’idée et à la faire valider. La vraie application se fait avec Claude Code. Nate Parrott, qui a conçu Claude Design chez Anthropic, conseille aussi Claude Code pour un logiciel en production. Il précise que Claude Design n’a pas de modèle d’image. D’où le logo et la photo apportés ici.
Autre limite, selon l’aide lue le 3 octobre : travailler à plusieurs en même temps n’est pas toujours fiable.
Dernier exemple : les ventes du trimestre, d’un coup d’œil.
Sur la page Design, cliquez sur la carte Design. Joignez le fichier des ventes, dans le kit. Il a deux feuilles : les ventes par boutique et les ventes par produit.
Voici les ventes du troisième trimestre de nos trois boutiques. Fais un tableau de bord d'une page, sur ordinateur, pour les gérantes : le chiffre d'affaires par boutique et par mois, les produits qui se vendent le mieux, et des filtres pour choisir la boutique et le mois. Utilise uniquement les chiffres du fichier, n'invente rien.Cette dernière phrase va dans toute demande qui porte sur des chiffres. Claude met un peu plus d’une minute.
Agrandissez le tableau de bord. Vérifiez que tout y est : les filtres, le chiffre d’affaires et les meilleures ventes. Un clic sur Monplaisir n’affiche que cette boutique.
Le total affiché est-il forcément juste ? Non. Un joli tableau de bord peut afficher un chiffre faux, avec beaucoup d’assurance. On compare donc toujours avec le fichier.
Remettez toutes les boutiques. Le fichier du kit donne 118 500 euros pour le trimestre.
Dans la vidéo, le total affiché est le bon.
Pour montrer le tableau de bord aux gérantes, cliquez sur Partager.
Inviter quelqu’un. Tapez son adresse e-mail. La personne doit avoir un compte Claude. Vous choisissez ensuite ce qu’elle peut faire : regarder, commenter ou modifier.
Donner l’accès par lien. Sous Accès général, ouvrez le menu Vous uniquement. Choisissez Toute personne disposant du lien, puis confirmez. Avec le lien, on peut regarder sans modifier, même sans compte Claude. Vos chiffres deviennent donc visibles par tous ceux qui l’ont.
Arrêter de partager. Rouvrez le même menu et choisissez Uniquement les personnes invitées.
Faut-il recréer la charte pour une présentation ? Non. Sur la page Design, cliquez sur la carte Slides : la charte de Pétale et Tige est déjà choisie. Chaque nouvelle présentation part avec ses couleurs.
Pour la présentation elle-même, tout est dans le tuto Claude Slides.
On a créé une charte, puis un site, un carrousel, une maquette d’application et un tableau de bord. On a corrigé à la main, par commentaire et avec les curseurs. Avant de publier, on relit les textes inventés, les prix et les chiffres.
Le modèle de charte, le croquis, le fichier Excel et les demandes sont dans le kit Claude Design. Pour le recevoir, vous laissez votre adresse e-mail.
Sur Team et Enterprise, la charte se règle une fois pour toute l’organisation. Avant d’ouvrir Claude Design aux équipes, Anthropic conseille de confier la charte à un designer expérimenté. Sur Enterprise, Design reste désactivé tant qu’un propriétaire de l’organisation ne l’active pas.
Mieux vaut décider tôt qui s’occupe de la charte. Sinon, chaque service aura bientôt son propre vert sauge.
Design est un des modèles d’artefacts de Claude, avec Claude Slides et Claude Docs. Le fonctionnement commun est dans le guide des artefacts de Claude. Les visuels en équipe se travaillent dans la formation Claude en entreprise.
Les gestes et les libellés viennent de la vidéo « Claude Design : le tuto complet pour débutants (2026) ». Ils viennent aussi des relevés faits à l’écran pendant le tournage, le 3 octobre 2026.
Quand l’écran contredit l’aide d’Anthropic, ce tuto suit l’écran. C’est le cas du lien de partage, que l’aide réserve aux comptes Claude. C’est aussi le cas de l’export en PowerPoint, absent pour un visuel.
L’aide d’Anthropic et la page des tarifs ont été lues sans compte connecté, le 3 octobre 2026. Le prix en euros a été relevé le même jour sur l’ordinateur de tournage. Le billet de Nate Parrott, sur le blog de Claude, date du 24 juillet 2026.
La photo du bouquet est de jessie daniella, sur Unsplash.
Ce tuto fait partie d'une série rangée par outil. Les autres sont sur la page Tutos IA au bureau, pas à pas.
Les fichiers du tuto Claude Design, offerts
Vous recevez les fichiers de l'exemple et les phrases de départ, pour refaire chaque étape chez vous. Il suffit de laisser votre email. Recevoir le kit Claude Design
La formation avancée sur Claude
Pour que Claude connaisse votre travail, et que vous n'ayez plus à tout lui réexpliquer. Elle est en préparation, la liste d'attente est ouverte. Voir la formation
Une heure avec Fathi, en visio
Bloqué sur une étape, ou besoin d'un avis sur votre projet ? Une heure avec moi, 150 €. Réserver un créneau
Pour former une équipe, avec prise en charge OPCO possible : La formation Claude en entreprise.
Animée par Fathi Sehla, qui construit des agents Claude Code et des automatisations n8n en production. Il anime lui-même les sessions. Sur Malt, 4,7/5, moyenne de 8 avis, pour 14 projets.
Une question avant de vous engager ? Appelez, c'est le plus rapide : 07 43 44 61 22.
Claude Design est l'outil d'Anthropic pour créer des visuels en discutant avec Claude. Il fait des sites, des images pour Instagram, des maquettes d'application et des tableaux de bord. Il ne fabrique pas de photos : vous apportez les vôtres.
Non. Selon la page des tarifs lue le 3 octobre 2026, Claude Design demande au moins l'offre Pro. Sans être connecté, on y voyait Pro à 17 dollars par mois, payés à l'année. Au mois, c'était 20 dollars. Sur l'ordinateur du tuto, la page française affichait 15 et 18 euros. Ces prix sont hors taxes.
Sur claude.ai, cliquez sur Design dans la barre de gauche. La page de Claude Design s'ouvre, avec une carte pour créer un visuel. Il faut une offre payante, Pro au minimum.
Dans Claude Design, créez d'abord la charte de votre entreprise, avec votre logo. Puis demandez un visuel en précisant le contenu, le public, le ton et l'écran (téléphone ou ordinateur). Relisez ce que Claude a inventé, puis corrigez.
Sur la page Design, cliquez sur la carte Design System. Joignez votre logo en PNG, avec une page qui décrit les couleurs, les polices et le ton. Demandez à Claude de garder exactement ces couleurs et ces polices.
Non. Selon l'aide d'Anthropic lue le 3 octobre 2026, Claude Design compte dans la même limite que vos conversations. Seules les demandes à Claude comptent. Les retouches à la main, les curseurs et les téléchargements ne comptent pas.
Dans Claude Design, tout passe par le bouton Partager, onglet Exporter. Vous téléchargez la page web pour la mettre en ligne vous-même. Ou vous l'envoyez chez un hébergeur comme Netlify, une fois votre compte connecté. Avec le lien de partage, l'adresse reste celle de Claude.
Oui, d'après la fenêtre de partage de Claude Design, le 3 octobre 2026. Avec l'option « Toute personne disposant du lien », chacun peut regarder le visuel sans le modifier. Une personne invitée par e-mail, elle, doit avoir un compte Claude.
Claude Design ne fabrique pas de photos : il leur réserve une place vide. Selon Nate Parrott, le designer d'Anthropic qui l'a conçu, l'outil n'a pas de modèle d'image. Il est donc peu adapté pour créer un logo. Nate Parrott conseille d'apporter celui que vous avez déjà.
Dans Claude Design, chaque cadre se télécharge en image PNG, en PDF ou en page web. Depuis le bouton Partager, onglet Exporter, vous pouvez aussi envoyer le visuel vers Canva ou Netlify. Il faut d'abord y connecter votre compte. Dans la liste vue le 3 octobre 2026, il n'y avait ni PowerPoint pour un visuel ni Figma.
Claude sort une première version aux couleurs de la marque. Savoir quoi lui donner et quoi vérifier, c'est ce qu'on travaille en session, sur vos propres visuels.
C'est moi qui réponds. Et si je n'ai rien à vous apporter, je vous le dis.
Par écrit : contact@formation-ia-claude.fr
J’aimerais savoir quelles pages vous servent. Pour ça, j’utilise Google Analytics, qui dépose des cookies. Il ne se lance que si vous acceptez. En savoir plus.