Atelier bonus : Claude Design, la charte qui s’applique toute seule

Douze modèles de départ, un système de design, et un PPTX à votre charte

Pourquoi cet atelier existe

Votre charte graphique est un PDF. Personne ne l’ouvre. Les trois quarts des documents qui sortent de votre entreprise ne la respectent pas, et vous le savez.

Claude Design fait quelque chose que rien ne faisait avant : il charge votre charte une fois, et tout ce qu’il produit ensuite s’y conforme sans que personne n’ait à y penser. Une maquette d’application, un jeu de diapositives pour le comité, un e-mail de campagne, une note d’une page : tout sort aux bonnes couleurs, aux bonnes polices, avec vos composants.

C’est ce que cet atelier va vous faire vérifier vous-même, sur la marque de votre entreprise d’accueil, en deux heures.

Ce que vous saurez à la fin

• Où est l’outil, ce qu’il coûte, et sur quel abonnement il tourne
• Choisir le bon modèle de départ parmi les douze, au lieu de partir d’une page blanche
• Charger un système de design et mesurer la différence sur un même écran
• Corriger par commentaire ciblé au lieu de tout redemander
• Sortir un PowerPoint, un PDF, un e-mail HTML, ou passer la main à Claude Code

1. Ce que c’est, et où le trouver

1.1 L’adresse et l’abonnement

claude.ai/design, et dans l’application de bureau Claude. Rien à installer d’autre.

C’est un produit Anthropic Labs, annoncé le 17 avril 2026 et désormais proposé en version bêta¹. Il est inclus dans les abonnements Claude Pro, Max, Team et Enterprise : si vous avez déjà l’un des quatre, vous y avez accès sans rien payer de plus.

Une exception à connaître avant de le proposer en entreprise : sur un plan Enterprise, l’accès est désactivé par défaut. Si votre entreprise d’accueil est sur ce plan et que vous ne voyez rien, ce n’est pas une panne, c’est un réglage que l’administrateur doit activer.

Point de gestion à connaître tout de suite : l’usage est décompté sur la même enveloppe que le reste de Claude. Il n’y a pas d’allocation séparée. Un projet lourd exploré la veille d’une réunion peut vous laisser sans capacité le jour même.

1.2 L’écran d’accueil, en trois onglets

L’interface tient en trois onglets, et ces trois onglets disent exactement ce que l’outil sait faire.

Une fois dans un projet, l’écran se coupe en deux : le panneau de conversation à gauche, la toile à droite, qui se met à jour pendant qu’il produit. Un sélecteur de modèle en haut permet de choisir avec quel Claude vous travaillez.

1.3 Ce que ce n’est pas

Ce n’est pas un site en ligne. Un prototype navigable donne l’illusion du fonctionnement : rien n’est enregistré, aucun paiement n’aboutit. C’est une propriété, pas un défaut, mais elle se dit à un client qui découvre l’écran, faute de quoi il croira le projet terminé.

Ce n’est pas un remplacement de la réflexion d’architecture. Il produit ce que vous décrivez. Si votre arborescence est fausse, vous obtiendrez une belle maquette d’une structure fausse, plus vite qu’avant.

2. Douze modèles de départ, et lequel prendre

L’onglet Templates en propose douze. La plupart des gens cliquent sur Blank par réflexe et se privent de la moitié de l’outil. Voici les douze, et ce qu’ils valent pour vous.

Les quatre qui vont vraiment vous servir : Slides, HTML email, Wireframe, Document. Ce sont vos quatre livrables de tous les jours.

À retenir. Wireframe d’abord, UI mockups ensuite. Une maquette aboutie montrée trop tôt fige la conversation sur les couleurs, et la décision de structure ne se prend jamais. Le modèle que vous choisissez détermine le type de discussion que vous aurez.

3. Le design system : votre charte appliquée toute seule

C’est la fonction qui distingue Claude Design de tout ce que vous avez utilisé jusqu’ici, et c’est celle que personne ne découvre seul.

3.1 Ce que c’est

Un système de design fournit automatiquement à tous vos projets vos couleurs, vos polices et vos composants de marque. Vous le chargez une fois, il s’applique ensuite sans que vous ayez à le redemander.

La conséquence est directe : le stagiaire qui produit un e-mail de campagne un vendredi soir le produit à votre charte. Sans lui rappeler la charte.

3.2 Comment on en obtient un

Trois voies, de la plus simple à la plus complète.

Claude le construit lui-même. Vous pointez vers votre code de site ou vos fichiers de design, il en déduit les couleurs, les polices et les composants récurrents.

Vous l’importez depuis Claude Code, avec la commande /design-sync. Elle accepte un dépôt GitHub, des fichiers locaux, ou un téléversement brut.

