Qu'est-ce que Claude Design ? Guide complet sur la tarification, 7 méthodes de création et exemples de prompts [Dernière mise à jour 2026]

Le 18 juin 2026, Claude Design a reçu une mise à jour majeure.

Les fonctionnalités ont été augmentées et l'interface a changé.

Je l'ai testé en l'utilisant moi-même, donc je vais noter où cliquer sur l'écran dans l'ordre.

Cet article est conçu pour « apprendre en utilisant ensemble ».

Veuillez le lire tout en ouvrant [claude.ai/design](//claude.ai/design).

Puis-je l'utiliser gratuitement ?

Non, ce n'est pas possible.

Claude Design est réservé aux formules payantes.

Vous pouvez l'utiliser si vous avez un abonnement Pro (20 $/mois). Aucun frais supplémentaire n'est requis.

Qu'est-ce que Claude Design ?

C'est un outil d'IA qui vous permet de créer des diapositives, des pages d'atterrissage, des prototypes d'applications, des propositions et bien plus encore en donnant simplement des instructions approximatives en français.

Anthropic l'a publié le 17 avril 2026. Cette mise à jour a considérablement augmenté ses fonctionnalités.

Le résultat est du « HTML interactif ». Ce n'est pas une image statique ; il génère un design cliquable et animé.

Comment lire l'écran

Lorsque vous ouvrez [claude.ai/design](//claude.ai/design), cet écran s'affiche.

Onglets supérieurs

Zone « Créer quelque chose de nouveau »

Choisissez ici le type de chose que vous souhaitez créer. Sept cartes sont alignées.

Sous « Designs », vos créations passées sont listées.

Quand Claude pose des questions de suivi (commun à toutes les cartes)

Après avoir sélectionné une carte et envoyé une instruction, si Claude estime qu'il manque des informations, il peut afficher des questions supplémentaires sur le côté droit de l'écran.

Le contenu des questions change en fonction de l'instruction.

Il y a des éléments obligatoires et optionnels.

Répondez aux éléments et appuyez sur « Continuer » pour lancer la génération.

Comment créer des Slides (supports de présentation)

Créez des supports de séminaire, des diapositives de briefing et des pitch decks à partir d'ici.

Étape 1. Cliquez sur « Slides » sur l'écran d'accueil

Cliquez sur la carte qui dit « Présentations et pitch decks ».

Étape 2. Saisissez le contenu des diapositives que vous souhaitez créer

En cliquant, vous arrivez sur cet écran.

« De quoi parle la présentation ? » s'affiche dans la barre latérale gauche.

Vous pouvez choisir parmi trois méthodes de saisie :

• Importer un document : Créer des diapositives à partir de documents existants (Word, PDF).
• Coller vos notes : Coller des notes ou du texte et les structurer.
• Deck existant : Reconstruire à partir d'un deck de diapositives existant.

Si vous n'attachez rien, saisissez simplement le contenu en français dans le champ de texte ci-dessous et appuyez sur Envoyer.

Exemples d'instructions

1Créez une diapositive d'introduction pour un service de conseil en IA.
2Cible : Entrepreneurs individuels et freelances qui ne sont pas à l'aise avec l'informatique
3Durée : Pour un séminaire de 20 minutes
4Structure : Problèmes actuels → Ce que l'IA peut résoudre → Détails du service → Tarifs → Comment postuler
5Atmosphère : Amicale, sans jargon technique
6Apparence : Simple et lisible, fond blanc

1Créez une diapositive de présentation personnelle.
2Ancien ingénieur logiciel, j'enseigne maintenant l'utilisation de l'IA
3Réalisations : Automatisation des opérations avec Claude Code, construction d'un système pour 300 000 yens/mois
4Cible : Entrepreneurs individuels débutants en IA
5Nombre de diapositives : 5-7, faciles à voir avec beaucoup d'espace blanc

1Créez une diapositive d'introduction à l'utilisation de Claude Code.
2Public : Débutants qui n'ont jamais écrit de code
3Durée : 10 minutes
4Contenu : Qu'est-ce que Claude Code → Étapes d'installation → Première commande → Problèmes courants et solutions
5Ton : Poli, doux et pas intimidant

Options du deck (facultatives)

• Optimiser pour Google Slides : Utilise uniquement les polices Google (pratique pour ouvrir dans Google Slides).
• Ajouter des notes de l'orateur : Ajoute automatiquement des notes de discours à chaque diapositive.

Étape 3. Attendre la génération

Cela prend quelques minutes. Vous pouvez suivre la progression dans le panneau de gauche.

Une fois terminé, cela ressemble à ceci.

Étape 4. Ajuster avec les boutons en haut à droite

Une fois la génération terminée, des boutons apparaissent en haut à droite.

« Ajustements » est le plus utilisé. Entrez simplement quelque chose comme « Agrandir le titre de la première diapositive » comme dans un chat, et il le corrigera.

Points à noter

Décidez d'abord du style visuel des diapositives.

Si vous dites « changer toutes les couleurs » en cours de route, la cohérence a tendance à se rompre.

Il est plus rapide de décider du cadre général, puis de corriger les détails.

Comment créer des prototypes de produit (prototypes animés)

Vous pouvez créer des écrans d'application, des flux de réservation de services et des maquettes de services web.

Une fois terminé, il sera dans un état où vous pouvez réellement cliquer et l'utiliser.

Étape 1. Cliquez sur « Prototype produit » sur l'écran d'accueil

Cliquez sur la carte qui dit « Maquettes d'application interactives ».

Étape 2. Saisissez le contenu de l'écran d'application que vous souhaitez créer

En cliquant, vous arrivez sur cet écran.

Comme pour Slides, saisissez le contenu en français dans le champ de texte et appuyez sur Envoyer.

Les prototypes gagnent en précision plus vous écrivez de détails. Inclure les éléments suivants améliorera la qualité :

• Type d'application : Système de réservation, gestion de tâches, écran de paiement, etc.
• Nombre d'écrans : Combien d'écrans.
• Contenu de chaque écran : Ce qui est affiché.
• Flux d'utilisation : Où appuyer pour passer à l'étape suivante.
• Taille de l'appareil : Pour smartphone (390×844px) ou PC.
• Couleur/Style : Thème sombre, palette lumineuse, etc.

Exemples d'instructions

1Créez un prototype pour une application de réservation de salon de beauté.
2Sur un écran de smartphone (390×844px).
34 écrans :
41. Page d'accueil : Nom du salon, liste des menus (Coupe/Coloration/Soin)
52. Sélection du menu : Sélectionner pour continuer
63. Sélection de la date/heure : Calendrier et créneaux horaires
74. Confirmation/Fin : Détails de la réservation et bouton « Réserver »
8Style : Fond blanc, accents roses, design arrondi
9Quand on tape sur le bouton « Réserver », transition vers l'écran « Réservation terminée ! ».

Étape 3. Attendre la génération

Cela prend quelques minutes. Une fois terminé, cela ressemble à ceci.

Il est dans un état où vous pouvez réellement l'utiliser en cliquant. Appuyer sur le bouton « Réserver » déclenche une transition vers l'écran suivant.

Étape 4. Ajuster avec les boutons en haut à droite

Une fois la génération terminée, des boutons apparaissent en haut à droite.

« Ajustements » est le plus utilisé. Entrez simplement quelque chose comme « Mettre le fond en blanc » ou « Agrandir la police » comme dans un chat, et il le corrigera.

Si vous souhaitez ajouter de l'animation

Claude Design n'ajoute pas d'animation par défaut.

Si vous voulez ajouter du mouvement, spécifiez-le explicitement.

1Agrandir le bouton à 1,05x au survol, avec une transition de 200 ms.
2Fondu d'apparition + glissement vers le haut des cartes au chargement de la page, en les affichant dans l'ordre avec un intervalle de 150 ms.

Comment créer des wireframes de produit (design squelettique)

Utilisez ceci quand vous voulez d'abord décider de la « configuration de l'écran ».

Il crée seulement le squelette de la mise en page, pas un design détaillé.

Il est adapté pour confirmer le flux « l'utilisateur procède dans cet ordre ».

Étape 1. Cliquez sur « Wireframe produit » sur l'écran d'accueil

Cliquez sur la carte qui dit « Écrans basse-fidélité et flux ».

### Étape 2. Saisissez la configuration de l'écran que vous souhaitez créer

En cliquant, vous arrivez sur cet écran.

Saisissez simplement le contenu en français dans le champ de texte et appuyez sur Envoyer. Si vous avez un écran de référence, joignez-le avec « Ajouter une capture d'écran » pour améliorer la précision.

Exemples d'instructions

1Créez un wireframe pour un flux de candidature à un service de conseil.
2Étapes : Page d'accueil → Description du service → Tarifs → Formulaire de candidature → Fin
3C'est suffisant tant que je vois quoi placer sur chaque écran. Le design détaillé n'est pas nécessaire.

1Créez un wireframe pour une page d'atterrissage de séminaire.
2Sections : Section héros → Présentation de l'intervenant → Contenu → Tarif de participation → Formulaire d'inscription
3En vue smartphone.

Étape 3. Attendre la génération

Une fois terminé, cela ressemble à ceci.

Le squelette de l'écran s'affiche avec des boîtes grises. Utilisez-le pour confirmer l'emplacement comme « bouton ici » et « image ici ». Les designs détaillés se font avec Prototype produit ou Document.

Étape 4. Ajuster avec les boutons en haut à droite

Une fois la génération terminée, des boutons apparaissent en haut à droite.

En donnant une instruction comme « Ajouter l'affichage des tarifs sur le 3e écran » dans « Ajustements », des corrections supplémentaires seront apportées.

Comment créer des Documents (pages d'atterrissage, propositions, documents)

Créez des pages d'atterrissage, des propositions, des rapports et des CV à partir d'ici.

Parmi les 7 types de cartes, c'est la plus polyvalente.

Étape 1. Cliquez sur « Document » sur l'écran d'accueil

Cliquez sur la carte qui dit « CV, PDF, etc. ».

### Étape 2. Saisissez le contenu que vous souhaitez créer

En cliquant, vous arrivez sur cet écran.

Une fonctionnalité unique à la carte Document est « En parler ».

Si vous saisissez vos pensées comme si vous parliez pour les organiser, il lira la structure telle quelle.

Si vous avez un PDF ou des documents, vous pouvez les télécharger avec « Importer un PDF ou des notes ».

Exemples d'instructions

1Créez une page d'atterrissage pour un service de conseil en IA destiné aux particuliers.
2Objectif : Augmenter les inscriptions LINE
3Structure :
4- Section héros : Accroche + Bouton d'inscription
5- Vous avez ces problèmes ? (3 éléments)
6- Ce que le service peut résoudre (3 éléments)
7- Tarifs
8- FAQ (3 éléments)
9- Appel à l'action final : Bouton d'inscription LINE
10Cible : Entrepreneurs individuels peu à l'aise avec l'informatique, femmes dans la cinquantaine
11Style : Simple et chaleureux, blanc + accents corail

1Créez une proposition pour un service de conseil destiné aux entreprises.
2Structure : Problèmes actuels → Contenu de la proposition → Effets attendus → Tarifs → Étapes de mise en œuvre → À propos de la prochaine réunion
3Style : Simple et digne de confiance, marine x blanc

1Créez un support de présentation personnelle (portfolio) en tant que freelance.
2Contenu à inclure : Profil, compétences, réalisations, tarifs, coordonnées
3Style : Monochrome + 1 couleur d'accent, moderne et épuré

Étape 3. Attendre la génération

Cela prend quelques minutes. Une fois terminé, cela ressemble à ceci.

Vous pouvez vérifier le reste en faisant défiler. Pour une page d'atterrissage, tout, des tarifs et FAQ au pied de page, sera généré.

Étape 4. Ajuster avec les boutons en haut à droite

Une fois la génération terminée, des boutons apparaissent en haut à droite.

Il suffit de donner des instructions sur le libellé ou les couleurs de la page d'atterrissage dans « Ajustements » pour qu'il les corrige sur le champ.

Comment créer des animations

Vous pouvez créer des bannières animées et des animations graphiques.

Étape 1. Cliquez sur « Animation » sur l'écran d'accueil

Cliquez sur la carte qui dit « Animations graphiques et boucles ».

Étape 2. Saisissez le contenu de l'animation que vous souhaitez créer

En cliquant, vous arrivez sur cet écran.

Si vous avez un storyboard ou des images, vous pouvez les télécharger avec « Déposer un storyboard ou des images ».

Si vous avez un script (texte), vous pouvez également le coller avec « Coller un script ».

Exemples d'instructions

1Créez une bannière animée pour la présentation d'un service.
2Contenu : Le texte « IA x Systématisation » apparaît en fondu → Le nom du service apparaît par le bas → Le bouton d'appel à l'action clignote
3Arrière-plan : Sombre, lignes d'accent corail
4Taille : 1200×630px
5Lecture en boucle

1Créez un compteur de nombre animé.
2Avec le texte « 3 000 personnes inscrites », comptez de 0 à 3 000 en 2 secondes.
3Démarrage à l'affichage de la page.

Une fois terminé, cela ressemble à ceci.

Étape 3. Ajuster avec les boutons en haut à droite

Une fois la génération terminée, des boutons apparaissent en haut à droite.

Contrairement aux autres cartes, il n'y a pas de bouton « Modifier ». Comme les animations fonctionnent sur du code (CSS/JavaScript), vous ne pouvez pas modifier les éléments directement en cliquant. Les corrections ne sont possibles qu'en donnant des instructions à l'IA dans « Ajustements ».

Si vous exportez une animation en PDF, le mouvement sera perdu. Si vous souhaitez conserver le mouvement, choisissez le format HTML.

Comment utiliser la Toile vierge (créer à partir de zéro)

Pas de modèles, pas de questions. Utilisez ceci quand vous voulez partir d'une toile complètement vierge.

Choisissez cette option pour « des choses qui ne rentrent dans aucune carte » ou « quand vous voulez tout décider vous-même ».

Entrez simplement ce que vous voulez créer dans le champ de saisie de texte et appuyez sur Envoyer.

Comment utiliser Commencer par un fichier (créer à partir d'un fichier)

Cette carte convertit des fichiers existants en designs. En donnant simplement à Claude un fichier Word, PDF ou PPTX, il créera un design pour vous.

Étape 1. Cliquez sur « Commencer par un fichier »

Cliquez sur la carte qui dit « Transformer en design ». Une boîte de dialogue de sélection de fichier s'ouvre.

Les formats de fichier pris en charge sont DOCX, PPTX, XLSX, PDF, JPG et PNG.

Étape 2. Téléchargez le fichier et saisissez les instructions

Lorsque vous sélectionnez un fichier, il est téléchargé et un grand champ de saisie de texte apparaît. Saisissez ce que vous voulez créer en français et appuyez sur le bouton « Démarrer le projet ».

Les autres cartes ont un bouton « Envoyer », mais cette carte a « Démarrer le projet ».

Exemples d'instructions

1Convertissez la proposition Word jointe en diapositives de proposition visuelles.
2Faites une configuration de 5 à 7 diapositives avec un design simple et facile à lire.

1Convertissez les idées de cette note manuscrite en une proposition de page d'atterrissage.
2Cible : Entrepreneurs individuels débutants en IA
3Objectif : Candidature de conseil

Une fois terminé, cela ressemble à ceci.

Étape 3. Ajuster avec les boutons en haut à droite

Après la génération, vous pouvez ajuster avec la barre d'outils en haut à droite. En appuyant sur le bouton « + Ajustements », un champ de saisie de chat s'ouvre où vous pouvez donner des instructions supplémentaires pour des modifications fines.

Comment utiliser les Systèmes de design [Nouveau dans cette mise à jour]

Il y a un bouton « Configurer un système de design » sous la liste des cartes sur l'écran d'accueil.

En enregistrant une fois les couleurs de marque, les polices et les logos, ils seront automatiquement répercutés dans les designs suivants.

Cela résout le problème des « couleurs incohérentes à chaque fois ».

En appuyant sur le bouton, la fenêtre modale « Ajouter un système de design » s'affiche.

Il y a deux méthodes d'enregistrement.

① Créer ici (pour les débutants)

Vous pouvez le configurer simplement en saisissant les informations nécessaires dans le formulaire.

Éléments que vous pouvez enregistrer :

• Nom de l'entreprise / Description de la marque (saisie de texte)
• URL du dépôt GitHub
• Fichier Figma (télécharger un fichier .fig)
• Polices, logo et fichiers d'actifs

Vous pouvez l'utiliser sans code. Si vous essayez pour la première fois, c'est recommandé.

② Créer avec Claude Code (MEILLEURE FIDÉLITÉ)

C'est une fonctionnalité permettant à Claude Code d'apprendre les informations de la marque.

Une fois enregistré, vous n'aurez plus à spécifier « avec cette couleur et cette police » à chaque fois que vous créez une page d'atterrissage, un site web ou une diapositive. Des designs unifiés en tant que marque sortiront automatiquement.

Principalement pour les équipes de développement en entreprise. C'est une fonctionnalité pour lire automatiquement les informations de marque à partir du code de service créé avec des règles React. Il n'y a presque pas de cas d'usage pour un usage individuel.

Comment l'utiliser

Vous pouvez le créer à partir de zéro avec les étapes suivantes.

Étape 1. Vérifier Node.js

Étape 2. Créer dossiers et fichiers

1Dossier quelconque/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Réécrivez les couleurs et polices avec celles de votre marque)

1export const colors = {
2  primary: "#DA7756",      // Couleur principale
3  background: "#F5F4F0",   // Couleur de fond
4  text: "#1C1917",         // Texte du corps
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Étape 3. Exécuter /design-sync

Exécutez la commande suivante dans Claude Code :

1/design-sync

Une fois terminé, la marque sera enregistrée dans l'onglet « Systèmes de design ». Cette couleur et cette police seront automatiquement utilisées dans les générations de design ultérieures.

Méthodes d'exportation

Les designs terminés peuvent être exportés dans plusieurs formats.

S'il y a de l'animation, le mouvement sera perdu si exporté en PDF.

Si vous voulez conserver le mouvement, choisissez le format HTML.

Conseils pour les ajustements (panneau Ajustements)

Après la génération, en appuyant sur le bouton « Ajustements », vous pouvez donner des instructions de réglage fin à l'IA.

Exemples d'instructions efficaces :

• « Agrandir le texte de l'en-tête »
• « Mettre le bouton plus en évidence »
• « Simplifier l'ensemble »
• « Vérifier la mise en page en vue smartphone »

Plutôt que d'essayer de tout changer d'un coup, donner les instructions une par une facilite l'obtention du résultat souhaité.

Ce qui a changé dans cette mise à jour

Résumé — Choisissez une carte en fonction de ce que vous voulez créer

Claude Design est disponible à partir des formules Pro (20 $/mois) et supérieures. Il ne peut pas être utilisé gratuitement.

Choisissez une carte en fonction de ce que vous voulez créer

La précision augmente lorsque l'instruction inclut quatre points : « Objectif, Structure, Cible et Style ».

Ne visez pas la perfection dès le début ; il est plus rapide de créer un cadre général, puis de corriger les choses une par une.

Si vous avez aimé cet article, je serais heureux que vous appuyiez sur « J'aime ».

▼ Vous pouvez recevoir des conseils sur l'utilisation de Claude, accessibles même si vous n'êtes pas à l'aise avec l'informatique, via LINE.

En vous inscrivant, vous recevrez un guide d'installation de Claude Code en cadeau.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso