html-slide-render

HTML スライドのレンダリング

次のようなコマンドでは、このスキルを使用します。

• $html-slide-render
• 「HTML スライドデッキをビルドする」
• 「スライドを HTML としてレンダリングする」
• 「implement html_slide_prompts.json」

目標

計画されたデザインとプロンプトをもとに、ブラウザーでレンダリングされ、編集可能なスライドデッキを作成します。

入力

• DESIGN.md
• slide_plan.json
• html_slide_prompts.json

デフォルトの出力

次のようなプロジェクトローカルのフォルダーを作成します。

slides-html/
├── index.html
├── styles.css
├── slides.js
└── assets/

ユーザーが持ち運び可能なスタンドアロン成果物を求めた場合に限り、よりシンプルな単一ファイルの index.html を使用します。

実装ルール

• ランディングページではなく、最初の画面に実際のスライドを表示します。
• 抽出したデザインシステムを維持します。
• ユーザーが別の形式を指定していない限り、安定した 16:9 のスライドサイズを使用します。
• スライドのコンテンツにはセマンティック HTML を使用します。
• CSS トークンは読みやすく、一元管理します。
• スライドのコンテンツを改善できる場合に限り、SVG、CSS、またはチャートライブラリを使用します。
• テキストを読みやすくし、はみ出さないようにします。
• 可能な場合は、ブラウザーで検証します。

絶対ルール

• Codex のネイティブ画像生成を主なレンダラーとして使用しないでください。
• 情報量の多い分析スライドを、一般的なカードグリッドにまとめないでください。
• 生成したアセットをワークスペースの外に置かないでください。
• 最終的な HTML のエントリーパスと、実施した検証を報告してください。