Guizang PPT Skill：Claude Codeで美しいHTMLスライドデッキを直接作成する

長い記事、製品分析、あるいは個人的なエッセイを、PowerPointを開いてテキストボックスと格闘することなく、本当にデザインされたスライドデッキに変換したいと思ったことはありませんか？あなただけではありません。それはまさにGuizang PPT Skillが解決する問題です。AI思想家・歸藏によって作成され、実際のオフライン講演を通じて磨かれてきたこのオープンソースのスキルは、Claude Code、Codex、および類似のエージェント環境内で動作し、美しい単一ファイルHTMLプレゼンテーションを生成します。これは単なるおもちゃでもありません。2つの異なるビジュアルシステム、22の固定レイアウト、本格的なプレゼンターモード、さらに表紙や図のためのオプションのAI画像生成も備えています。

なぜPPTXではなくHTMLなのか？

このプロジェクト全体は、HTMLこそがAIエージェントがスライドを作成するのに理想的な形式である、というシンプルな賭けに基づいています。HTMLとCSSはプレーンテキストなので、エージェントはファイルを直接読み取り、編集、検証できます。Markdownスライドデッキとは異なり、HTMLではピクセル単位でのレイアウト制御、アニメーション、レスポンシブデザインが可能です。また、PPTXとは異なり、最終出力は単一のファイルになるため、任意のブラウザで開いたり、プレゼンしたり、スクリーンショットを撮ったり、同僚に送信したりできます。ビルドステップなし、サーバーなし、依存関係地獄もありません。

しかし最大の利点は品質管理です。このスキルには、レイアウトのオーバーフローや配置、画像が想定された枠内に収まるかなどをチェックする検証スクリプトが含まれています。つまり、AIは単に推測しているのではなく、Playwrightが利用可能な場合には実際のレンダリング結果を測定しているのです。

異なるストーリーのための2つのビジュアルスタイル

このスキルには2つのスタイルシステムが付属しています。スタイルAは「電子雑誌×電子インク」と呼ばれています。『Monocle』誌とミニマリストなコード美学が融合したイメージです。ナラティブ、意見、個人的な共有、そして人柄が重要なものに最適です。章扉、データ記述ページ、画像グリッド、パイプライン、比較などのための10の柔軟なレイアウトがあります。選択できるテーマは、クラシックインク、藍色磁器、フォレストインク、クラフト紙、デューンという、インクから着想を得た5つです。

スタイルBは正反対の方向性、すなわちスイス・インターナショナルスタイルです。厳密なグリッド、高彩度のアンカーカラー1色、直角、ヘアライン罫線、劇的なタイプスケールを特徴としています。このスタイルは、事実、製品、分析、方法論のために作られています。カバーやステートメントからKPIタワー、ループ図、デュオ比較、クロージングマニフェストまで、22の固定レイアウトがあります。アンカーカラーのテーマは、クライン・ブルー、レモンイエロー、レモングリーン、セーフティオレンジの4色です。色を指定せずにスイスデッキを依頼すると、エージェントはデフォルトでクライン・ブルーを推奨します。

このデュアルシステムにより、毎回デザインをゼロから考え直す必要はありません。どの雰囲気にしたいかを言うだけで、スキルが一貫した美学システムを適用します。たとえば独自のカスタムhex値の禁止のような厳格なルールも含まれます。デザイン感覚を守ることのほうが、誰でも自由に色を使えるようにすることよりも重要だからです。

30秒で始める

インストールは驚くほど簡単です。推奨されるワンライナーは次のとおりです。

すべてをAIに任せたい場合は、以下をClaude Code、Cursor、またはシェルアクセスを持つエージェントに貼り付けてください：

guizang-ppt-skillをインストールしてください。https://github.com/op7418/guizang-ppt-skill を ~/.claude/skills/guizang-ppt-skill にクローンしてください。インストール完了後、SKILL.md、assets/、references/ が存在するか確認してください。

手動で行う場合は、次のコマンドを実行するだけです：

