Comment transformer un artefact Claude en présentation PowerPoint

Mis à jour: 2026-10-14 · Équipe Dawwerni

Copiez ou téléchargez l’artefact Claude en fichier .html, demandez à Claude de le mettre en forme en slides de 1920x1080 avec les notes dans <aside class="notes">, puis convertissez le fichier en .pptx avec un convertisseur HTML vers PowerPoint qui fonctionne dans le navigateur. Chaque slide devient une image fidèle au pixel, les notes sont conservées ; le texte des slides n’est pas modifiable dans PowerPoint.

Ce que vous obtenez, et ce que vous n’obtenez pas

Claude sait produire une présentation soignée sous forme d’artefact HTML : un seul fichier avec la mise en page, les couleurs, les polices et souvent quelques graphiques. PowerPoint ne peut pas ouvrir ce fichier directement, il faut donc une étape de conversion.

La méthode la plus fidèle consiste à capturer chaque slide en image et à la placer sur une diapositive PowerPoint 16:9. C’est ce que fait notre convertisseur HTML vers PowerPoint gratuit, dans votre navigateur, sans envoyer le fichier. Soyez au clair sur le compromis avant de commencer :

• Conservé : le design exact, les polices, les couleurs, les graphiques et les fonds, une diapositive par slide HTML, et vos notes de présentation en vraies notes PowerPoint.
• Non conservé : le texte modifiable. Chaque diapositive est une image : impossible de corriger une coquille ou un chiffre dans PowerPoint ; vous modifiez le HTML et reconvertissez.
• Compatible avec : PowerPoint, Keynote et Google Slides, car le résultat est un fichier .pptx standard.

Étape 1 : récupérer le HTML depuis Claude

Un artefact HTML peut être copié ou téléchargé depuis la vue de l’artefact. Cherchez l’option de copie ou de téléchargement à côté de l’aperçu ; les libellés changent de temps en temps, mais les deux donnent le même code.

1. Si vous le téléchargez, vous avez déjà un fichier .html. Passez à l’étape 4.
2. Si vous copiez le code, ouvrez un éditeur de texte brut : le Bloc-notes sous Windows, ou TextEdit sur Mac après avoir choisi Format → Convertir au format texte.
3. Collez le code et enregistrez le fichier sous le nom deck.html, en encodage UTF-8 si l’éditeur le demande (important pour les accents et l’arabe).
4. Double-cliquez sur le fichier. Il doit s’ouvrir dans votre navigateur et ressembler à l’aperçu de Claude.

Si l’artefact est un composant React

Parfois, l’artefact est du code React (un composant .jsx) et non une page web classique. Un convertisseur a besoin d’une page qu’il peut ouvrir ; demandez donc à Claude : « Réécris ceci en un seul fichier HTML autonome qui fonctionne quand on l’ouvre dans un navigateur. »

Étape 2 : donner à l’artefact une forme de slides

Un convertisseur doit savoir où finit une slide et où commence la suivante. Notre convertisseur détecte les présentations reveal.js, les éléments avec la classe slide, les sections au format 16:9 (1920x1080 ou 1280x720) et les sauts de page CSS. Une longue page sans structure de slides est découpée en pages, ce qui donne rarement une bonne présentation.

Le plus simple est de demander la bonne structure à Claude. Collez ce prompt dans la même conversation (en anglais ou traduit, les deux fonctionnent) :

Rewrite this as a slide deck in one self-contained HTML file:
- each slide is a <section class="slide"> of exactly 1920 x 1080 px (16:9)
- one idea per slide, large text, no slide that needs scrolling
- use px sizes inside slides: no vw, vh or % font sizes
- no entrance animations, transitions or scroll effects
- charts drawn without animation
- put my speaker notes for each slide in an <aside class="notes">
  inside that slide, hidden on screen
- keep all CSS in the file; use Google Fonts or system fonts only

• Les tailles fixes en pixels comptent : les unités vw et vh varient avec la fenêtre, donc une slide correcte dans la conversation peut déborder au moment de la capture.
• Les animations font capturer un état à moitié terminé. Le convertisseur fige les animations CSS dans leur état final, mais il est plus sûr de ne pas en demander.
• Une idée par slide garde un texte assez grand pour être lu au vidéoprojecteur. Voir aussi des slides HTML en PPTX sans perdre le design.

Étape 3 : ajouter des notes que Claude peut rédiger pour vous

