⚡
Formations IA
  • Modules
  • Connecteurs
  • Mes Agents
0%
← Retour aux modules
Module 17 — Les Artefacts
0/3
  • 1 Qu'est-ce qu'un artefact ?
  • 2 Créer ses premiers mini-outils
  • 3 Partager et itérer
  • ? Quiz du module
Module 17 > Leçon 1 sur 3

Qu'est-ce qu'un artefact ?

⏱️ ~5 min de lecture 🧰 Outil Chat

Vous avez l'habitude de discuter avec Claude dans le chat. Un artefact, c'est autre chose : c'est quand Claude ne se contente plus de vous répondre, mais vous construit quelque chose.

Partie 1

La définition simple

Un contenu autonome qui s'ouvre dans un panneau séparé.

Un artefact est un contenu créé par Claude qui s'ouvre dans un panneau dédié à droite de votre conversation, séparé du fil de chat. Contrairement à une réponse classique qui défile dans la discussion, un artefact est autonome : il peut être prévisualisé, modifié, copié, partagé ou même publié sur Internet.

Claude.ai — Interface avec artefact ouvert
💬 Conversation
"Crée-moi un calculateur de TVA en HTML"
Voici votre calculateur de TVA. Vous pouvez saisir un montant HT et choisir le taux...
✦ Artefact — Calculateur TVA
<html>
  <input type="number"
    placeholder="Montant HT">
  <select>
    <option>TVA 20%</option>
    <option>TVA 10%</option>
  </select>
  <button>Calculer</button>
</html>
🏗️
L'analogie du chantier
Imaginez que vous demandez à un artisan de vous décrire comment construire une étagère. Il vous explique les étapes dans la conversation — c'est une réponse classique. Maintenant imaginez qu'il sort ses outils et vous fabrique directement l'étagère à côté — c'est un artefact. Le résultat est concret, utilisable, et vous pouvez même lui demander de l'ajuster.
Partie 2

Quand Claude crée-t-il un artefact ?

Les trois conditions qui déclenchent automatiquement la création d'un artefact.

Claude décide de lui-même de créer un artefact quand les trois conditions suivantes sont réunies :

  • →
    Le contenu est significatif et autonome — généralement plus de 15 lignes, il peut se tenir seul sans le contexte de la conversation.
  • →
    C'est quelque chose que vous voudrez réutiliser — un outil, un document, un code que vous allez copier, modifier ou partager.
  • →
    Le contenu est complexe ou structuré — une page web, un programme, un document formaté avec des titres et des sections.
💡
Et si Claude ne crée pas d'artefact automatiquement ?
Vous pouvez le lui demander explicitement en précisant que vous voulez un résultat autonome et réutilisable. Par exemple : "Crée-moi un artefact HTML avec..." ou "Génère un fichier autonome que je puisse réutiliser pour..."
Partie 3

Les types d'artefacts

Ce que Claude peut créer comme artefact.

Type Ce que c'est Exemple concret
📄 Document Un texte structuré avec titres, listes, formatage Un rapport, un compte-rendu, une fiche mémo
💻 Code Un extrait de code dans n'importe quel langage de programmation Un script Python, une fonction JavaScript
🌐 Page HTML Une page web complète avec mise en page et interaction Un calculateur, un formulaire, une mini-app
🎨 Image SVG Un graphique vectoriel — une image créée avec du code Un logo, un diagramme, une icône
⚛️ Composant React Une application interactive avec boutons, états, logique Un tableau de bord, un quiz, une app de suivi
📊 Diagramme Une représentation visuelle d'un processus ou d'une structure Un organigramme, un schéma de workflow
📖
SVG, HTML, React — c'est quoi ces termes ?
HTML (HyperText Markup Language) : le langage de base de toutes les pages web. Tout ce que vous voyez sur un site Internet est fait en HTML.

SVG (Scalable Vector Graphics) : un format d'image créé avec du code, qui ne pixelise jamais quelle que soit sa taille. Parfait pour les logos et les icônes.

