Code et Artéfacts
À l'issue de cette leçon, le stagiaire comprend ce qu'est un artefact, sait quand Claude en génère un, et sait en demander explicitement.
Définition
Un artefact est un fichier généré par Claude que l'interface affiche dans un panneau dédié, séparé de la conversation. Concrètement : si vous demandez une page HTML, Claude n'écrit pas le code dans le fil de discussion mais ouvre un panneau à droite qui rend la page directement visible.
Le bénéfice : le résultat est immédiatement utilisable. Vous pouvez le copier, le télécharger, le publier en un clic, et continuer à itérer sans que la conversation soit polluée par des blocs de code de cinq cents lignes.
Les types d'artefacts
Claude reconnaît plusieurs formats d'artefacts :
HTML : page web autonome, rendue dans le panneau. Idéal pour les démos, les landing pages, les outils internes.
React : composant React fonctionnel, rendu interactif. Pour les widgets et les mini-applications.
SVG : graphique vectoriel. Pour les schémas, les diagrammes, les illustrations.
Mermaid : diagrammes (flowcharts, séquences) générés à partir de syntaxe textuelle.
Markdown : documents longs structurés, avec rendu typographique.
Code : scripts dans n'importe quel langage (Python, JavaScript, SQL…), rendus avec coloration syntaxique mais non exécutés dans le panneau.
Comment Claude décide
Claude crée un artefact automatiquement quand votre demande implique un livrable de plus de vingt lignes ou un contenu destiné à être réutilisé hors de la conversation. Pour un extrait de code court, il reste dans le fil. Pour une page complète, il bascule en artefact.
Si Claude ne crée pas d'artefact alors que vous le souhaitez, demandez-le explicitement : « Mets-le dans un artefact. » Si à l'inverse il en crée un dont vous ne voulez pas, demandez : « Donne-le-moi inline, sans artefact. »
Générer votre premier artefact
L'objectif est de générer une page HTML simple, l'ouvrir dans le panneau, et la télécharger.
-
Dans une nouvelle conversation, envoyer ce prompt :
Crée une page HTML autonome avec un titre, un sous-titre, et un compteur cliquable (incrémente à chaque clic). Style sobre, palette neutre. -
Observer le panneau d'artefact qui s'ouvre à droite. La page est rendue, le compteur fonctionne. Tester en cliquant.
-
En haut du panneau, repérer les boutons : Copy (copier le code), Download (télécharger en .html), Publish (créer un lien partageable).
-
Demander une variante dans la conversation :
Change la couleur d'accent en bleu marine et ajoute un bouton de remise à zéro.Le panneau se met à jour automatiquement. -
Télécharger la version finale. Le fichier est prêt à être ouvert dans n'importe quel navigateur, sans dépendance.
Générer un mini-outil utile
Demandez à Claude de générer un petit outil HTML qui vous serait réellement utile : une calculatrice spécifique à votre métier, un formulaire de prise de notes, un convertisseur, un timer Pomodoro. Itérez jusqu'à ce qu'il fonctionne. Téléchargez-le.
- docs.claude.com documentation des artefacts
- support.claude.com centre d'aide, comment publier un artefact
Vous savez générer et télécharger un artefact ?