N-Gage Formation Claude

claude.ai (web)

Artifacts (création + galerie)

Statut : stable Plan minimum : Free Démo : 6-10 min Vérifié le : 2026-05-17

Source officielle : https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them

Artifacts (création + galerie)

TL;DR

Un Artifact est une zone latérale qui s'ouvre à droite de la conversation et qui affiche un contenu structuré (HTML, React, code, markdown, mermaid, SVG) que vous pouvez prévisualiser, éditer, télécharger et partager. C'est l'endroit où Claude passe de « je décris ce que je ferais » à « voici la chose, regarde-la fonctionner à côté du chat ». Limite importante : un Artifact tourne dans une sandbox isolée sans accès réseau, il est donc statique par nature.

Pour qui c'est utile

Dès que vous avez besoin de voir le résultat plutôt que de le lire, l'Artifact change la donne. Quatre profils en tirent un bénéfice immédiat :

  • Dirigeants et cadres qui veulent visualiser une page, un tableau de bord ou un schéma de processus en direct, sans passer par un graphiste ou un outil tiers, pour valider une idée en réunion en quelques minutes.
  • Consultants et formateurs qui produisent des supports pédagogiques, des schémas explicatifs, des prototypes de livrables visuels à montrer en séance ou à coller dans une restitution.
  • Fonctions support (RH, communication, marketing) qui ont besoin de mock-ups, de pages d'annonce internes, de calculatrices de simulation ou de petites pages structurées sans solliciter l'équipe technique.
  • Toute personne qui code peu ou pas mais qui veut un livrable visuel propre tout de suite : une mini-page de présentation, un diagramme de processus, un brouillon de landing page, un calculateur métier.

Comprendre les Artifacts (la mécanique sous le capot)

Un Artifact n'est pas une simple réponse plus longue. C'est un objet à part entière que Claude génère dans un panneau dédié, séparé du flux de conversation. Quatre points clés pour saisir la mécanique :

Une zone latérale, pas une réponse texte. Quand Claude détecte qu'il produit du contenu structuré, autonome et réutilisable (typiquement plus de 15 lignes de code, une page HTML complète, un diagramme), il ouvre un panneau à droite du chat. Le chat reste à gauche pour la discussion, l'Artifact occupe la moitié droite de l'écran. Vous pouvez basculer entre l'aperçu rendu (Preview) et le code source (Code) en un clic.

Plusieurs formats supportés. Un Artifact peut contenir du HTML complet avec CSS et JavaScript, un composant React qui s'affiche en direct, du markdown long format pour un document, un diagramme mermaid pour un schéma, un SVG pour un visuel vectoriel, ou du code dans un langage donné. Claude choisit le format en fonction de la demande, vous pouvez forcer un format en le précisant dans le prompt.

Sandbox isolée, sans réseau sortant. C'est la limite la plus importante à comprendre. L'Artifact tourne dans un environnement bac à sable : il n'a aucun accès à internet, à une base de données, à une API externe, ni aux fichiers de votre poste. Toutes les données affichées doivent être contenues dans le code de l'Artifact lui-même. Conséquence : un Artifact est statique par construction, parfait pour les prototypes et les démos, inadapté pour une application qui doit lire des données vivantes.

Galerie d'artifacts et partage. Tous les Artifacts que vous créez sont consultables dans une galerie accessible depuis la sidebar. Vous pouvez les rouvrir, les rééditer, les télécharger en fichier autonome, ou les partager via un lien public. Cette persistance est précieuse : vous retrouvez un Artifact créé il y a deux mois sans rouvrir la conversation initiale.

Quand les Artifacts brillent, et quand un texte simple suffit

Ils brillent dans ces cas : - Vous voulez voir un rendu visuel (page web, schéma, document mis en forme) - Vous itérez plusieurs fois sur le même objet (modifier la couleur, ajouter un bloc, retoucher un texte) - Vous voulez réutiliser le résultat hors de la conversation (téléchargement, partage) - Le contenu est long ou structuré et serait illisible noyé dans un fil de chat

