slidekit-templ

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PDF to HTML Slide Converter

PDF转HTML幻灯片转换器

Convert PDF presentations to high-fidelity HTML slides by visually reproducing each slide from screenshots.

通过对每张幻灯片的截图进行视觉复现，将PDF演示文稿转换为高保真HTML幻灯片。

Pipeline

处理流程

PDF → (pdftoppm) → Slide images
                        ↓
    Claude reads each image + writes HTML
                        ↓
         001.html, 002.html, ... + print.html

PDF → (pdftoppm) → Slide images
                        ↓
    Claude reads each image + writes HTML
                        ↓
         001.html, 002.html, ... + print.html

Dependencies

依赖

bash

brew install poppler

bash

brew install poppler

Workflow

工作流程

Phase 1: Generate Slide Images

阶段1：生成幻灯片图片

bash

python ~/.claude/skills/pdf-to-html/scripts/pdf_to_images.py input.pdf output_dir

This produces

output_dir/slide-01.jpg

slide-02.jpg

, etc.

bash

python ~/.claude/skills/pdf-to-html/scripts/pdf_to_images.py input.pdf output_dir

这会生成

output_dir/slide-01.jpg

、

output_dir/slide-02.jpg

等文件。

Phase 2: Analyze the Deck

阶段2：分析演示文稿

Before writing any HTML:

Read ALL slide images to understand the full deck
Identify the color palette (3-4 colors: primary dark, accent, secondary)
Identify the font style (serif/sans-serif, weight patterns)
Note the header/footer pattern used across content slides
Note the overall style (creative, elegant, modern, professional, minimalist)

在编写任何HTML之前：

读取所有幻灯片图片以了解整个演示文稿的内容
识别调色板（3-4种颜色：主深色、强调色、辅助色）
识别字体样式（衬线/无衬线、字重规律）
记录所有内容页通用的页眉/页脚样式
记录整体风格（创意风、典雅风、现代风、专业风、极简风）

Phase 3: Load Design System

阶段3：加载设计系统

Read these files to load the HTML design system rules:

```
~/.claude/skills/slidekit-create/SKILL.md
```
— Mandatory constraints, PPTX conversion rules, anti-patterns, design guidelines, HTML boilerplate, pre-delivery checklist
```
~/.claude/skills/slidekit-create/references/patterns.md
```
— 15 layout patterns with DOM trees, component snippets

All rules in slidekit-create apply. Key constraints:

Slide size: 1280x720px
Tailwind CSS 2.2.19 + Font Awesome 6.4.0 + Google Fonts via CDN
No JavaScript
Root DOM:
```
<body>
```
→ single wrapper
```
<div>
```
Text in
```
<p>
```
/
```
<h*>
```
(not
```
<div>
```
)
No text in
```
::before
```
/
```
::after
```

读取以下文件以加载HTML设计系统规则：

```
~/.claude/skills/slidekit-create/SKILL.md
```
— 强制约束、PPTX转换规则、反模式、设计指南、HTML样板、交付前检查清单

~/.claude/skills/slidekit-create/references/patterns.md

— 15种带DOM树、组件片段的布局模式

slidekit-create中的所有规则均适用。核心约束：

幻灯片尺寸：1280x720px
使用通过CDN引入的Tailwind CSS 2.2.19 + Font Awesome 6.4.0 + Google Fonts
不允许使用JavaScript
根DOM结构：
```
<body>
```
→ 单个外层
```
<div>
```
文本放在
```
<p>
```
/
```
<h*>
```
标签中（不能放在
```
<div>
```
里）
不允许在
```
::before
```
/
```
::after
```
中放置文本

Phase 4: Write HTML Slides

阶段4：编写HTML幻灯片

For each slide image, one at a time:

Read the slide image carefully
Pick the closest layout pattern from slidekit-create's 15 patterns
Write the HTML that visually reproduces the slide:
- Match colors precisely (use hex values observed in the image)
- Match text content exactly (all text, numbers, labels)
- Match spatial layout (element positions, proportions)
- Use the consistent header/footer across content slides
- Use Font Awesome icons where the original has icons or bullets
Save as
```
{output_dir}/{NNN}.html
```
(zero-padded: 001.html, 002.html, ...)