React : un outil très populaire pour créer des applications web interactives. Permet de créer des interfaces avec des boutons, des formulaires, des animations.
Partie 4

Artefact vs Réponse normale

Comprendre la différence fondamentale.

Critère Réponse normale Artefact
Où ça apparaît Dans le fil de conversation, en bas Panneau séparé à droite du chat
Objectif Informer, expliquer, répondre Créer, construire, produire
Interactif ? Non, c'est du texte statique Oui, prévisualisation en temps réel
Réutilisable ? À copier-coller manuellement Directement exportable, partageable
✅
Activer les artefacts dans Claude
Si vous ne voyez pas le panneau artefact s'ouvrir, vérifiez que la fonctionnalité est activée : Paramètres → Connecteurs → section "Capacités" → activer "Artefacts".
Module 17 > Leçon 2 sur 3

Créer ses premiers mini-outils

⏱️ ~7 min de lecture 🛠️ Pratique

La vraie puissance des artefacts, c'est de créer en quelques secondes des mini-outils fonctionnels que vous utiliseriez normalement avec un logiciel ou un développeur. Voici comment faire.

Partie 1

Deux façons de créer un artefact

Depuis le chat, ou directement depuis la section Artefacts.

💬 Méthode 1 — Depuis le chat

C'est la méthode la plus courante. Vous discutez avec Claude dans une conversation et vous lui demandez de créer quelque chose. Il génère l'artefact automatiquement dans le panneau de droite.

🗂️ Méthode 2 — Depuis la section "Artefacts"