Votre organisation le configure une fois pour toutes. Sur un plan Team ou Enterprise, l’administrateur le met en place et tous les membres en héritent automatiquement à la création d’un projet.

3.3 Ce que cela change dans votre métier

Une charte graphique ne se fait pas respecter par un document, elle se fait respecter par un outil. C’est l’argument que vous pourrez porter en entreprise, et il vaut mieux que « il faudrait qu’on respecte la charte ».

Le piège. La qualité de ce qui sort dépend entièrement de la qualité de ce que vous chargez. Une charte incomplète, ou un site dont les couleurs ont dérivé depuis trois ans, produira un système de design qui reproduit fidèlement le désordre. Regardez ce qu’il a déduit avant de vous en servir.

4. Cinq demandes à copier

Rédigées mot pour mot. Remplacez ce qui est entre crochets, et joignez ce que vous avez.

4.1 La page qui doit faire agir

Modèle Wireframe. Conçois la page d’accueil de [entreprise], qui [ce qu’elle fait], pour [cible, avec son contexte : mobile, pressée, novice].

L’objectif unique de cette page : [obtenir un rendez-vous / faire télécharger le catalogue]. Tout le reste lui est subordonné.

Contenu à placer : [liste réelle, avec les vrais textes]. Une seule colonne, action visible sans faire défiler.

Donne-moi deux versions structurellement différentes, pas deux habillages : l’une qui met l’action en premier, l’autre qui commence par la preuve.

4.2 La refonte, à partir de la page réelle

Capture cette page : [adresse]. Analyse-la d’abord : qu’est-ce qui attire l’œil en premier, quelle action est mise en avant, qu’est-ce qui gêne la lecture ?

Puis propose une version qui corrige ce que tu as identifié, en appliquant notre système de design.

Liste séparément ce que tu as changé et pourquoi.

L’outil sait capturer une page web et en récupérer les éléments : vous n’avez pas à décrire ce qui existe déjà.

4.3 Le jeu de diapositives du comité

Modèle Slides, avec notre système de design. Voici notre note de synthèse [joindre le .docx] et nos chiffres [joindre le .xlsx].

Produis huit diapositives pour un comité de direction : le problème constaté, ce que nous proposons, les deux options chiffrées, notre recommandation, la décision attendue.

Un message par diapositive. Aucune phrase creuse. Les chiffres viennent du fichier joint, tu n’en inventes aucun.

Il accepte en entrée vos fichiers Word, PowerPoint et Excel. C’est la demande qui vous fera gagner le plus de temps sur l’année.

4.4 L’e-mail de campagne

Modèle HTML email, avec notre système de design. Objet de la campagne : [quoi]. Cible : [qui]. Action attendue : [une seule].

Un seul appel à l’action, répété deux fois. Prévois l’affichage sur téléphone et le cas où les images sont bloquées.

Exporte en HTML autonome.

4.5 La palette, avant tout le reste

Modèle Color + type pairing. Nous sommes [secteur], nous parlons à [cible], et nous voulons paraître [trois adjectifs].

Propose trois couples palette et typographie franchement différents, et pour chacun, une phrase sur ce qu’il dit de nous.

Celle-ci sert quand la marque n’existe pas encore, ce qui est le cas de la plupart des projets d’école.

Atelier 1, votre premier écran sous charte

En binôme, un poste. Sur la marque de votre entreprise d’accueil.

1. Chargez un système de design. Pointez vers le site de l’entreprise, ou téléversez la charte si vous l’avez. Regardez ce que Claude en a déduit : couleurs, polices, composants. Notez ce qu’il a manqué.
2. Produisez un Wireframe d’une page réelle, avec la demande du 4.1 et vos vrais textes.
3. Reproduisez le même écran sans le système de design, dans un nouveau projet.
4. Mettez les deux côte à côte et notez trois différences précises.

Contrainte : contenu réel, jamais de faux texte. Le faux texte rend toutes les maquettes belles, y compris celles qui ne tiendront pas.

Rendu : les deux écrans, plus vos trois différences.

5. Corriger sans tout redemander

Trois manières, et le choix n’est pas indifférent.

Le commentaire ciblé est la méthode la plus fiable, parce qu’elle supprime l’ambiguïté sur la cible : l’outil sait exactement de quel élément vous parlez.

L’erreur qui coûte le plus de temps est de tout redemander pour changer un détail. Vous obtenez autre chose, et vous perdez ce qui allait. Avant d’explorer une direction franchement différente, demandez explicitement de conserver l’état actuel : sans point de retour, une exploration qui ne donne rien vous laisse les mains vides.

6. Sortir : exporter, partager, passer la main

6.1 Les formats de sortie

Le bouton Export, en haut à droite. Ce qu’il propose :

L’export PPTX est celui qui change une soutenance : vous arrivez avec un jeu de diapositives à votre charte, produit en vingt minutes, et vous le retouchez dans PowerPoint comme n’importe quel autre.

