How to turn a Claude artifact into a PowerPoint presentation

Updated: 2026-10-14 · Dawwerni team

Copy or download the Claude artifact as an .html file, ask Claude to lay it out as 1920x1080 slides with speaker notes in <aside class="notes">, then convert the file to .pptx with an in-browser HTML to PowerPoint converter. Each slide becomes a pixel-perfect full-slide image with your notes kept; the slide text itself is not editable in PowerPoint.

What you get, and what you do not

Claude is good at producing a polished deck as an HTML artifact: a single file with the layout, colours, fonts and often a few charts. PowerPoint cannot open that file directly, so you need a conversion step.

The most faithful way is to capture each slide as an image and place it on a 16:9 PowerPoint slide. That is what our free HTML to PowerPoint converter does, in your browser, without uploading the file. Be clear about the trade-off before you start:

• Kept: the exact design, fonts, colours, charts and backgrounds, one slide per HTML slide, and your speaker notes as real PowerPoint notes.
• Not kept: editable text. Each slide is a picture, so you cannot fix a typo or change a number inside PowerPoint; you change the HTML and convert again.
• Works in: PowerPoint, Keynote and Google Slides, because the result is a standard .pptx file.

Step 1: get the HTML out of Claude

An HTML artifact can be copied or downloaded from the artifact view. Look for the copy or download option next to the preview; button labels change from time to time, but both give you the same code.

1. If you download it, you already have an .html file. Skip to step 4.
2. If you copy the code, open a plain text editor: Notepad on Windows, or TextEdit on Mac after choosing Format → Make Plain Text.
3. Paste the code and save the file as deck.html, with UTF-8 encoding if the editor asks (important for accents and Arabic text).
4. Double-click the file. It should open in your browser and look like the preview in Claude.

If the artifact is a React component

Sometimes the artifact is React code (a .jsx component) rather than a plain web page. A converter needs a page it can open, so ask Claude: “Rewrite this as one self-contained HTML file that runs when opened in a browser.”

Step 2: make the artifact slide-shaped

A converter has to know where one slide ends and the next begins. Our converter detects reveal.js decks, elements with the class slide, sections sized 16:9 (1920x1080 or 1280x720) and CSS page breaks. A long scrolling page with no slide structure is instead cut into pages, which rarely makes a good presentation.

The easiest fix is to ask Claude for the right structure. Paste this prompt into the same conversation:

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

• Fixed pixel sizes matter: units such as vw and vh change with the window, so a slide that looked right in the chat can overflow at capture time.
• Animations make the capture catch a half-finished state. The converter freezes CSS animations at their end state, but asking for none is safer.
• One idea per slide keeps the text large enough to read on a projector. See how to make AI-generated presentations look professional for a full checklist.

Step 3: add speaker notes Claude can write for you

Speaker notes survive the conversion when they sit inside each slide in an aside element with the class notes, the same convention reveal.js uses. They become real, editable PowerPoint notes under each slide. Here is a minimal two-slide deck that follows every rule above:

<!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>

Step 4: convert the HTML to .pptx

1. Open the free HTML to PPTX tool and drop deck.html (or a .zip if the deck uses local images and fonts).
2. Check the number of slides it detected. If it finds one huge page, go back to step 2.
3. If the deck loads the Tailwind CDN, web fonts or Chart.js, raise the “wait N seconds” value so everything is drawn before capture.
4. Download the .pptx and open it in PowerPoint, Keynote or Google Slides.
5. Open the notes pane to check that your speaker notes are there.

Images hosted on other websites that do not allow cross-origin access can come out blank. If that happens, download those images, put them next to deck.html in a .zip and use relative paths. For more conversion rules, read HTML slides to PPTX without losing the design.

A quick review loop before you present

Because the HTML is the source of truth, the fastest way to polish the deck is to iterate in the chat and convert only at the end. A simple routine avoids surprises on the day of the meeting.

1. Open deck.html in your browser at 100% zoom and scroll through it: every slide should be a full 1920x1080 block with nothing overflowing.
2. Ask Claude for changes in plain words (“shorten slide 4 to three bullets”, “make the chart on slide 6 a bar chart”), then download the new version as deck-v2.html so you can go back if needed.
3. Convert, open the .pptx and run it in presenter view once: check the slide order, the notes and that charts show their final values.
4. Keep the HTML and the .pptx together in the same folder; next quarter you will only need to update the numbers.

Images vs editable text: when to rebuild in PowerPoint

A picture-per-slide deck is perfect when the design is final and you present it yourself. It is the wrong choice when other people need to change the words. Use this table to decide:

A practical hybrid

Keep the HTML as your source file. Convert to .pptx for presenting, and, when one slide needs live text, add a PowerPoint text box over the image on that slide only. When the content changes a lot, update the HTML with Claude and convert again; it takes less time than editing twenty slides by hand.

The PDF alternative for sharing

If the deck is sent rather than presented, a 16:9 PDF is often better than a .pptx: it opens on any phone, keeps the design and cannot be edited by accident. In the same converter, choose the 16:9 slides page size. “Print / Save as PDF” keeps the text selectable and the file small; “Download PDF” gives a pixel-faithful copy in one click, with text as images.

The comparison of PDF methods is covered in convert HTML to PDF for free: 3 methods.

Troubleshooting a Claude deck

• Only one slide in the .pptx: the HTML has no slide structure; ask for <section class="slide"> elements of 1920x1080 px.
• Text cut at the bottom of a slide: too much content for one slide; ask Claude to split it, or reduce the font size in the HTML.
• Fallback font instead of the designed one: the web font had not loaded; increase the wait time.
• Chart missing or half-drawn: ask for charts without animation (in Chart.js, animation: false).
• Notes missing: the aside must be inside the slide it belongs to and have class="notes".