slidekit-templ

PDF 转 HTML 幻灯片转换器

通过根据截图逐页视觉还原，将 PDF 演示文稿转换为高保真 HTML 幻灯片。

流程

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

依赖项

brew install poppler

工作流

阶段 1：生成幻灯片图像

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

这会生成 output_dir/slide-01.jpg、slide-02.jpg 等文件。

阶段 2：分析演示文稿

在编写任何 HTML 之前：

1. 阅读所有幻灯片图像，了解整套演示文稿
2. 识别配色方案（3-4 种颜色：主深色、强调色、辅助色）
3. 识别字体样式（衬线/无衬线、字重规律）
4. 留意内容幻灯片中使用的页眉/页脚样式
5. 留意整体风格（创意、优雅、现代、专业、极简）

阶段 3：加载设计系统

阅读以下文件，了解 HTML 设计系统规则：

1. ~/.claude/skills/slidekit-create/SKILL.md — 强制约束、PPTX 转换规则、反面模式、设计指南、HTML 样板、交付前检查清单
2. ~/.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 中放置文本

阶段 4：编写 HTML 幻灯片

针对每张幻灯片图像，逐张处理：

1. 仔细阅读幻灯片图像
2. 从 slidekit-create 的 15 种模式中选择最接近的布局模式
3. 编写 HTML，在视觉上还原幻灯片：
   • 精确匹配颜色（使用从图像中观察到的十六进制值）
   • 精确匹配文本内容（所有文本、数字、标签）
   • 匹配空间布局（元素位置、比例）
   • 在内容幻灯片中使用统一的页眉/页脚
   • 原图中有图标或项目符号时，使用 Font Awesome 图标
4. 保存为 {output_dir}/{NNN}.html（补零至固定长度：001.html、002.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/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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">
        
    </div>
</body>
</html>

阶段 5：生成 print.html

编写完所有幻灯片后，生成 {output_dir}/print.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>
    
    <div class="slide-frame"><iframe src="001.html"></iframe></div>
    ...
</body>
</html>

阶段 6：视觉质量检查

将生成的 HTML 与原始截图逐一对比。

针对每张幻灯片：

1. 阅读原始幻灯片图像（slide-NN.jpg）
2. 阅读生成的 HTML 文件
3. 检查以下内容：
   • 是否有遗漏或错误的文本
   • 是否有错误的颜色或颜色对比问题
   • 布局是否错位（元素偏移、比例错误）
   • 是否遗漏装饰元素（色条、形状、徽章）
   • 是否存在溢出或裁切问题
4. 修复发现的任何问题
5. 修复后再次验证

至少完成一轮完整对比且未发现问题后，才能宣告成功。