6.2 Passer la main à Claude Code

Une fois la maquette validée, elle se transmet directement à Claude Code, sur le web ou en local, pour la réalisation. C’est le point où le prototype cesse d’être un dessin et devient un chantier.

Vous ne coderez pas vous-même. Mais vous saurez que ce que vous avez validé peut être repris sans être redessiné, et c’est une information qui compte quand vous arbitrez un budget.

6.3 Partager, et à quel niveau

Un lien de partage, trois niveaux : lecture seule, commentaire, modification complète.

Le choix est plus lourd qu’il n’en a l’air. Un client à qui vous donnez le droit de modifier ne vous donnera plus d’avis : il fera lui-même, et vous recevrez une maquette modifiée sans savoir pourquoi. Le niveau commentaire est presque toujours le bon : il oblige à formuler la demande, ce qui est précisément ce dont vous avez besoin pour arbitrer.

6.4 Quatre limites documentées

Elles sont annoncées par l’éditeur, et il vaut mieux les connaître avant une réunion².

Les commentaires posés sur un élément peuvent ne pas persister. L’édition simultanée à plusieurs reste sommaire : une personne pilote, les autres commentent. L’outil n’existe que sur le web et l’application de bureau. Et la qualité d’un système de design importé dépend entièrement de la qualité de sa source.

Le piège. Ne montrez jamais une maquette sans dire ce qu’elle n’est pas. « Les boutons ne fonctionnent pas, les textes sont provisoires, ce que je vous demande c’est de valider la structure. » Sans cette phrase, vous recevrez des remarques sur la couleur des boutons et aucune décision sur ce qui compte.

Atelier 2, la maquette de décision

En binôme. Reprenez votre meilleur écran de l’atelier 1.

1. Produisez une variante par commentaires ciblés, jamais par une nouvelle demande complète.
2. Exportez en PPTX, et ouvrez le fichier pour vérifier qu’il est utilisable tel quel.
3. Écrivez les trois phrases d’ouverture de réunion : ce que la maquette est, ce qu’elle n’est pas, la décision que vous attendez.

Synthèse

claude.ai/design, inclus dans Pro, Max, Team et Enterprise, décompté sur la même enveloppe que le reste de Claude.

Trois onglets : Projects, Design systems, Templates. Douze modèles de départ, dont quatre vous serviront vraiment : Wireframe, Slides, HTML email, Document.

Le système de design est la fonction qui compte : chargé une fois, il applique votre charte à tout ce qui sort ensuite. Importable par /design-sync depuis Claude Code, ou déduit de votre site.

Il accepte en entrée un texte, des images, vos fichiers Word, PowerPoint et Excel, votre code, et la capture d’une page web.

Trois manières de corriger : la conversation pour la structure, le commentaire pour un point précis, la main quand expliquer coûte plus cher que faire. Jamais tout redemander pour un détail.

En sortie : PPTX, PDF, HTML autonome, archive, Canva, Adobe, Gamma, Vercel, ou passage direct à Claude Code.

Pour aller plus loin

Chargez le système de design de votre entreprise d’accueil, puis produisez en une soirée les trois documents qu’elle utilise le plus : le jeu de diapositives de présentation, la fiche produit, l’e-mail type.

Montrez-les. La question qui suivra sera « qui a fait ça ? », et c’est une bonne question à provoquer en alternance.

Sources

Notes

• Claude Design, produit Anthropic Labs annoncé le 17 avril 2026 en préversion de recherche, est désormais présenté en version bêta. Il est accessible sur claude.ai/design et dans l’application de bureau Claude, inclus dans les abonnements Claude Pro, Max, Team et Enterprise, avec un accès désactivé par défaut sur Enterprise. L’usage est décompté sur l’enveloppe commune à tous les produits Claude, sans allocation dédiée. Sources : annonce de lancement sur anthropic.com/news/claude-design-anthropic-labs et documentation actuelle sur support.claude.com. Vérifié le 13 août 2026. Revenir au texte
• Fonctionnalités et limites relevées dans l’annonce de lancement et dans la documentation d’assistance de l’éditeur, article « Commencer avec Claude Design » : entrées acceptées par texte, image, documents DOCX, PPTX et XLSX, code source et capture web ; import d’un système de design par /design-sync depuis Claude Code ; itération par conversation, commentaire en ligne ou édition directe ; exports .zip, PDF, PPTX, HTML autonome, Canva, Adobe, Gamma, Vercel, et transmission à Claude Code ; partage en lecture seule, commentaire ou modification ; limites annoncées sur la persistance des commentaires, l’édition simultanée, la disponibilité web et bureau, et la qualité d’importation. Sources : anthropic.com et support.claude.com. Vérifié le 13 août 2026. Revenir au texte