# Comment concevoir avec Claude Design?

Date: 2026-04-26 · Author: Robert Scales · https://guidetoartificialintelligence.com/fr/apprendre/concevoir-avec-claude-design/

**Answer:** Commencez par un court mandat qui nomme le public, l’objectif unique de la page et ses sections, demandez deux ou trois variantes, puis peaufinez l’une d’elles avec des commentaires et de petites demandes jusqu’à ce qu’elle tienne la route avec du vrai contenu et des cas limites. Quand elle est prête, utilisez le transfert vers Claude Code, pour qu’un agent de programmation construise à partir de la maquette et de vos notes plutôt que d’une capture d’écran.

Claude Design, l’outil d’Anthropic Labs lancé en aperçu de recherche (*research preview*) le 17 avril, donne ses meilleurs résultats quand vous le traitez comme un designer junior rapide : donnez-lui un mandat clair, regardez les options côte à côte et prenez vos décisions à voix haute pour qu’elles soient consignées. Ce guide suit un petit projet du premier prompt jusqu’au code fonctionnel : une page d’accueil pour un atelier de poterie de fin de semaine.

D’abord, quelques termes. Une **page d’accueil** (*landing page*) est une page Web unique construite autour d’une seule action, comme s’inscrire. Un **prototype** est un modèle cliquable d’une page ou d’une application, qui sert à tester une idée avant de la construire pour de vrai. Un **système de design** (*design system*) est l’ensemble des couleurs, des polices et des éléments réutilisables, comme les boutons et les cartes, qui assure la cohérence d’un produit.

## Étape 1 : rédiger un mandat, pas un souhait

Les prompts vagues produisent des pages génériques. Un bon mandat nomme à qui s’adresse la page, la seule chose que les visiteurs devraient faire, les sections dans l’ordre et les contraintes éventuelles.

```prompt
Conçois une page d’accueil pour un atelier de poterie de deux jours pour
débutants, dans un petit studio communautaire. Public : des adultes sans
expérience, dont beaucoup ont plus de 50 ans. Objectif unique : réserver une
place. Sections, dans l’ordre : titre avec un espace réservé pour une photo,
ce que vous allez fabriquer, l’horaire des deux jours, ce qui est inclus,
l’enseignante, trois courtes questions fréquentes, bouton de réservation.
Chaleureux, calme, facile à lire : gros caractères, contraste élevé, aucun
cliché de photo de banque d’images. Montre les versions ordinateur et mobile.
```

Si votre organisation a configuré un système de design, ou si vous avez lié une base de code, Claude utilise automatiquement ces couleurs et ces composants. Le tutoriel d’Anthropic précise que vous pouvez importer un dépôt de GitHub ou joindre un dossier local; pour les gros projets, joignez seulement le dossier qui contient vos composants d’interface, pas tout le dépôt.

## Étape 2 : demander des variantes avant de peaufiner

Il coûte moins cher de choisir entre des options approximatives que de perfectionner la première. Demandez deux ou trois orientations côte à côte.

```prompt
Donne-moi trois versions de la moitié supérieure de cette page : une avec une
grande photo et un titre court, une avec l’horaire visible tout de suite, et
une qui commence par une citation d’une ancienne participante. Garde tout le
reste identique pour que je puisse comparer.
```

Regardez chacune du point de vue du visiteur. Laquelle dit à un débutant nerveux, en cinq secondes, ce qu’est l’atelier et comment s’inscrire? Choisissez-en une, et expliquez pourquoi dans la conversation : « Je prends la version 2, parce que les gens ont posé plus de questions sur les dates que sur tout le reste. » Cette phrase vous servira plus tard.

## Étape 3 : peaufiner par petites touches précises

Claude Design vous offre plusieurs façons de modifier une maquette : la conversation pour les changements plus importants, des commentaires épinglés à un seul élément, la modification directe du texte, et des curseurs que Claude génère pour des réglages comme l’espacement. Utilisez le plus petit outil qui fait le travail. Un commentaire sur le bouton de réservation (« fais-le ressortir davantage, mais garde-le calme ») change une seule chose; un message dans la conversation convient mieux aux changements de structure, comme l’ajout d’une section.

