グイザングHTML PPTエージェントスキル

Claude Code、Codex、および類似のコーディングエージェント環境向けのエージェントスキルです。単一ファイルのHTML水平スワイプデッキ、デッキビジュアル、ソーシャルカバーページを生成します。

2つのビジュアルシステムが付属します：

• スタイルA：エディトリアルマガジン × 電子インク。コードが縫い込まれたMonocleを想像してください。ナラティブトーク、意見、サロン、個人的な声に最適です。
• スタイルB：スイス国際タイポグラフィックスタイル。グリッド優先、1つの高彩度アンカーカラー、鋭い長方形、ヘアラインルール、極端なタイプコントラスト。事実、製品、分析、フレームワークに最適です。

Guizang が「一人会社：AIによって折りたたまれた組織」や「新しい働き方」などのオフライントークから蒸留しました。それらのデッキで遭遇したすべての落とし穴は checklist.md に記録されています。

旧テーマ · スタイルA エディトリアルマガジン

新テーマ · スタイルB スイスインターナショナル

30秒で始める

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

または、シェルアクセスがあるAIエージェントに以下を貼り付けます：

Install guizang-ppt-skill for me. Clone https://github.com/op7418/guizang-ppt-skill into ~/.claude/skills/guizang-ppt-skill, then verify that SKILL.md, assets/, and references/ exist.

既にインストール済みの場合は、以下で更新します：

Update guizang-ppt-skill for me. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, then tell me the latest commit.

その後、エージェントに以下を依頼します：

Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals.

その他の便利なプロンプト：

Turn this Markdown file into an editorial magazine-style presentation.
Create a 21:9 social cover from the core idea of this deck.
Redesign this product screenshot as a 16:10 slide visual.

得られるもの

• 🖋 2つのビジュアルシステム：スタイルAのエディトリアルストーリーテリング、スタイルBの事実に基づくスイス構造
• 📐 水平スワイプナビゲーション：← → 矢印 / スクロールホイール / タッチスワイプ / 下部ドット / ESCでインデックス表示
• 🧩 スタイルA 10レイアウト：カバー、ディバイダー、ビッグナンバー、画像/テキスト、画像グリッド、パイプライン、比較など
• 🧱 スタイルB 22の固定レイアウト：カバー、ステートメント、KPIタワー、ループ図、デュオ比較、イメージヒーロー、クロージングマニフェストなど
• 🎨 厳選されたテーマプリセット：スタイルA用の5つの電子インクテーマ、スタイルB用の4つのスイスアンカーカラーテーマ
• 🖼 オプションのCodex画像フロー：GPT-Image 2.0 / GPT-M 2.0でドキュメンタリー写真、インフォグラフィック、フロー図、システムマップ、UIシーンを生成し、テンプレートに安全な比率で挿入
• 📰 ソーシャルカバー：21:9のWeChatカバー画像、1:1の共有カード、3:4の小紅書（RED）カバー、動画サムネイル、および関連バリエーションを生成
• 📴 低電力静止モード：B キーを押すとWebGL / Canvasアニメーションを静止ビジュアルに切り替え
• 📄 単一HTMLファイル — ビルド不要、サーバー不要、ブラウザで直接開く

適している / 適していない

✅ 適している：オフライントーク、業界基調講演、プライベートサロン、AI製品発表、デモデー、強い個人的声のあるプレゼンテーション

❌ 適していない：データ量の多い表、トレーニングデッキ（密度が低すぎる）、マルチユーザー共同編集（静的HTML）

一般的なユースケース

HTMLデッキの理由

• エージェントネイティブ編集：HTML / CSSはプレーンテキストなので、エージェントが直接読み取り、編集、検証できます。
• Markdownよりも高いビジュアル密度：精密なレイアウト、配置、モーション、インタラクティビティ、カバー形式。
• 軽量な配信：1つのHTMLファイルを開いてプレゼンテーション、送信、スクリーンショット、または録画できます。
• より良い品質チェック：スイスバリデーターはレイアウトのずれ、安全でない画像配置、中央揃えの本文タイトル、SVGテキストの罠を検出できます。
• 出力全体で一貫したビジュアルシステム：デッキ、生成ビジュアル、カバー、スクリーンショットの再設計が同じスタイルルールを共有できます。

