YOAT Lab
06 · Section 1 · Initiation à Claude

Code et Artéfacts

Claude n'écrit pas que du texte. Il produit des objets utilisables :
pages HTML, mini-applications, documents structurés.

6 minutespremier artefacttous plans
§ 01 · Qu'est-ce qu'un artefact

Un livrable autonome et réutilisable

Pas du texte

Objet utilisable

Page HTML, composant interactif, document long, diagramme. Quelque chose qui sort de la conversation et vit par lui-même.

Panneau dédié

À droite de l'écran

Quand Claude détecte qu'il produit un artefact, un panneau latéral droit s'ouvre automatiquement et l'affiche.

Interactif

Pas juste affiché

Si l'artefact contient du JavaScript, il fonctionne directement dans le panneau. Boutons, formulaires, animations.

§ 02 · Quand Claude produit un artefact

Quatre déclencheurs automatiques

Code > 20 lignes

Au-delà de 20 lignes de code, Claude bascule en artefact. Plus lisible qu'un bloc dans le chat.

Contenu structuré long

Document de 1500+ caractères destiné à être copié ailleurs. Rapport, article, lettre type.

Demande explicite

« Crée une page web... », « Génère un composant... ». Claude comprend qu'il faut un artefact.

Itération attendue

Si vous allez modifier le contenu plusieurs fois, l'artefact est plus pratique qu'un long bloc à recopier.

§ 03 · Démo — générer un premier artefact
1

Prompt CCDF

« Crée une page HTML simple avec un titre et un compteur cliquable. »

2

Panneau qui s'ouvre

Claude génère le code. Le panneau s'ouvre à droite avec le rendu live.

3

Tester en direct

Cliquer sur le bouton dans le panneau. Le compteur s'incrémente. C'est interactif.

4

Itérer

« Change la couleur en terracotta. » Le panneau se met à jour sans tout réécrire.

claude.ai ✻ Claude + New chat 💬 Chats ◫ Projects ★ Artifacts EA Éric Alain Claude Sonnet 4.6 Good morning, Éric Alain Crée une page HTML simple avec un titre... + claude.ai ✻ Claude + New chat 💬 Chats ◫ Projects ★ Artifacts EA Éric Alain Claude Sonnet 4.6 Crée une page HTML simple avec un titre et un compteur cliquable. CLAUDE Voici une page HTML autonome avec un titre et un compteur cliquable. → Compteur cliquable Copy Publish Bienvenue Un compteur très simple 0 + Incrémenter claude.ai ✻ Claude + New chat 💬 Chats ◫ Projects ★ Artifacts EA Éric Alain Claude Sonnet 4.6 Crée une page HTML simple avec un titre et un compteur cliquable. CLAUDE Voici une page HTML autonome avec un titre et un compteur cliquable. → Compteur cliquable Copy Publish Bienvenue Un compteur très simple 7 + Incrémenter claude.ai ✻ Claude + New chat 💬 Chats ◫ Projects ★ Artifacts EA Éric Alain Claude Sonnet 4.6 Crée une page HTML simple avec un titre et un compteur cliquable. CLAUDE Voici une page HTML autonome avec un titre et un compteur cliquable. → Compteur cliquable Copy Publish Compteur YOAT Un compteur très simple 12 + Cliquer
§ 04 · Actions disponibles

Trois boutons en haut du panneau

Copy

Copier le code

Le code source de l'artefact dans le presse-papier. Pour le coller dans votre éditeur ou votre CMS.

Download

Télécharger le fichier

Format approprié au type de contenu. .html pour une page web, .md pour du markdown, .py pour du Python.

Publish

Publier en un clic

Génère un lien public partageable. Idéal pour montrer une démo à un client ou un collègue sans installation.

Fin · Leçon 06 acquise

À tout de suite en leçon 07

Vous savez ce qu'est un artefact, quand Claude en produit, comment l'utiliser et le partager. Le pas suivant : générer une vraie landing page.

Exercice — appropriation

Choisissez UNE situation que vous voulez rendre plus simple ce mois-ci : un calculateur (ROI, devis simple, comparatif), un formulaire (collecte de besoins, sondage interne), ou un mini-tableau de bord. Demandez à Claude de le générer. Testez le bouton Publish pour obtenir un lien partageable.

Quiz · Validation des acquis

Quiz · Code et Artéfacts

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8
Question à choix multiple

Qu'est-ce qu'un artefact dans claude.ai ?

Cliquez sur lecture pour démarrer.
§00 · Intro 0:00 / 6:00 Voix activée