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 — DOM ツリーとコンポーネントスニペットを含む 15 個のレイアウトパターン

slidekit-create のすべてのルールが適用されます。 主な制約事項:

• スライドサイズ: 1280x720px
• Tailwind CSS 2.2.19 + Font Awesome 6.4.0 + Google Fonts (CDN 経由)
• JavaScript なし
• ルート DOM: <body> → 単一のラッパー <div>
• テキストは <p> / <h*> 内に配置 (<div> ではない)
• ::before / ::after 内にテキストを配置しない

フェーズ 4: HTML スライドの作成

各スライド画像について、1 枚ずつ:

1. スライド画像を注意深く読み込む
2. slidekit-create の 15 個のパターンから最も近いレイアウトパターンを選ぶ
3. スライドを視覚的に再現する HTML を書く:
   • 色を正確に合わせる (画像で確認した 16 進数値を使用)
   • テキストコンテンツを正確に合わせる (すべてのテキスト、数値、ラベル)
   • 空間レイアウトを合わせる (要素の位置、比率)
   • コンテンツスライド全体で一貫したヘッダー/フッターを使用する
   • 元のスライドにアイコンや箇条書きがある場合は 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: ビジュアル QA

生成された各 HTML を元のスクリーンショットと比較します。

各スライドについて:

1. 元のスライド画像 (slide-NN.jpg) を読み込む
2. 生成された HTML ファイルを読み込む
3. 以下をチェックする:
   • テキストの欠落または誤り
   • 色の誤りや色のコントラストの問題
   • レイアウトのずれ (要素の位置ずれ、比率の誤り)
   • 装飾要素の欠落 (バー、図形、バッジ)
   • オーバーフローやクリッピングの問題
4. 見つかった問題を修正する
5. 修正後に再検証する

少なくとも 1 回の完全な比較パスで問題が検出されないと確認できるまで、成功を宣言しないでください。