Un texte simple suffit dans ces cas : - La question est conversationnelle (un avis, une explication, un brainstorming) - La réponse fait moins de 15 lignes et n'a pas vocation à être réutilisée telle quelle - Vous voulez juste discuter d'un sujet sans produire de livrable - L'idée n'est pas encore stabilisée et l'Artifact figerait prématurément un format

Pas à pas détaillé

Déclencher un Artifact via un prompt explicite

  1. Ouvrez une nouvelle conversation sur claude.ai.
  2. Formulez une demande qui produit un livrable visuel ou structuré, par exemple : « Crée-moi une landing page HTML simple pour une formation IA, avec un visuel pro et un formulaire de contact. »
  3. Claude détecte qu'il s'agit d'un contenu autonome et ouvre un panneau Artifact à droite de la conversation. Le rendu HTML s'affiche en direct.
  4. Si Claude ne déclenche pas l'Artifact (réponse en texte brut dans le chat), reformulez en précisant : « Mets le résultat dans un Artifact HTML que je puisse visualiser. »

Itérer sur l'Artifact

  1. Lisez la réponse à gauche, regardez le rendu à droite, basculez entre Preview et Code via les onglets en haut du panneau.
  2. Demandez une modification directement dans le chat : « Change la couleur principale en orange, ajoute une section témoignages et retire le footer. »
  3. Claude met à jour l'Artifact. Une nouvelle version remplace l'ancienne dans le panneau, mais les versions précédentes restent accessibles via les flèches de navigation en bas du panneau.
  4. Itérez autant que nécessaire. Chaque demande de modification crée une nouvelle version horodatée.

Partager et retrouver l'Artifact

  1. Pour télécharger l'Artifact en fichier autonome, cliquez sur l'icône de téléchargement en haut à droite du panneau. Le fichier HTML, le SVG ou le markdown se télécharge tel quel.
  2. Pour partager l'Artifact via un lien public, cliquez sur l'icône de partage. Un lien vous est proposé. Important : ce lien rend l'Artifact public, toute personne avec le lien peut le voir.
  3. Pour retrouver un Artifact créé précédemment, ouvrez la galerie d'artifacts depuis la sidebar gauche. Tous les Artifacts y sont listés avec leur titre et leur date de création.
  4. Cliquez sur un Artifact dans la galerie pour le rouvrir, le rééditer ou relancer une conversation à partir de lui.

Cas d'usage avec exemples concrets

Rappel : jamais d'emoji dans le rendu, privilégier les SVG line-icons inline pour les pictogrammes.

