html-ppt-pitch-deck

HTML PPT・ピッチデッキ

html-ppt マスタースキルへの、焦点を絞ったエントリーポイントです。ユーザーを pitch-deck フルデッキテンプレートへ直接案内します。

このカードを選ぶ場面

Examples ギャラリーでは、「Use this prompt」が上記の example_prompt に紐付けられています。このプロンプトを選択したとき、ユーザーが pitch-deck のビジュアルアイデンティティをそのまま使いたい場合は、このカードを選んでください（スクリーンショットと選定理由については、上流のフルデッキカタログを参照してください）。

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて design-templates/html-ppt/SKILL.md に記載されています。内容・対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 そして「プレゼンター専用のテキストをスライドに表示しない」というルールが含まれます。
2. 該当するテンプレートフォルダーを起点にします。 design-templates/html-ppt/templates/full-decks/pitch-deck/ から index.html と style.css をプロジェクトにコピーし、.tpl-pitch-deck の body クラスはそのままにします。
3. テンプレートと共有ランタイムを一緒に用意します。 上流の index.html は ../../../assets/... 経由で共有 CSS／JS を参照しています。これは design-templates/html-ppt/templates/full-decks/ の3階層下にあるためです。 index.html をプロジェクトにコピーすると、これらの親ディレクトリ相対 URL は 解決できなくなり、base.css、animations.css、runtime.js が404になって、 デッキが有効にならず、スライドのナビゲーションも動作しません。プロジェクトごとに、次のいずれかの方法を選んでください。
   • 方法A — コピーして書き換える（推奨）： design-templates/html-ppt/assets/fonts.css、design-templates/html-ppt/assets/base.css、 design-templates/html-ppt/assets/animations/animations.css、design-templates/html-ppt/assets/runtime.js を プロジェクト内の assets/ にコピーします（assets/animations/animations.css も配置します）。その後、 index.html 内の4つの <link>／<script> タグを ../../../assets/... から対応するプロジェクト内のパス （assets/fonts.css、assets/base.css、 assets/animations/animations.css、assets/runtime.js）に書き換えます。
   • 方法B — インライン化： 同じ4つのファイルを読み込み、各 <link rel="stylesheet" href="../../../assets/..."> を、ファイルの内容を含む <style>...</style> に置き換えます。また、<script src="../../../assets/runtime.js"> を、 runtime.js の内容を含む <script>...</script> に置き換えます。これにより、 自己完結型の index.html が1つ作成されます。 どちらの方法でも、上流の ../../../assets/... URL をそのまま プロジェクトの成果物に含めないでください。これらの URL が機能するのはリポジトリ内だけです。
4. テーマを選びます。 デフォルトのトークンで問題ありませんが、別の雰囲気にしたい場合は、 design-templates/html-ppt/assets/themes/*.css にある36種類のテーマのいずれかを <link id="theme-link"> で読み込み、T キーで切り替えられるようにします。
5. クラスではなくデモコンテンツを置き換えます。 .tpl-pitch-deck 用のスコープ付きCSSが認識するのは、 テンプレートに含まれる構造クラスのみです。クラスはそのままにしてください。
6. 発表者ノートは <aside class="notes"> または <div class="notes"> の中に記述します。 スライド上に表示されるテキストとして記述しないでください。

クレジット

ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、 上流のMITライセンス適用プロジェクト lewislulu/html-ppt-skill に由来します。LICENSE ファイルは design-templates/html-ppt/LICENSE に含まれています。再配布する際は、ファイルをそのまま含めてください。