逐张处理每张幻灯片图片：

仔细读取幻灯片图片
从slidekit-create的15种布局模式中选择最匹配的布局
编写HTML实现幻灯片的视觉复现：
- 精准匹配颜色（使用图片中识别到的十六进制色值）
- 完全匹配文本内容（所有文字、数字、标签）
- 匹配空间布局（元素位置、比例）
- 所有内容页使用统一的页眉/页脚
- 原文件中使用图标或项目符号的位置使用Font Awesome图标
保存为
```
{output_dir}/{NNN}.html
```
（补零对齐：001.html、002.html...）

HTML Boilerplate

HTML样板

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>{Slide Title}</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family={PrimaryFont}:wght@300;400;500;700;900&family={AccentFont}:wght@400;600;700&display=swap" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; font-family: '{PrimaryFont}', sans-serif; overflow: hidden; }
        .font-accent { font-family: '{AccentFont}', sans-serif; }
        .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; }
        /* Custom color classes: .bg-brand-dark, .bg-brand-accent, .bg-brand-sub, etc. */
    </style>
</head>
<body>
    <div class="slide">
        <!-- Content -->
    </div>
</body>
</html>

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>{Slide Title}</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family={PrimaryFont}:wght@300;400;500;700;900&family={AccentFont}:wght@400;600;700&display=swap" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; font-family: '{PrimaryFont}', sans-serif; overflow: hidden; }
        .font-accent { font-family: '{AccentFont}', sans-serif; }
        .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; }
        /* Custom color classes: .bg-brand-dark, .bg-brand-accent, .bg-brand-sub, etc. */
    </style>
</head>
<body>
    <div class="slide">
        <!-- Content -->
    </div>
</body>
</html>

Phase 5: Generate print.html

阶段5：生成print.html

After all slides are written, generate

{output_dir}/print.html

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>View for Print</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #FFFFFF; }
        .slide-frame {
            width: 1280px; height: 720px;
            margin: 20px auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }
        .slide-frame iframe { width: 1280px; height: 720px; border: none; }
        @media print {
            body { background: #FFFFFF; }
            .slide-frame {
                page-break-after: always; box-shadow: none; border: none;
                margin: 0 auto;
                transform: scale(0.85); transform-origin: top center;
            }
        }
    </style>
</head>
<body>
    <!-- One iframe per slide -->
    <div class="slide-frame"><iframe src="001.html"></iframe></div>
    ...
</body>
</html>

所有幻灯片编写完成后，生成

{output_dir}/print.html

：

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>View for Print</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #FFFFFF; }
        .slide-frame {
            width: 1280px; height: 720px;
            margin: 20px auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }
        .slide-frame iframe { width: 1280px; height: 720px; border: none; }
        @media print {
            body { background: #FFFFFF; }
            .slide-frame {
                page-break-after: always; box-shadow: none; border: none;
                margin: 0 auto;
                transform: scale(0.85); transform-origin: top center;
            }
        }
    </style>
</head>
<body>
    <!-- One iframe per slide -->
    <div class="slide-frame"><iframe src="001.html"></iframe></div>
    ...
</body>
</html>

Phase 6: Visual QA

阶段6：视觉质量检查

Compare each generated HTML against the original screenshot.

For each slide:

Read the original slide image (
```
slide-NN.jpg
```
)
Read the generated HTML file
Check for:
- Missing or incorrect text
- Wrong colors or color contrast issues
- Layout misalignment (elements shifted, wrong proportions)
- Missing decorative elements (bars, shapes, badges)
- Overflow or clipping issues
Fix any issues found
Re-verify after fixes

Do not declare success until at least one full comparison pass reveals no issues.

将每个生成的HTML与原始截图进行对比。

每张幻灯片检查项：

读取原始幻灯片图片（
```
slide-NN.jpg
```
）
读取生成的HTML文件
检查以下内容：
- 文本缺失或错误
- 颜色错误或色彩对比度问题
- 布局错位（元素偏移、比例错误）
- 装饰元素缺失（栏、形状、徽章）
- 内容溢出或裁剪问题
修复发现的所有问题
修复后重新验证

至少完成一次完整对比且未发现任何问题后，才可判定为处理完成。