Dans la barre latérale gauche de Claude, cliquez sur "Artefacts". Vous arrivez sur une interface dédiée avec deux onglets : "Inspiration" (artefacts publics créés par d'autres) et "Vos artefacts" (vos créations). Cliquez sur le bouton "Nouvel artefact" en haut à droite pour créer un artefact directement depuis cet espace, sans passer par une conversation.

💡
Quand utiliser quelle méthode ?
Utilisez le chat quand vous voulez d'abord discuter, affiner votre idée, ou quand vous partez d'un contexte existant (un document, une conversation en cours).

Utilisez "Nouvel artefact" depuis la section Artefacts quand vous avez une idée précise et que vous voulez aller directement à la création, ou pour retrouver et modifier vos artefacts précédents.

Dans les deux cas, la règle est la même : il n'y a aucune commande spéciale à taper. Il suffit de décrire ce que vous voulez construire. Plus votre description est précise, plus le résultat sera pertinent. Voici la structure qui fonctionne le mieux :

✍️ Structure d'une bonne demande

"Crée [le type d'outil] qui permet de [l'action principale], avec [les caractéristiques importantes], pour [l'usage / le public visé]."

💬 Exemple — Demande vague À éviter
"Fais-moi un calculateur"
💬 Exemple — Demande précise Recommandé
"Crée un calculateur de TVA en HTML avec un champ pour saisir un montant HT, un menu pour choisir le taux (20%, 10%, 5,5%), et qui affiche le montant TTC et le montant de la TVA. Design simple et propre, fond blanc."
Partie 2

Des mini-outils à créer maintenant

8 exemples concrets avec les prompts pour les générer.

🧮
Calculateur de TVA
Saisir un montant HT, choisir un taux, obtenir le TTC instantanément.
"Crée un calculateur de TVA en HTML avec les taux 20%, 10% et 5,5%"
📅
Compteur de jours
Calculer le nombre de jours entre deux dates (délai de livraison, deadline projet).
"Crée un outil HTML pour calculer le nombre de jours ouvrés entre deux dates"
📊
Générateur de graphique
Entrer des données et obtenir un graphique visuel directement dans le navigateur.
"Crée un outil HTML pour générer un graphique en barres à partir de chiffres saisis"
🎯
Quiz interactif
Un quiz à choix multiples avec score final et corrections automatiques.
"Crée un quiz HTML de 5 questions sur [sujet] avec correction automatique et score"
✅
Checklist interactive
Une liste de contrôle avec cases à cocher et barre de progression.
"Crée une checklist HTML pour [process] avec barre de progression et cases à cocher"
🎲
Générateur aléatoire
Tirer au sort un nom dans une liste (pour répartir des tâches, désigner un volontaire).
"Crée un outil HTML pour tirer au sort un nom dans une liste saisie par l'utilisateur"
⏱️
Minuteur Pomodoro
Un timer de travail de 25 minutes avec pause de 5 minutes, pour booster sa concentration.
"Crée un minuteur Pomodoro en HTML avec décompte visuel, alarme sonore et cycle pause"
📝
Générateur de facture
Remplir un formulaire simple et obtenir une facture prête à imprimer.
"Crée un générateur de facture HTML simple avec champs client, prestations et total auto"
📖
Qu'est-ce que le "Pomodoro" ?
La technique Pomodoro est une méthode de gestion du temps inventée dans les années 80 : on travaille 25 minutes sans interruption (un "pomodoro"), puis on fait une pause de 5 minutes. Après 4 cycles, on fait une longue pause. Elle aide à maintenir la concentration et éviter la procrastination.
Partie 3

Modifier et améliorer un artefact

Demander des ajustements dans le chat, Claude met à jour l'artefact en temps réel.

Une fois qu'un artefact est créé, vous pouvez demander des modifications directement dans le chat. Claude met à jour l'artefact en temps réel — vous n'avez pas besoin de tout refaire depuis le début.

1
Regardez le résultat

Testez l'artefact dans son panneau de prévisualisation. Cliquez sur les boutons, remplissez les champs. Est-ce que ça fonctionne comme vous le souhaitez ?

2
Demandez des ajustements précis

Dans le chat, décrivez ce que vous voulez changer. Soyez précis : "Change la couleur du bouton en bleu", "Ajoute un champ pour la remise en pourcentage", "Le total ne s'affiche pas correctement, corrige-le".

3
Claude met à jour l'artefact

L'artefact dans le panneau se met automatiquement à jour. Vous pouvez répéter ce processus autant de fois que nécessaire jusqu'à obtenir exactement ce que vous voulez.

💬 Exemple d'itération

Vous avez créé un calculateur de TVA. Vous constatez qu'il manque quelque chose. Vous tapez dans le chat : "Ajoute un bouton 'Réinitialiser' pour effacer les champs, et affiche aussi le résultat en gras avec une couleur verte." Claude modifie uniquement ces deux points sans toucher au reste.

💡
Le bouton "Try fixing with Claude"
Si votre artefact HTML affiche une erreur (bouton qui ne répond pas, calcul incorrect), Claude propose automatiquement un bouton "Essayer de corriger avec Claude". Cliquez dessus : Claude analyse l'erreur et corrige le code sans que vous ayez à expliquer quoi que ce soit.
Module 17 > Leçon 3 sur 3

Partager, publier et aller plus loin

⏱️ ~5 min de lecture 🚀 Avancé

Un artefact que vous ne partagez que pour vous, c'est déjà très utile. Mais Anthropic a conçu les artefacts pour aller beaucoup plus loin : vous pouvez les publier, les partager et même les intégrer dans d'autres sites.

Partie 1

Ce que vous pouvez faire avec un artefact terminé

Les actions disponibles dans le panneau artefact.

Une fois votre artefact créé, le panneau propose plusieurs actions :

📋 Copier le code
🌐 Publier (lien public)
🔗 Intégrer sur un site
🎨 Personnaliser (remix)
Action Ce que ça fait Cas d'usage
📋 Copier Copie tout le code de l'artefact dans votre presse-papier Pour coller le code dans votre propre projet, votre site, votre développeur
🌐 Publier Génère un lien public accessible par n'importe qui sur Internet Partager un outil avec des collègues, des clients, sur les réseaux sociaux
🔗 Intégrer Génère un code à coller sur un autre site pour afficher l'artefact dedans Mettre un calculateur sur votre site d'entreprise sans développeur
🎨 Personnaliser Créer votre propre version d'un artefact fait par quelqu'un d'autre Adapter un outil trouvé dans la bibliothèque publique à vos besoins
📖
Qu'est-ce qu'un "presse-papier" et "intégrer" (embed) ?
Presse-papier : la mémoire temporaire de votre ordinateur. Quand vous faites Ctrl+C (ou Cmd+C sur Mac), le texte est mis dans le presse-papier. Ctrl+V le colle.

Intégrer (embed) : afficher un contenu externe à l'intérieur d'une page web. Par exemple, quand vous voyez une vidéo YouTube sur un site qui n'est pas YouTube — elle est "intégrée". Un artefact intégré s'affiche de la même façon sur votre site.
Partie 2

Publier un artefact : comment ça marche ?

En quelques clics, votre mini-outil est accessible sur Internet.

1
Cliquez sur "Publier" dans le panneau artefact

Le bouton est visible en haut du panneau une fois votre artefact créé. Disponible sur les plans Free, Pro et Max.

2
Un lien public est généré instantanément

Claude génère une URL unique du type claude.ai/artifacts/votre-artefact. N'importe qui avec ce lien peut voir et utiliser votre artefact — sans avoir besoin d'un compte Claude.

3
Partagez le lien

Envoyez ce lien par email, sur Slack, WhatsApp, LinkedIn... La consommation (le nombre d'utilisations) est décomptée sur votre plan — le partage est gratuit quelle que soit l'audience.

⚠️
Attention : plan Team et Enterprise
Sur les plans Team et Enterprise (plans pour les entreprises), les artefacts ne peuvent pas être publiés publiquement sur Internet. Ils restent en partage interne, uniquement accessible aux membres de l'organisation.
Partie 3

La bibliothèque d'artefacts

S'inspirer et réutiliser des artefacts créés par d'autres.

Dans la barre latérale de Claude, vous trouverez une section "Artefacts". Elle contient une bibliothèque d'artefacts publics créés par d'autres utilisateurs. Vous pouvez :

  • ✓
    Explorer des outils déjà créés et les utiliser directement
  • ✓
    Personnaliser (remix) un artefact existant pour l'adapter à vos besoins spécifiques
  • ✓
    S'inspirer de ce qui est possible pour créer vos propres outils
Partie 4

Bonnes pratiques pour bien utiliser les artefacts

Les réflexes à adopter pour obtenir les meilleurs résultats.

  • →
    Commencez simple, ajoutez ensuite. Créez d'abord un outil basique qui fonctionne, puis demandez des améliorations une par une. Un artefact simple et fonctionnel vaut mieux qu'un artefact complexe et buggé.
  • →
    Testez dans la prévisualisation. Avant de copier ou de partager, testez toujours votre artefact directement dans le panneau pour vérifier que tout fonctionne.
  • →
    Soyez précis sur le design. Si l'apparence est importante, précisez les couleurs, les polices, le style dans votre demande initiale.
  • →
    Ne partagez pas de données sensibles. Un artefact publié est accessible à tout le monde. Évitez d'y inclure des informations confidentielles (coordonnées clients, données internes).
  • →
    Utilisez le bouton de correction. Si quelque chose ne fonctionne pas, cliquez sur "Essayer de corriger avec Claude" avant de tout réécrire — c'est souvent plus rapide.
🧰

Vous êtes prêt(e) à créer vos propres outils !

Les artefacts transforment Claude en véritable atelier de création. Sans aucune connaissance technique, vous pouvez maintenant créer des calculateurs, des formulaires, des quiz, des tableaux de bord — et les partager en un clic. Testez dès maintenant en demandant à Claude de créer le mini-outil qui vous manque au quotidien.

Formation Claude © 2025. Tous droits réservés.