プラットフォームサポート

インストール

オプション1：ワンラインインストール（推奨）

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

オプション2：AIに以下を貼り付ける

Install the guizang-ppt-skill Claude Code skill for me. Steps:

1. Make sure ~/.claude/skills/ exists (create if not)
2. Run git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Verify: ls ~/.claude/skills/guizang-ppt-skill/ should show SKILL.md, assets/, references/
4. Tell me when done. Later, saying things like "make me a magazine-style deck" will trigger this skill.

上記のブロックをClaude Code / Cursor / シェルアクセスがある任意のAIエージェントに貼り付けると、インストールが行われます。

オプション3：手動CLI

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

トリガー方法

インストール後、Claude Codeが自動的にスキルを検出します。トリガーフレーズ：

• "マガジンスタイルのデッキを作って"
• "スイススタイルのデッキを作って"
• "水平スワイプデッキを生成して"
• "エディトリアルマガジンスタイルのプレゼンテーション"
• "私のトーク用の電子インクスライド"
• "この記事から21:9のWeChatカバーを作成"
• "このデッキから1:1の共有カードを作成"

ワークフロー

スキルは構造化されたワークフローです。エージェントが各ステップを案内します：

1. スタイルを選択 — スタイルAエディトリアルマガジン、またはスタイルBスイスインターナショナル
2. 意図を明確化 — 7つの質問チェックリスト：スタイル、聴衆、所要時間、ソース資料、画像/スクリーンショット、テーマ、厳しい制約
3. テンプレートをコピー — スタイルAは assets/template.html を使用、スタイルBは assets/template-swiss.html を使用
4. コンテンツを埋める — リズムプランを作成し、一致するレイアウトスケルトンを選択して適応
5. オプションの画像生成 — Codexで、GPT-Image 2.0 / GPT-M 2.0の画像を使用するかどうかを尋ね、ページに適切な比率で挿入
6. 自己チェック — references/checklist.md と照合。P0の問題はすべてパスする必要があります。スイスデッキはレイアウトバリデーターもパスする必要があります。
7. プレビュー — ブラウザでHTMLを開く
8. 反復 — インラインスタイルを使用してフォントサイズ、高さ、間隔を調整

詳細仕様は SKILL.md を参照。

スタイルB スイス

スイステーマは単なるCSSスキンではなく、厳格なレイアウトシステムです。

• 22の名前付きレイアウト：本文スライドは S01 から S22 を使用する必要があります。新しい構造を考案しないでください。
• 4つのアンカーカラー：インターナショナルクライン青、レモンイエロー、レモングリーン、セーフティオレンジ
• グリッドロック：16カラムグリッド、鋭い長方形、1pxのヘアライン、影なし、グラデーションなし、角丸カードなし
• 中国語タイトルのスケーリング：全見出しが中国語の場合は一段階小さくし、コンテンツと画像のスペースを確保
• 画像/テキストの下部揃え：左右の画像レイアウトで、テキストと画像ブロックの下部を揃えます。ページネーションコントロールに干渉しないようにします。
• 画像スロット：画像はテンプレート定義の data-image-slot 領域に配置し、多くの場合21:9または16:10で生成されます。
• 厳格なバリデーション：バリデーターは中央揃えの本文タイトル、実験的なレイアウト、表示可能なSVGテキスト、スロット外に配置された画像を検出します。

スイスバリデーション：

node scripts/validate-swiss-deck.mjs path/to/index.html

Codex画像フロー

Codexでは、最初のデッキドラフトが準備できた後、エージェントは生成ビジュアルが必要かどうかをユーザーに尋ねることができます。確認が取れたら、画像タイプまたはスタイルを選択します。一般的なタイプは次のとおりです：