Les notes de présentation survivent à la conversion lorsqu’elles se trouvent dans chaque slide, dans un élément aside avec la classe notes, la même convention que reveal.js. Elles deviennent de vraies notes PowerPoint modifiables sous chaque diapositive. Voici une présentation minimale de deux slides qui respecte toutes les règles ci-dessus :

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Q3 review</title>
<style>
  body { margin: 0; background: #e5e7eb; }
  .slide {
    width: 1920px; height: 1080px;
    box-sizing: border-box; padding: 96px 120px;
    position: relative; overflow: hidden;
    background: #ffffff; color: #111827;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  }
  .slide h1 { font-size: 96px; margin: 0 0 40px; }
  .slide h2 { font-size: 72px; margin: 0 0 32px; }
  .slide p, .slide li { font-size: 40px; line-height: 1.4; }
  .slide .notes { display: none; }   /* notes are not shown on the slide */
  @media print {
    @page { size: 1920px 1080px; margin: 0; }
    body { background: none; }
    .slide { break-after: page; }
  }
</style>
</head>
<body>
  <section class="slide">
    <h1>Q3 review</h1>
    <p>Revenue, churn and next steps</p>
    <aside class="notes">Welcome everyone. 20 minutes, questions at the end.</aside>
  </section>

  <section class="slide">
    <h2>Revenue grew in every region</h2>
    <ul>
      <li>Europe: strongest quarter so far</li>
      <li>Middle East: two new enterprise customers</li>
    </ul>
    <aside class="notes">Mention the two customer names only if asked.</aside>
  </section>
</body>
</html>

Étape 4 : convertir le HTML en .pptx

1. Ouvrez l’outil gratuit HTML en PPTX et déposez deck.html (ou un .zip si la présentation utilise des images et des polices locales).
2. Vérifiez le nombre de slides détectées. S’il ne trouve qu’une immense page, revenez à l’étape 2.
3. Si la présentation charge le CDN Tailwind, des polices web ou Chart.js, augmentez la valeur « attendre N secondes » pour que tout soit dessiné avant la capture.
4. Téléchargez le .pptx et ouvrez-le dans PowerPoint, Keynote ou Google Slides.
5. Ouvrez le volet des notes pour vérifier que vos notes de présentation sont bien là.

Les images hébergées sur d’autres sites qui n’autorisent pas l’accès cross-origin (CORS) peuvent sortir vides. Dans ce cas, téléchargez ces images, placez-les à côté de deck.html dans un .zip et utilisez des chemins relatifs.

Une boucle de relecture rapide avant de présenter

Comme le HTML est la source de référence, le moyen le plus rapide de peaufiner la présentation est d’itérer dans la conversation et de ne convertir qu’à la fin. Une routine simple évite les surprises le jour de la réunion.

1. Ouvrez deck.html dans votre navigateur avec un zoom à 100 % et faites défiler : chaque slide doit être un bloc complet de 1920x1080 sans rien qui déborde.
2. Demandez les modifications à Claude avec des mots simples (« réduis la slide 4 à trois puces », « transforme le graphique de la slide 6 en histogramme »), puis téléchargez la nouvelle version sous deck-v2.html pour pouvoir revenir en arrière.
3. Convertissez, ouvrez le .pptx et lancez-le une fois en mode présentateur : vérifiez l’ordre des slides, les notes et que les graphiques affichent leurs valeurs finales.
4. Gardez le HTML et le .pptx dans le même dossier ; au trimestre suivant, vous n’aurez qu’à mettre les chiffres à jour.

Images ou texte modifiable : quand reconstruire dans PowerPoint

Une présentation avec une image par diapositive est parfaite quand le design est définitif et que vous présentez vous-même. C’est le mauvais choix quand d’autres personnes doivent modifier le texte. Ce tableau vous aide à décider :

Une approche hybride pratique

Gardez le HTML comme fichier source. Convertissez en .pptx pour présenter et, si une diapositive a besoin de texte vivant, ajoutez une zone de texte PowerPoint par-dessus l’image de cette seule diapositive. Quand le contenu change beaucoup, mettez à jour le HTML avec Claude et reconvertissez : c’est plus rapide que de retoucher vingt diapositives à la main.

L’alternative PDF pour partager

Si la présentation est envoyée plutôt que présentée, un PDF 16:9 vaut souvent mieux qu’un .pptx : il s’ouvre sur n’importe quel téléphone, garde le design et ne peut pas être modifié par erreur. Dans le même convertisseur, choisissez le format diapositives 16:9. « Imprimer / Enregistrer en PDF » garde le texte sélectionnable et un fichier léger ; « Télécharger le PDF » donne une copie fidèle au pixel en un clic, avec le texte en image.

La comparaison des méthodes PDF se trouve dans convertir HTML en PDF gratuitement : 3 méthodes.

Dépanner une présentation Claude

• Une seule diapositive dans le .pptx : le HTML n’a pas de structure de slides ; demandez des éléments <section class="slide"> de 1920x1080 px.
• Texte coupé en bas d’une slide : trop de contenu pour une seule slide ; demandez à Claude de la scinder, ou réduisez la taille de police dans le HTML.
• Police de remplacement au lieu de celle prévue : la police web n’était pas chargée ; augmentez le temps d’attente.
• Graphique absent ou à moitié dessiné : demandez des graphiques sans animation (dans Chart.js, animation: false).
• Notes absentes : l’aside doit se trouver dans la slide concernée et porter class="notes".