HTML Slides — Design skill for Claude Code

html-slides


**AI エージェント用のスキル：きれいな 1920×1080 の HTML スライドを、毎回同じ品質で作る。** グラフ・図・地図・表・計算の埋め込み・イラスト・PNG の書き出しと自動の検査まで 1 つに入っています。 事業計画・ピッチだけでなく、マーケティング・コンサルティング・調査の報告・社内の資料にも使えます。 [Agent Skills](https://agentskills.io/) の形式（`SKILL.md`）なので Cursor・Claude Code など対応したエージェントで使え、スクリプトは Node と Python で手でも動きます。 この README の画像は、すべてこのスキルで作った見本のスライド（`examples/`）をそのまま書き出したものです。

[日本語](#日本語) ・ [English](#english)

---

日本語

• 全体像
• こんな資料に使える
• 使い方：頼むだけ
• できること（実際のスライド）
  • 1. ページの型：結論を言い切る見出し
  • 2. グラフ
  • 3. 図
  • 4. 地図
  • 5. 数字は計算から
  • 6. イラスト
  • 7. 発表用の型（pitch）
  • 8. 崩れの自動検査
  • 9. テーマ
  • 10. 付録と敵対的な検査
• 入れ方・手で使う・中身・ライセンス

全体像


上の 12 枚は一部です。グラフは棒（積み上げ・100%・横）・線・面・円・散布・バブル・滝・サンキー・ガントとその組み合わせ、図は担当者ごとの流れ・関係図・循環図・ツリー・ピラミッド・2×2・ベン図、ほかに表・大きな数字（KPI）・時間の帯・左右の比べ・引用・写真と画面の画像、世界・国・日本の都道府県の地図があり、1 ページの中で組み合わせられます。

1 つの HTML ファイル（デッキ）に 1 ページ＝1 つの `` を並べます。1920×1080 固定で、ブラウザの大きさに合わせて拡大縮小します。CSS・JS・データ・地図をファイルに埋め込み、フォント（Noto Sans JP・Inter）を同梱するので、**ネットなしで開けます**。

こんな資料に使える


見出しで結論を言い切り、数字とグラフで裏付ける作りなので、次のような資料にそのまま使えます。

資料	よく使うページ
事業計画・ピッチ	市場の地図・売上の積み上げ・1 件あたりの損益（滝）・計画（ガント）・発表用の型
マーケティング	ファネル・ポジショニング（散布・バブルと 4 象限）・チャネルの獲得単価（棒＋線）・施策の計画
コンサルティング	要旨（KPI と提言）・イシューツリー・優先度の 2×2・利益のブリッジ（滝）・ロードマップ
調査・分析の報告	地域ごとの地図・比べる表・推移のグラフ・前提を変えると数字がそろって変わる計算
社内の資料・研修	担当者ごとの業務の流れ・循環図・時間の帯・チェックの表

マーケティング（テーマ `blue`）とコンサルティング（テーマ `mono`）の見本は [examples/usecases/](examples/usecases/) にあります。