• ドキュメンタリー写真：富士フィルム/ライカのような現実世界のシーンで、人間味を加える
• インフォグラフィック / フロー図 / 比較チャート / システムマップ：写真では説明しにくい概念向け
• スクリーンショットのフレーミング / スクリーンショットの再設計：生のスクリーンショットを保持し、最初にバンドルされた背景アセットとCleanShot Xスタイルのキャンバスを使用します。再構築が必要な場合のみUIシーン生成を使用します。
• データポスター / チャート：キー数値を挿入可能なビジュアルアセットに変換
• 複数画像の合成：無関係な3つの16:9画像がグリッドを壊してしまうような超ワイドスロットに便利

生成画像は4つの基本ルールに従う必要があります：

• 画像を埋め込みアセットとして扱い、独立したスライドとして扱わない：フッター、ページ下部、タイトル、ページ番号、コーナーマーク、署名、または装飾的な境界線を含めない
• デッキの言語に合わせる：中国語デッキではインフォグラフィック内部に中国語ラベルを使用、英語デッキでは英語ラベルを使用
• 生成前にスロット比率を合わせる：多くのスイスのヒーロースロットでは21:9、一般的なメインビジュアルでは16:9 / 16:10、UIシーンでは16:10、画像グリッドでは固定の等しい高さ
• 生のスクリーンショットを忠実に保つ必要がある場合は、最初に references/screenshot-framing.md を読み、バンドルされた assets/screenshot-backgrounds/ の背景とプログラムによるスケーリング、パディング、および配置をデフォルトで使用し、スクリーンショットを再描画しない

画像プロンプトは references/image-prompts.md にあります。スクリーンショットのフレーミングは references/screenshot-framing.md にあります。

カバー生成

スキルは記事やデッキのアイデアをプラットフォームカバーに変換することもできます：

• WeChatメインカバー：21:9、見出し優先、1つのビジュアルアンカー付き
• WeChat共有カード：1:1、21:9カバーとビジュアル的に対になる
• 小紅書（RED）カバー / カルーセル：3:4、大きなタイトル、一貫したタイプスケール
• 動画サムネイル：16:9、タイトル + サブタイトル + 1つの焦点ビジュアル

同じルールが適用されます：いくつかの強いキーワードを使い、タイトルをビジュアルの中心に保ち、キャンバスを本文コピーで埋め尽くさないこと。

プロンプト例

これらのプロンプトのいずれかをエージェントにコピーし、記事、Markdownファイル、または画像アセットを添付します：

Create an 8-slide Swiss-style deck from this article, with 3 generated visuals matched to the template image slots.

Turn this product analysis document into an editorial magazine-style deck with a strong narrative rhythm.

From this deck's core idea, create two covers: a 21:9 main cover and a visually paired 1:1 share card.

Redesign these product screenshots into consistent 16:10 slide visuals. Preserve key UI information; do not add slide titles or footers inside the images.

ディレクトリ

guizang-ppt-skill/
├── SKILL.md              ← メインスキルファイル：ワークフロー、原則、よくある間違い
├── README.md             ← 中国語README
├── README.en.md          ← このファイル
├── assets/
│   ├── template.html         ← スタイルAエディトリアルマガジンテンプレート
│   ├── template-swiss.html   ← スタイルBスイステンプレート
│   └── screenshot-backgrounds/ ← バンドルされたWebPスクリーンショット背景: 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← スイスレイアウトバリデーター
└── references/
    ├── components.md     ← コンポーネントカタログ (タイプ、色、グリッド、アイコン、コールアウト、統計、パイプライン)
    ├── layouts.md        ← 10個のレイアウトスケルトン (貼り付け可能)
    ├── layouts-swiss.md  ← 22個の固定スイスレイアウト
    ├── swiss-layout-lock.md ← スイスの忠実度とレイアウトの厳格なルール
    ├── themes.md         ← 5つのテーマプリセット (選択、カスタマイズ不可)
    ├── themes-swiss.md   ← 4つのスイスアンカーカラーテーマ
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0の画像タイプ、比率、基本プロンプト
    ├── screenshot-framing.md ← CleanShot Xスタイルのスクリーンショットフレーミングセマンティクス
    └── checklist.md      ← 品質チェックリスト (P0 / P1 / P2 / P3 ティア)

テーマプリセット

references/themes.md から選択します。カスタムの16進カラー値は使用できません — 選択の自由よりも美的感覚を守ることが重要です。