Dashboard simple sur des données collées. Vous collez dans le chat un petit tableau de chiffres (CA mensuel, suivi d'indicateurs RH) et vous demandez : « Mets-moi ces chiffres dans un tableau de bord HTML avec un graphique en barres et une carte de KPI par mois. » Claude génère un Artifact HTML autonome avec les données figées dans le code. Idéal pour une revue mensuelle en interne.

Mini calculatrice métier. « Crée-moi une calculatrice de marge HT pour une PME, avec champs prix d'achat, prix de vente, quantité, et affichage de la marge en euros et en pourcentage. » L'Artifact tourne immédiatement, vous pouvez tester les valeurs, l'envoyer à un commercial qui l'utilisera tel quel dans son navigateur.

Diagramme mermaid d'un process. « Représente en diagramme mermaid le processus de validation d'une note de frais dans une PME, du dépôt par le collaborateur au remboursement bancaire. » Claude génère un Artifact mermaid que vous pouvez ajuster (« ajoute une étape de relance après 5 jours », « déplace la branche de refus à droite ») et exporter pour le coller dans une procédure interne.

Prototype de landing page. « Construis une landing page HTML pour une nouvelle offre de formation Excel, ton sobre B2B, structure hero, bénéfices, témoignages, formulaire de contact, sans emoji, SVG line-icons pour les pictogrammes. » Vous obtenez en quelques minutes un prototype téléchargeable à montrer à votre équipe avant d'investir dans un vrai design.

À retenir

  • Un Artifact est un panneau latéral dédié, pas une réponse texte plus longue. Préférez-le dès que vous produisez un livrable visuel ou structuré.
  • Le déclenchement est automatique selon des heuristiques de taille et d'autonomie du contenu, mais vous pouvez le forcer en le demandant explicitement dans le prompt.
  • Sandbox isolée sans accès réseau : un Artifact est statique. Pour des données vivantes, il faut sortir de la sandbox (export, intégration externe, vraie application).
  • Les versions sont conservées au fil des itérations. Naviguez entre elles via les flèches en bas du panneau pour comparer ou revenir en arrière.
  • La galerie d'artifacts est votre bibliothèque de livrables visuels : indexez vos prototypes, retrouvez-les facilement, partagez-les sans rouvrir la conversation initiale.
  • Pas d'emoji dans le rendu, privilégiez les SVG line-icons sobres pour les pictogrammes.

Pièges à éviter

  • Artifact = statique : pas de connexion à une base de données, pas d'appel API, pas de lecture de fichier local. Si vous demandez « affiche les ventes du jour depuis notre CRM », l'Artifact ne pourra rien faire. Solution : coller les données dans le prompt ou exporter l'Artifact et le brancher à votre stack en dehors de Claude.
  • Perte si l'onglet est fermé sans sauvegarde : tant que vous n'avez pas téléchargé l'Artifact ou pris le lien de partage, fermer l'onglet du navigateur ne le perd pas (il reste dans la galerie), mais une version non sauvegardée d'une édition en cours peut être perdue. Sauvegardez les versions importantes.
  • Lien de partage public : un Artifact partagé est accessible à toute personne ayant le lien. Ne partagez jamais un Artifact contenant des données sensibles (chiffres clients, coordonnées, secrets). Pour un usage interne, privilégiez le téléchargement et l'envoi par mail interne.
  • Déclenchement parfois indésirable : Claude peut ouvrir un Artifact alors que vous vouliez juste une réponse texte. Dites-le dans le prompt : « Réponds directement dans le chat, sans Artifact. »
  • Itérations trop rapides : enchaîner 10 modifications en 2 minutes rend la liste des versions difficile à parcourir. Demandez des changements groupés (« change la couleur ET ajoute le formulaire ») plutôt qu'une modification par message.
  • Limite de stockage : en Pro et au-delà, le persistent storage est limité à 20 Mo par Artifact. Pour un contenu lourd (gros JSON de données, beaucoup d'images encodées), pensez à externaliser.

Exercice 1 minute

Ouvrez un nouveau chat sur claude.ai et demandez : « Crée-moi un diagramme mermaid qui représente le processus de relance d'une facture impayée dans une PME, en 5 étapes, avec une branche de gestion du contentieux à partir de 60 jours. » Vérifiez que l'Artifact s'ouvre à droite, que le diagramme s'affiche, puis demandez une modification (« ajoute une étape de relance amiable à 30 jours »). Téléchargez le résultat final. Si tout fonctionne, vous avez compris le cycle complet création-itération-export.

Variantes par plan

  • Free : artifacts disponibles dans tous les formats principaux (HTML, code, markdown, SVG, mermaid). Galerie consultable, téléchargement et partage public possibles.
  • Pro : ajoute le persistent storage (20 Mo par artifact), l'intégration MCP dans les artifacts, et les apps AI-powered (artifacts qui appellent Claude lui-même pour leur logique).
  • Max : équivalent Pro avec marges d'usage plus généreuses.
  • Team : idem Pro, plus la possibilité de partager des artifacts en interne de l'équipe (à vérifier selon la version de l'interface).
  • Enterprise : idem Team, plus l'administration centralisée des apps publiées et les contrôles de partage.

Liens internes