How I Had Claude Code Create LT Slides in HTML
- This article was written manually.
- I haven’t used slide creation tools like Slidev or Marp before. Please bear with me.
I’m Oikon.
Recently, I had the opportunity to give an LT (Lightning Talk) presentation at “Claude Code Beginner Study Session 2 (YouTube link)”.
I needed to create slides for the presentation, and I thought why not try making slides with Claude Code.
After the talk, my post about creating slides with Claude Code got a lot of engagement, so I decided to write this article.
This article explains the methods I actually tried.
Slide Creation Approach
Here are the current approaches for creating LT slides (based on my personal research):
- Generative AI (ChatGPT, Gemini, etc.)
- PowerPoint
- Slidev
- Marp
- HTML
Among these, Slidev seemed popular, but what personally interested me was HTML-based slide generation. I became interested after seeing this post by Shibata-san ↓
Let me quote from the post:
My personal optimal solution for AI slide generation (ended up being HTML):
- Create the outline in MD format (Obsidian) ↓
- Generate slide generation YAML from MD (Claude Desktop) ↓
- Have Opus 4 generate Artifacts based on the YAML prompt, retry a few times until satisfied (Claude Desktop) ↓
- Copy the Artifacts (HTML) and paste into a file ↓
- Fine-tune text and design (Cursor/Windsurf) ↓
- Convert HTML to PDF (puppeteer) ↓ Done, print!
This experience was really good so I recommend it. It was far better than Slidev. Whether to create a YAML prompt from Markdown or not doesn’t really matter, but using YAML helps expose oversights. When fine-tuning in IDE tools like Cursor, you might want to rewrite it in Tailwind. Apply layouts that you always use for slides at this stage. Sonnet 4 created a working script for converting HTML to PDF in one shot (a simple ~50 line JS script using puppeteer).
If you put this html, pdf, script, (+images) set on GitHub, you can break free from Google Drive. I use the path slides/{date}/here.
Here’s what I liked about this approach:
- You can create it if you know HTML and CSS
- You can store all Artifacts on GitHub
- No learning curve for Slidev, Marp, etc.
The third point, “No learning curve for Slidev, Marp, etc.” was particularly important for me since I needed to create slides quickly, so I chose the HTML generation method.
Creating Slides with Claude Code
Project Structure
slide-project/
├── slides.md # For master slides
├── artifacts/
│ ├── slides.html # Generated HTML presentation
│ ├── slides.yaml # Structured intermediate data
│ └── slides-output.pdf # Final PDF output
├── scripts/
│ ├── README.md # Script documentation
│ └── html-to-pdf.js # PDF conversion engine
├── fig/ # Images
└── CLAUDE.md # Project settings for Claude CodeThe project structure is as shown above. If you’re interested in the actual project, check out this repository:
Utilizing Claude Code Features
CLAUDE.md
Since CLAUDE.md is loaded every time, I wrote the following information:
- Repository overview
- File structure
- Notes for slide generation
- Color palette
For slide generation notes, I wrote something like this:
## Notes for Slide Generation
- Creation flow
1. Create outline in md format
2. Convert to yaml for structural understanding
3. Output slides to html file
4. Repeat fine-tuning as needed
- Pre-calculate image file sizes and properly place them on 16:9 slides
- Strictly use `##` for page breaks
- Page navigation arrows are not needed
- Save slide output to `artifacts/` (yaml, html, pdf)
- Final output is PDF for printingI also set the slide theme colors with a color palette. First, I gave Claude Code the following instruction:
Search the Anthropic official website and create a color paletteAs a result, I wrote the obtained color palette in CLAUDE.md:
## Color Palette
Using Anthropic's brand colors:
- Primary: #d4a37f (Warm Terracotta)
- Secondary: #d8ac8c (Light Coral)
- Accent: #ead1bf (Light Peach)
- Background: #fbf6f2 (Warm White)
- Text: #000000 (Black)Custom Slash Command
I also utilized Claude Code’s custom slash command feature for slide creation. I placed .claude/commands/update-slide.md with the following instructions:
# Detect md updates and reflect in slides
## Steps
- step1: Compare md changes with yaml to detect differences
- step2: Convert md to yaml (create yaml if it doesn't exist)
- step3: Update existing artifacts/slides.html referencing md and yaml
- step4: Generate slide PDF with script/html-to-pdf.js
## Notes
- Only update content
- Do not change the layoutThis means by executing the /update-slide custom slash command in Claude Code:
- Markdown -> YAML
- YAML -> HTML
- HTML -> PDF
All these conversions happen at once.
Slide Creation Procedure
Basically, you only modify slides.md.
- Create
slides.md - Update the presentation content in
slides.md - Generate HTML from
slides.mdwith/update-slide - Review the layout and modify CSS in HTML
- Run
html-to-pdf.jsto generate the final PDF
I also had Claude Code create html-to-pdf.js.
Generated Slides
Here are the slides I actually used for my presentation. Including project setup, it took about 4-5 hours.
Benefits I Personally Felt
Here are the benefits I personally felt:
Benefits:
- Can use md file assets
- Can store on GitHub repository
- CSS adjustments allow bulk changes to all pages
- No learning curve for Marp/Slidev, etc.
- Easy layout adjustments for people with web development experience
This method is like a static site generator, so people with web development experience should find adjustments easy. While I didn’t use them this time, you could also use CSS libraries (like Tailwind).
If you have md assets in something like Obsidian, I thought you could use the Obsidian MCP server to have Claude Code read your document assets and create slides. I think this would be similar with Marp and Slidev.
Summary
In this article, I introduced how to create LT slides in HTML format with Claude Code.
As I wrote in the article, being able to create slides without learning costs is the benefit of this method.
For my next presentation opportunity, I’m thinking of trying Slidev too, so I’ll add a comparison if I feel like it.
Follow Me on 𝕏!
I also share information on 𝕏, so I’d appreciate it if you followed me!
References
-
Shibata-san’s slide creation method (X post) https://x.com/KeisukeShibata_/status/1927667414281724414
-
Claude Code Beginner Study Session 2
- I Want Claude Code to Handle Presentation Slide Creation Too - At Home, Outside, and On the Go
