プロ水準のHTMLスライドをAI生成するAgentSkill

エンジニアが登壇資料を作るとき、たいてい二つの派閥に分かれる。KeynoteやFigmaでピクセル単位の調整に執念を燃やす「デザイン派」か、MarpやReveal.jsを使ってMarkdownから生成する「効率派」だ。私は長らく後者だが、正直なところ不満も抱えていた。Markdownベースのツールはロジックの構築には最高だが、いざ「ここだけアニメーションを入れたい」「特定のページだけレイアウトを変えたい」と思い立った瞬間、ハック気味のCSSを書き殴る泥沼にハマることになるからだ。

最近はAIにスライドを自動生成させるアプローチも増えた。しかし、その多くはブラックボックス化されたSaaSであり、出力されるのは微調整が効かないPDFか、独自のWebエディタにロックインされるものばかりだ。「プレーンでハックしやすいHTMLで、なおかつ見栄えのするスライドを、AIとの対話でサクッと作れないか」。そんなニッチだが切実な要求に対する見事な解答を、GitHubで見つけた。

AIエージェントの「手足」となるスライド生成器

html-ppt-skillは、人間が手でマークアップするための単なるHTMLフレームワークではない。AIエージェントに「プロ水準のプレゼン資料を作らせる」ための拡張機能（AgentSkill）として設計されているのが最大の特徴だ。

Node.js環境があれば、以下のコマンド一発でエージェントのランタイムにこのスキルを組み込むことができる。

npx skills add https://github.com/lewislulu/html-ppt-skill

導入後は、「サイバーパンク風のテーマで、8ページの技術共有用スライドを作って」とプロンプトを投げるだけだ。AIは裏側でこのスキルを呼び出し、36種類のテーマ、31種類のレイアウト、さらにCanvasを使ったリッチなエフェクトを組み合わせたHTMLファイルを生成する。Webpackなどのビルドステップは一切不要。生成された静的なHTML/CSS/JSをブラウザにドロップすれば、そのままフルスクリーンのプレゼンが始まるという潔さである。

泥臭くも堅牢な「ピクセルパーフェクト」へのアプローチ

私がこのリポジトリの設計で最も唸らされたのは、スライドの見た目そのものではなく、「プレゼンターモード（発表者ツール）」の実装アプローチだ。キーボードの「S」を押すと、手元用のスピーカーノートやタイマーを備えた別ウィンドウが立ち上がるお馴染みの機能である。

Webベースのスライドツールにおいて、手元のプレビュー画面とプロジェクター投影画面をどう同期させるかは常に鬼門となる。別々のDOMツリーをレンダリングすると、CSSのメディアクエリやフォントの読み込みタイミングの違いにより、「プレビューと本番で微妙に改行位置がズレる」という現象が起きがちだ。

作者のLewis氏は、この問題を極めて泥臭く、かつ確実な方法で解決している。プレゼンター画面の「現在スライド」や「次スライド」をプレビューする領域に <iframe> を配置し、観客側とまったく同じHTMLファイルを ?preview=N というクエリパラメータ付きで読み込ませているのだ。

これにより、テーマやフォント、CSSの適用結果が「完全に一致」することが保証される。画面間の同期は postMessage で行われ、スライド遷移時は再読み込みをせずにクラスをトグルするだけで済ませるため、画面のチラつきも一切ない。Webの標準機能をパズルのように組み合わせて堅牢なシステムを作る、非常にエンジニアライクな設計思想だと言える。

良質な「器」がLLMの能力を引き出す

生成AIはテキストやコードを出力するのは得意だが、それを「プレゼンテーション」という視覚的かつ時間的な体験に落とし込むには、まだ人間側が優れた「器（制約とテンプレート）」を用意してやる必要がある。html-ppt-skillは、LLMの持つ構成力と、Web技術の枯れた堅牢性をうまく繋ぎ合わせた好例だ。

次のLT大会の資料作りは、マークダウンと睨めっこするのをやめ、このスキルを組み込んだエージェントに丸投げしてみようと思う。

参考リポジトリ: lewislulu/html-ppt-skill

Photo by Evangeline Shaw on Unsplash