スタイルA エディトリアルテーマ

テーマの切り替えは、template.html の :root{} ブロックの上部にある6つの変数を置き換えるだけです — 他のすべてのCSSは var(--...) を通じて流れます。

スタイルB スイステーマ

references/themes-swiss.md から選択します。こちらでもカスタムの16進カラー値は使用できません。

ユーザーが色を指定せずにスイススタイルのデッキを要求した場合は、デフォルトでインターナショナルクライン青にします。

コアデザイン原則

1. フラッシュよりも抑制 — WebGLの背景はヒーローページにのみにじみ出ます
2. 装飾よりも構造 — 情報階層は、影や浮遊カードではなく、タイプサイズ + 書体 + グリッドの余白によって作られます
3. 画像は第一級市民 — 本文コンテンツ領域に揃え、比率を安定させ、下部のみを切り取り、上部と側面を保持します
4. 生成ビジュアルはアセット — コアの写真/チャート/UIのみを保持し、スライドのタイトル、フッター、コーナーマークを画像内にレンダリングしない
5. リズムはヒーローページに宿る — ヒーロー/非ヒーローの交互配置が目の疲れを防ぎます
6. 動的エフェクトはオプションでなければならない — B キーで静止モードに切り替え、アニメーションが読書の負担にならないようにします
7. 用語は一貫させる — スキルはSkillsのまま、混在訳はしない
8. スイスレイアウトは固定されたまま — スタイルBは、無関係なページを考案するのではなく、元の22ページレイアウトシステムを復元して再利用する必要があります

ビジュアルリファレンス

• Monocle 雑誌レイアウト
• YC ギャリー・タン — 「細いハーネス、太いスキル」
• マッシモ・ヴィネリ / ヘルベチカ・フォーエバー / スイス国際タイポグラフィックスタイル
• 帰蔵のオフライントークデッキシリーズ

ロードマップ

• より多くの実例と開けるHTMLデッキデモを追加
• より多くの出版プラットフォーム向けのカバー形式を拡張
• スイスレイアウトのバリデーションルールを追加
• スクリーンショットの再設計とインフォグラフィック生成のワークフローを改善
• WorkBuddyなどのマーケットプレイス固有のバリアントを準備
• カスタムカラーを制限しつつ、より厳選されたテーマパックを追加

FAQ

PPTXにエクスポートできますか？ 主な出力はHTMLです。ブラウザでプレゼンテーションしたり、スクリーンショットを撮ったり、録画したりできます。PPTX変換は別のワークフローとして可能ですが、現時点では主要なパスではありません。

なぜカスタムカラーは使用できないのですか？ スキルは安定したビジュアル出力のために設計されています。任意の色はしばしばシステムを壊すため、デッキは厳選されたプリセットを使用する必要があります。

自分のレイアウトを追加できますか？ はい。スタイルAのレイアウトは references/layouts.md で拡張できます。スタイルBはより厳格で、template-swiss.html、layouts-swiss.md、swiss-layout-lock.md、およびバリデーターを一緒に更新する必要があります。

Codex画像生成は必須ですか？ いいえ。デッキは生成画像なしでも機能します。画像フローは、写真、インフォグラフィック、UIシーン、またはカバーが必要な場合にのみ使用されます。

スキルを更新するにはどうすればよいですか？ インストールコマンドを再度実行するか、ローカルのスキルディレクトリで git pull を実行します。

貢献

バグ、レイアウトの問題、新しいレイアウトのリクエスト — IssueとPRを歓迎します。優先事項：

• 最初に新しいクラスを template.html に追加し、layouts.md が未定義のクラスを参照しないようにする
• template-swiss.html を変更する場合は、layouts-swiss.md と swiss-layout-lock.md を一緒に更新する
• スイスのルールを追加する場合は、scripts/validate-swiss-deck.mjs を更新する
• 落とし穴を適切なP0 / P1 / P2 / P3 ティアの checklist.md に記録する
• 新しいテーマカラーは推奨ユースケースとともに themes.md に追加する

ライセンス

MIT © 2026 op7418