Une bonne liste de vérification pour peaufiner n’importe quelle page d’accueil :

| Vérification | Exemple de demande |
|---|---|
| Vrai contenu | « Remplace le texte provisoire par cet horaire et ces prix. » |
| Texte long | « Montre de quoi ont l’air les questions fréquentes si une réponse fait quatre lignes. » |
| Petits écrans | « Vérifie la version mobile : le bouton est-il visible sans défiler? » |
| Accessibilité | « Assure-toi que le contraste du texte et la taille du bouton conviennent aux lecteurs plus âgés. » |
| États manquants | « Montre la page quand l’atelier est complet. » |

Le tutoriel d’Anthropic recommande de demander les états vide, d’erreur et de chargement avant de confier quoi que ce soit aux développeurs, et de vérifier comment la maquette se comporte avec très peu ou énormément de contenu. Notre version « complet » est ce genre de vérification.

> **À essayer :** rédigez un mandat de cinq lignes pour une page dont vous avez vraiment besoin, comme un événement, un produit ou un club. Demandez à Claude Design trois variantes de la section du haut, choisissez-en une et écrivez une phrase qui explique votre choix avant de la peaufiner.

## Étape 4 : partager et faire réviser

Avant de construire, montrez le prototype à quelqu’un qui correspond au public. Partagez-le dans votre organisation au moyen d’un lien, ou exportez-le en PDF ou en fichier HTML autonome si la personne qui le révise ne peut pas se connecter. Recueillez les commentaires sur la maquette elle-même plutôt que dans un fil de courriels à part, pour que les décisions restent à côté du travail. VentureBeat souligne qu’Anthropic reconnaît elle-même que la modification à plusieurs reste limitée dans cet aperçu : prévoyez donc qu’une seule personne fasse les changements.

## Comment faire passer une maquette au code?

Claude Design comprend un transfert vers **Claude Code**, l’agent de programmation d’Anthropic. Dans le menu Export, choisissez l’option de transfert. Selon le tutoriel d’Anthropic, l’outil regroupe les fichiers de la maquette, la conversation et un fichier README qui explique au modèle de programmation comment lire les maquettes. Vous recevez ensuite un prompt contenant un lien vers ce paquet, que vous collez dans Claude Code sur votre ordinateur, ou dans un autre agent de programmation; il existe aussi une option pour l’envoyer à Claude Code sur le Web.

Trois habitudes rendent ce transfert beaucoup plus fluide. D’abord, nommez clairement les éléments pendant la conception (« la ScheduleCard », « le bouton de réservation »), parce que ces noms voyagent avec le paquet. Ensuite, gardez vos décisions dans la conversation, comme la raison du choix de la version 2, puisque l’agent de programmation les lit comme contexte. Enfin, liez votre vraie base de code si vous en avez une; Claude Code construit alors avec les composants que vous utilisez déjà au lieu d’en inventer de nouveaux.

Pour notre page de poterie, la demande dans Claude Code pourrait être aussi simple que : « Construis cette page d’accueil sous forme de page HTML unique, avec le bouton de réservation qui mène à notre formulaire de réservation, et reproduis exactement la mise en page mobile. » Vérifiez le résultat dans un navigateur, sur un téléphone et sur un ordinateur, et traitez-le comme n’importe quel premier jet : vérifiez le texte, les liens et le formulaire avant de publier.

## Sources

- Using Claude Design for prototypes and UX: https://web.archive.org/web/20260422032206/https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux
- Introducing Claude Design by Anthropic Labs: https://www.anthropic.com/news/claude-design-anthropic-labs
- Anthropic just launched Claude Design, an AI tool that turns prompts into prototypes and challenges Figma: https://venturebeat.com/technology/anthropic-just-launched-claude-design-an-ai-tool-that-turns-prompts-into-prototypes-and-challenges-figma