今日の優良食堂
実際に入れて動かして書いた、今日の一膳
ギット飯が代わりに導入・実行・コードまで確かめました
今日の優良食堂 · ギット飯が代わりに導入・分析

op7418/guizang-ppt-skill

Claude Code・Codex 向けの AI エージェント対応 HTML 横向きスライド PPT スキル。単一ファイルで演讲者モード付き

ブログ記事を渡すだけで、Claude CodeやCodexが単一のHTMLファイルとして6〜10ページの雑誌風スライドを組み上げてくれます。左右スワイプやESCキーでの一覧表示、B キーでの軽量静止モードまで備わっているので、そのままプロジェクターにつないでセミナーや社内発表に使えます。政策資料や分析コンテンツならスイスグリッドの22種類の固定レイアウトで整った見た目になり、製品デモならGPT-Image 2.0が背景画像を自動生成してくれるので、封面や公众号ヘッダーまで一括で作れる体験を今日から試せます。

01 / 概要
何をするものか一文で言うと
ひとことでClaude Code・Codex 向けの AI エージェント対応 HTML 横向きスライド PPT スキル。単一ファイルで演讲者モード付き

このリポジトリは、Claude CodeやCodexなどのAIエージェント環境に追加する「Skill」で、1つのHTMLファイルで完結する横スクロール型プレゼン資料を生成します。電子雑誌風の「Style A」とスイス国際主義風の「Style B」という2つの視覚システムを内蔵し、配図生成や複数プラットフォーム向けカバー画像の作成、演者用の演台モードまで一括でカバーします。ビルドもサーバーも不要で、ブラウザで直接開くHTMLとして納品する設計です。

02 / 構造
どう動くのか中核のしくみ
読み方動きの流れを図と一緒にほどきました。

実体はプログラムではなく、SKILL.mdを起点にエージェントへ振る舞いを指示する指示書とテンプレート集です。assets/template.htmlとassets/template-swiss.htmlが2つの視覚システムの雛形で、references/配下にlayouts.md、themes.md、components.md、checklist.mdなど、レイアウトやテーマ色、危険なSVGの回避法までまとめたルールファイルが並びます。エージェントはこれらを読み込みながらMarkdown原稿を6〜10ページ程度のHTMLデッキへ組み立て、画像枠にはCodex経由でGPT-Image系の画像生成を差し込みます。品質担保のためscripts/validate-swiss-deck.mjsやscripts/validate-presenter-mode.mjsといったNode製の検証スクリプトが用意されており、版式やタイトル整列、演者モードの動作を機械的にチェックします。さらにGitHub Actions(presenter-runtime-sync.yml)がテンプレートと演台ランタイムの同期をPR時に自動確認する仕組みになっています。

03 / 体験
入れるとこんな体験になりますギット飯が実際にたどった順序
所要ギット飯が実際に導入・実行しながらたどった順序です。
  1. STEP 01

    まず`npx skills add`コマンドかgit cloneで`~/.claude/skills/guizang-ppt-skill`にSkillを導入し、SKILL.md・assets・referencesの3つが揃っているか確認します。

  2. STEP 02

    エージェントに「このMarkdownをスイス風PPTにして」と依頼すると、references/layouts-swiss.mdやthemes-swiss.mdの規則を参照しながら7ページ前後の構成案が返ってきます。

  3. STEP 03

    生成が進むとassets/template-swiss.htmlをベースにしたindex.html的な単一HTMLファイルが作られ、ブラウザで直接開くと横スクロール形式のスライドが表示されます。

  4. STEP 04

    配図が必要な場面ではCodex環境でGPT-Image系のモデルを呼び出し、テンプレートの比率に合わせた写真やインフォグラフィックが差し込まれます。

  5. STEP 05

    仕上げにエージェントへ演者モードの準備を頼むと、備考欄と各ページの想定時間が追記され、右下の`P`キーで観客用画面と発表者用プレビューが分かれた二画面モードに入れます。

  6. STEP 06

    品質を厳密に見る場合はscripts/validate-swiss-deck.mjsをNodeで実行し、版式のはみ出しや危険なSVG、タイトル間隔のずれを機械的に検出できます。

04 / 成果物
何が手に入るのか導入後に手元に残るもの

手に入るのは、ビルドもサーバーも不要な単一HTMLファイルのプレゼン資料一式です。矢印キーやスワイプで横送りできるスライド本体に加え、必要なら配図や公式アカウント用21:9ヘッダー画像、小紅書3:4カバーなど複数比率の画像も同じ視覚ルールで生成されます。さらに演者モード(発表メモ、経過時間計測、レーザーポインター、Bキーでの低負荷静的表示への切替)まで同じファイルに同梱される点が特徴です。

05 / 注意
ここは先に知っておいてください先に知っておくとよいこと
正直なところ誰にでも合うとは言いにくいところです。
01

Skill自体はテンプレートと指示書の集合であり、実際の画質やレイアウトの完成度はエージェント側のAI生成品質に大きく依存するため、README記載の効果がそのまま毎回再現される保証はありません。

02

表形式の大量データや研修用の高密度資料には不向きだとREADME自身が明記しており、線下発表やデモ向けの軽量デッキを前提にした設計です。

03

静的HTMLゆえ複数人での同時編集には向かず、共同編集フローが必要な場合は別ツールとの併用が必要になります。

04

画像生成にはCodex経由でGPT-Image系モデルへのアクセスが前提となっており、そうした外部APIキーや利用枠を持たない環境では配図・カバー生成機能は使えません。

06 / 結論
ギット飯の結論食べてみる価値のある一膳か
ギット飯の最終判断優良食堂

個人発表やプロダクト発表会、demo dayのように「強い個人の視点を持つ軽量プレゼン」を単一HTMLで素早く仕上げたいAIエージェントユーザーに向いています。SKILL.md・assets・referencesという構成、GitHub Actionsによる演台ランタイム同期チェック、Node製の検証スクリプト群が実在することから、単なる謳い文句ではなく検証可能な仕組みとして設計されている点は確認できます。ただし最終的な見た目の質はエージェントの生成結果次第であり、導入前にREADMEの「適合・不適合」の欄で自分の用途がスイス風か雑誌風のどちらに近いか照らし合わせておくと判断しやすいです。

今日の残りの一膳
SUBSCRIBER LIBRARY
これまでに検証した優良食堂を一堂に

4 つの関門を通った優良食堂がすべてバックナンバーに集まっています。いちばん新しい一膳はどなたでも無料で読め、それより前の優良食堂の検証の根拠・詳しい解説は ギット飯 プレミアムのご購読ですでに開いています。

優良食堂バックナンバー →
リポジトリ詳細🧪 ひと言で味見する