Comment utiliser Claude Artifacts : le tutoriel pas à pas
Un parcours complet du tutoriel Claude Artifacts en 12 minutes de Kevin Stratvert : construisez un dashboard interactif à partir d'un CSV, affinez-le par prompts dans le chat, corrigez les détails avec l'outil d'annotation, puis ajoutez l'IA intégrée, les données sauvegardées, les connecteurs et Live Artifacts. 14 étapes, chacune avec une vraie capture d'écran.
L'essentiel en bref
- Les Artifacts sont des mini-applications interactives — dashboards, outils, jeux — que Claude construit à partir d'une description en langage naturel. Un compte Claude gratuit suffit pour commencer.
- Chargez un CSV et en environ une minute Claude livre un dashboard fonctionnel dont les graphiques affichent les valeurs au survol ; chaque modification ensuite n'est qu'un nouveau prompt dans le chat, sans code.
- L'outil d'annotation corrige un élément précis ; le partage est une URL en un clic « accessible à toute personne ayant le lien », et l'épinglage garde vos Artifacts favoris en haut de la bibliothèque.
- Les Artifacts peuvent aussi appeler Claude lui-même, mémoriser des données entre les sessions et joindre Slack ou Trello via des connecteurs MCP — et les Live Artifacts de l'application de bureau se mettent à jour tout seuls.
How to Use Claude Artifacts (Full Tutorial)
Chaîne: Kevin Stratvert · 12:42
À propos des captures d'écran
Toutes les captures d'écran de ce guide proviennent de la vidéo ci-dessus et restent la propriété de Kevin Stratvert. Chaque étape renvoie au moment exact où elle se produit dans la vidéo. Le texte pas à pas, les légendes et la FAQ sont de notre plume.
D'un CSV au dashboard (étapes 1–10)
- 1
Ouvrir la bibliothèque d'Artifacts
Connectez-vous sur claude.ai — un compte gratuit suffit — et cliquez sur Artifacts dans la barre latérale gauche. Les onglets All et Yours listent tout ce que vous avez créé, Shared with you rassemble les Artifacts que d'autres vous ont envoyés, et le champ de recherche filtre toute la bibliothèque.
Le hub Artifacts : onglets All, Yours et Shared with you, avec New artifact dans le coin.Voir à partir de 0:50 - 2
Cliquer sur New artifact
Cliquez sur le bouton New artifact en haut à droite. Claude ouvre une nouvelle tâche et, au lieu de construire à l'aveugle, vous interroge d'abord. Il appelle l'Artifact « web page » — ce n'est que le socle sur lequel il construit, quoi que vous fassiez au final.
Un clic lance une tâche guidée — les questions avant le code.Voir à partir de 1:02 - 3
Répondre aux questions de lancement
Pour ce dashboard, nous choisissons Dashboard, le style Bold & colorful et comme focus Sales & revenue trends. Votre questionnaire peut différer légèrement — aucun problème. Répondez à ce qui est pertinent, ou sautez les questions et décrivez tout vous-même en un message.
Type, style, focus : ces réponses orientent la première version de Claude.Voir à partir de 1:40 - 4
Joindre votre CSV
Quand Claude demande d'où viendront les données, répondez que vous allez importer les vôtres. Cliquez sur l'icône plus dans la zone de message, choisissez Add files or photos (Ctrl U / Cmd U fonctionne aussi) et sélectionnez votre CSV. Claude examine les colonnes et décide comment les visualiser avant de construire.
Icône plus → Add files or photos → choisissez le CSV ; Claude l'étudie avant d'écrire la moindre interface.Voir à partir de 2:19 - 5
Publier la première version
Une à deux minutes plus tard, Claude publie l'Artifact. Le dashboard apparaît à droite — indicateurs clés en haut, graphiques en dessous — et le chat résume ce qu'il a construit : 1,207 commandes sur 5 saveurs et 4 régions, directement depuis le CSV. Cliquez sur l'icône d'agrandissement pour mieux voir.
« The Bake Sheet » — cartes KPI et graphiques générés à partir d'un seul CSV importé.Voir à partir de 2:42 - 6
Survolez les graphiques pour les chiffres exacts
C'est une vraie application, pas une image. Glissez le curseur le long de la courbe de tendance et un tooltip liste le chiffre d'affaires exact de chaque saveur pour le mois ; les diagrammes en barres et les tableaux réagissent pareil. Personne n'a écrit de code de graphiques — Claude a tout construit à partir du fichier.
Un tooltip de juin détaille le CA par saveur — interactif dès la première publication.Voir à partir de 2:58 - 7
Affiner en discutant, pas en codant
Quelque chose ne va pas ? Demandez. « Add a dark mode toggle to the dashboard » suffit — Claude republie une version mise à jour avec un interrupteur soleil/lune dans l'en-tête qui bascule tout le thème et retient votre choix. Continuez à prompter dans le même fil pour les refontes plus larges.
Un prompt plus tard : un interrupteur en forme de lune dans l'en-tête et un thème sombre complet.Voir à partir de 4:02 - 8
Corriger un détail avec l'outil d'annotation
Pour modifier un seul élément, ouvrez l'outil d'annotation en haut à droite de l'Artifact et surlignez l'endroit exact — ici le titre « Kevin's Cookie Company ». Un champ de commentaire s'ouvre : indiquez à Claude quoi changer, puis choisissez Send to Claude pour l'appliquer immédiatement, ou Add comment pour laisser la note sans rien toucher.
Surlignez, décrivez la correction, puis appliquez-la — ou laissez-la en commentaire de relecture.Voir à partir de 4:50 - 9
Partager avec quiconque possède le lien
Cliquez sur Share, réglez General access sur Anyone with the link et choisissez la version à publier — Claude garde chaque révision, vous pouvez donc volontairement partager un instantané plus ancien. Copy link fournit une URL où le dashboard tourne et reste interactif dans n'importe quel navigateur.
General access → Anyone with the link ; le sélecteur de version décide de ce que voient les visiteurs.Voir à partir de 5:10 - 10
Épingler, et garder le chat pour les modifications
De retour dans la bibliothèque, survolez l'Artifact, ouvrez son menu à trois points et choisissez Pin — les éléments épinglés se regroupent dans une section Pinned pour un accès en un clic. Pour le modifier plus tard, rouvrez le chat d'origine de l'Artifact depuis Chat and tasks : ce fil reste l'atelier d'édition de l'Artifact.
Le menu à trois points épingle la carte ; le chat d'origine reste ouvert pour les futures modifications.Voir à partir de 5:42
Passez au niveau supérieur : IA intégrée, données sauvegardées, connecteurs, Live Artifacts (étapes 11–14)
- 11
Construire un outil qui utilise Claude lui-même
Les Artifacts peuvent appeler Claude directement. Créez un nouvel Artifact, choisissez Something else et décrivez l'outil — ici : les employés saisissent des ingrédients de cookies et Claude génère cinq idées de noms. Aucune clé API, aucun backend ; au premier usage, l'Artifact demande simplement au visiteur l'autorisation d'accéder à Claude.
Le Batch Namer : tapez les ingrédients, cliquez sur Generate 5 names, recevez des propositions rédigées par l'IA.Voir à partir de 7:02 - 12
Le faire se souvenir des données
Demandez à Claude d'ajouter des favoris et il vérifie d'abord une question de conception : les éléments enregistrés doivent-ils rester privés dans ce navigateur ou être partagés avec tous ceux qui ouvrent l'Artifact ? Ici nous choisissons partagé. Les idées enregistrées persistent — fermez l'onglet, les noms étoilés seront encore là demain. C'est la base des trackers, listes et outils de projet légers.
Enregistrement privé ou partagé — ensuite chaque suggestion porte une étoile qui survit entre les sessions.Voir à partir de 8:20 - 13
Le connecter à Slack et au-delà
Via des connecteurs MCP (Model Context Protocol), un Artifact peut agir en dehors de Claude. Demandez un bouton de partage vers Slack, approuvez la connexion, choisissez un canal, et chaque idée enregistrée gagne un bouton qui la publie dans l'équipe. Les applications sans connecteur natif restent accessibles via Zapier MCP — des milliers d'actions en plus.
Slack connecté : l'idée enregistrée se publie désormais toute seule dans #new-cookie-ideation.Voir à partir de 9:40 - 14
Le garder à jour avec Live Artifacts
Dans l'application de bureau Claude, les Live Artifacts tirent des données à jour d'applications connectées et de fichiers locaux plutôt qu'un instantané figé. Ce dashboard de ventes se compile tout seul depuis des rapports POS et des feuilles Google Drive ; appuyez sur Reload dans son en-tête et il se redessine avec les derniers chiffres — construisez une fois, ouvrez toujours une vue actuelle.
Le bouton Reload de l'application de bureau re-tire les données connectées à la demande.Voir à partir de 12:04