インストールが完了すると、次のようなリクエストを行うとスキルが自動的に起動します：

実際のワークフローの流れ

このスキルの本当に凄いところは、それが漠然としたプロンプトではなく、構造化されたワークフローである点です。デッキを依頼すると、エージェントはいくつかのステップを実行します。スタイルの選択、7つの質問リストによる要件の明確化、assets/template.htmlまたはassets/template-swiss.htmlからの適切なテンプレートのコピー、リズム表に沿ったコンテンツの記入、必要に応じた画像生成、発表者ノートの作成、検証チェックの実行、そしてブラウザでのデッキプレビューです。

典型的なリクエストは、例えば次のようなものです。「この製品分析ドキュメントを電子雑誌風のPPTにしてください。重点的に見解とナラティブのリズムを強調したいのです。」エージェントは、ページトランジションやテーマカラー、発表者ノート、プレゼンターランタイムを組み込んだ、マガジンテンプレートによる単一ファイルHTMLデッキを生成します。

実際に役立つプレゼンターモード

意外にも多機能なのが、組み込みのプレゼンターモードです。右下のPをクリックすると、プレゼンタービューが専用で開き、別タブには聴衆向けのクリーンなウィンドウが表示されます。現在と次のスライドのライブ16:9プレビュー、目的とトークポイントを備えた構造化ノート、経過時間と全体ペースのためのタイマー、ページごとの実際の時間をローカルに記録するリハーサルモードが利用できます。レーザーポインター、描画ハイライター、ワンクリックで黒/白画面に切り替えるといった実用的なツールもあります。インターネットが切れても、これらが壊れることはありません。すべてはローカルなHTMLとブラウザAPIで動作しており、クラウドサービスではないからです。

AI生成画像とカバーアート

Codex内では、このスキルはGPT-Image 2.0 / GPT-M 2.0を活用して、ドキュメンタリースタイルの写真、インフォグラフィックス、フローチャート、システム図、UIモックアップを生成できます。重要なルールとして、画像はスタンドアローンのポスターではなく埋め込みアセットです。したがって、画像自体にフッター、タイトル、装飾的な枠を付けてはいけません。このスキルはまた、同梱の背景ライブラリを使用して、乱雑なスクリーンショットをクリーンなプレゼンテーション用アセットに作り直す方法も理解しています。手作業で毎スライドを再構築することなく一貫したビジュアルが必要な場合には、非常にありがたい機能です。

スライド以外にも、同じビジュアルシステムはSNSカバーにまで広がります。WeChat公式アカウントのヒーロー画像（21:9）、共有カード（1:1）、Xiaohongshuのカバー（3:4）、横型ビデオカバー（16:9）を、デッキのテーマカラーとタイポグラフィに合わせて生成できます。

いつ使うべきか（いつ使うべきでないか）

Guizang PPT Skillは、オフライン講演、社内プレゼンテーション、AIプロダクト発表、デモデイ、そして個人的な声の強いスピーチで力を発揮します。一方、情報量が多いスプレッドシートのダッシュボードや、研修用コースウェア、あるいは大規模なリアルタイムコラボレーションを必要とするデッキには向いていません。設計上、出力は静的HTMLファイルだからです。

このプロジェクトのデザイン哲学は新鮮です。派手さよりも抑制、装飾よりも構造、そして画像は安定したアスペクト比を持つ第一級の要素として扱うことを重視しています。マシンの動作が重い場合は、Bキーを押すとWebGL/canvasアニメーションを無効にし、低負荷の静的モードに切り替えることもできます。

次のステップ

Guizang PPT Skillはオープンソースプロジェクトであり、より多くのケーススタディ、スイス検証ルールの拡充、カバー仕様の拡張などを含む活発なロードマップを備えています。「AIアシスタントがスライドをそのまま作ってくれたらいいのに」と思ったことがあるなら、今すぐ試す価値のある確かなツールです。上記のnpxコマンドでインストールし、エージェントに記事を渡せば、ブラウザからそのままプレゼンできる洗練されたHTMLデッキが生成されるのを見ることができます。