Skip to content

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.

@tweet

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 ↓

@tweet

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 Code

The project structure is as shown above. If you’re interested in the actual project, check out this repository:

GitHub - oikon48/slide_20250705_claude_code
Contribute to oikon48/slide_20250705_claude_code development by creating an account on GitHub.
github.com

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 printing

I 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 palette

As 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 layout

This 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.

  1. Create slides.md
  2. Update the presentation content in slides.md
  3. Generate HTML from slides.md with /update-slide
  4. Review the layout and modify CSS in HTML
  5. Run html-to-pdf.js to 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.

初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
2025年7月5日に開催された「Claude Code 初学者 勉強会 2」の登壇資料です。 https://currypurin-dojo.connpass.com/event/360112/ X: https://x.com/oikon48
speakerdeck.com

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!

Oikon (@oikon48) on X
Software Engineer / 海外とソフトウェア開発してます🌎 / RevenueCat Shipaton 2025 Winner / ✳︎ultrathink… / Claude Code の解説してます / Work requests via DM
x.com

References

Claude Code 初学者 勉強会 2 (2025/07/05 21:00〜)
Anthropicが提供するAIアシスタントClaudeの最新機能「Claude Code」について学び、実践する勉強会を開催します。プログラミングとAIの融合による新しい開発手法やClaude Codeの面白い使い方を一緒に探求しましょう！ ### 開催概要 * 日時：2025年7月5日21時から1時間程度 * 形式：オンライン（YouTube）、発表者はZoom * 参加費：無料 ### 内容 * Claude Codeの基本機能と活用方法の解説 * 実践的なコーディング例のデモンストレーション * 参加者によるLightning Talks（5~20...
currypurin-dojo.connpass.com
  • I Want Claude Code to Handle Presentation Slide Creation Too - At Home, Outside, and On the Go
登壇スライド作成もClaude Codeに任せたい 〜家でも外でも移動中も〜
zenn.dev