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

> このPPTエージェントスキルを使用して、2つの異なるビジュアルスタイルでHTMLプレゼンテーションを生成し、画像生成やマルチプラットフォームのカバー作成を完備します。数秒でプロフェッショナルで視覚的に魅力的なプレゼンテーションを作成できます。

- Canonical: https://nanoskill.ai/ja/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/ja/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: ja
- Source type: github
- Popularity signal: 11121

## Sources

- https://github.com/op7418/guizang-ppt-skill

## Install

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

## About

グイザングHTML PPTエージェントスキルは、AIエージェントが手軽にプロフェッショナルな単一ファイルのHTMLプレゼンテーションを生成することを可能にします。Claude CodeやCodexなどのプラットフォーム向けに設計されたこのスキルは、視覚的に魅力的なコンテンツの作成を合理化し、物語重視の「電子雑誌」スタイルと事実重視の「スイス国際主義」スタイルという2つの異なる美的システムを提供します。ユーザーは、記事を魅力的なデッキに素早く変換し、詳細な製品分析を作成し、一貫性のあるマルチプラットフォームカバーを生成しながら、常に高い視覚品質を維持することができます。

このスキルは、複雑な設定なしで簡単に共有・閲覧できる軽量なHTML出力を提供することで際立っています。Codex内のGPT-Image 2.0 / GPT-M 2.0を通じてAI駆動の画像生成などの高度な機能を統合し、コンテキストに応じたビジュアルやインフォグラフィックを可能にします。さらに、特にスイススタイル向けに構造化されたレイアウトと厳格なデザイン原則を提供し、スライドからソーシャルメディアのカバーまで、生成されるすべてのコンテンツに洗練された一貫性のある外観を保証します。

社内講演や製品発表から個人共有、メソッドプレゼンテーションまで、幅広いシナリオに理想的で、グイザングHTML PPTエージェントスキルはコンテンツ作成ワークフローを簡素化します。長文コンテンツを簡潔なプレゼンテーションに変換し、製品のスクリーンショットを特定のテンプレート比率に合わせて強化し、すべてのコミュニケーションチャネルで一貫したビジュアルアイデンティティを確保することを可能にします。構造化されたワークフローと事前定義されたビジュアルルールに重点を置くこのスキルは、最小限の労力で高品質で美的に優れた結果を保証します。

## Key features

- **デュアルビジュアルシステム**: 物語性と個人的な表現のための「スタイルA：電子マガジン × E-ink」か、事実、製品分析、方法論のための「スタイルB：スイス・インターナショナリズム」を選択して、メッセージを効果的に伝えます。
- **単一ファイルHTML出力**: ビルドプロセスやサーバーを必要としない軽量で自己完結型のHTMLプレゼンテーションを生成し、あらゆるWebブラウザで直接開いたり、共有したり、デモンストレーションしたりするのが容易になります。
- **AIエージェント互換性**: Claude Code、Codex、およびシェルアクセスを持つ他のAIエージェント向けに設計されており、自然言語コマンドを通じてHTML PPTのシームレスな生成、修正、反復が可能です。
- **Codex画像生成**: Codex内でGPT-Image 2.0 / GPT-M 2.0を統合して、高品質でコンテキストに応じた画像、インフォグラフィック、UIシナリオを生成し、完璧にスケーリングしてスライドに挿入します。
- **マルチプラットフォームカバー生成**: プレゼンテーションのコアコンテンツに基づいて、WeChat公式アカウント（21:9、1:1）、Xiaohongshu（3:4）、動画アカウント（16:9）など、さまざまなプラットフォーム向けに一貫性のある視覚的に統一されたカバーを自動的に作成します。

## Use cases

- **記事をプレゼンテーションに変換**: 長文の記事やドキュメントを、スピーチ、内部講演、またはプライベート共有セッション用の簡潔で魅力的なHTML PPTに変換し、核心的なアイデアを抽出して説得力のある物語に構成します。
- **プロフェッショナルな製品分析を作成**: 構造化された「スタイルB：スイス・インターナショナリズム」を利用して、事実、データ、明確な視覚的コミュニケーションに焦点を当てた製品分析、方法論、またはAI製品の発売を提示します。
- **一貫性のあるマルチプラットフォームコンテンツをデザイン**: プレゼンテーション、付随画像、さまざまなソーシャルメディアカバー全体で統一されたビジュアルアイデンティティを生成し、すべてのコミュニケーションチャネルでブランドの一貫性とインパクトを確保します。
- **PPT用のスクリーンショットを強化**: 製品のスクリーンショットをプレゼンテーションテンプレートに合うように再設計および適応させ、重要な情報を維持しながら、プロフェッショナルなHTML PPTに適した一貫性のあるビジュアルスタイルを実現します。

## Result preview

このエージェントスキルによって記事から生成された実際のPPTをご覧ください。

![guizang-ppt-demo01](https://file.nanoskill.ai/guizang-ppt-demo01)

![guizang-ppt-demo02](https://file.nanoskill.ai/guizang-ppt-demo02)

![guizang-ppt-demo-03](https://file.nanoskill.ai/guizang-ppt-demo-03)

## Result walkthrough

### ステップ1：インストール

エージェントにスキルを追加します。

![guizang-ppt-step-1](https://file.nanoskill.ai/guizang-ppt-step-1)

### ステップ2：コンテンツを提供

トピックやメモを入力するか、既存の資料（レポート、アウトライン、アイデアなど）をアップロードします。

![guizang-ppt-step-2](https://file.nanoskill.ai/guizang-ppt-step-2)

### ステップ3：あなたのPPTを入手

直接使用できるHTMLプレゼンテーションを確認します。

![guizang-ppt-step-03](https://file.nanoskill.ai/guizang-ppt-step-03)

## Skill definition

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

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

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

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

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

![スタイルA エディトリアルマガジンのプレビュー](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-11.png)

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

![スタイルB スイスインターナショナルのプレビュー](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-12.png)

## 30秒で始める

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

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

```text
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.
```

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

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

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

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

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

```text
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）

## 一般的なユースケース

| タスク | 推奨フロー |
|------|------------------|
| 長文記事からトークデッキへ | コアな主張を抽出し、6～10枚のスライドリズムを構築 |
| フレームワーク / 製品分析 | 固定レイアウトと21:9のヒーロービジュアルを持つスタイルBスイスを使用 |
| 個人トーク / 意見記事 | より強いナラティブリズムのためのスタイルAエディトリアルマガジンを使用 |
| デッキビジュアル | Codexで、写真、インフォグラフィック、フロー図、システムマップ、またはUIシーンを生成 |
| ソーシャルカバー | 同じアイデアから21:9のメインカバー、1:1の共有カード、3:4の縦型カバー、動画サムネイルを生成 |
| スクリーンショットの正規化 | スライドに挿入する前に、生のスクリーンショットをテンプレートに安全な比率に再設計 |

## HTMLデッキの理由

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

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

| プラットフォーム | ステータス | 備考 |
|----------|--------|-------|
| Claude Code | 対応 | HTMLデッキの作成と反復のためのネイティブスキルワークフロー |
| Codex | 対応 | デッキ生成、画像生成、ブラウザベースのビジュアルQAに適しています |
| Cursor / その他のローカルエージェント | 動作 | ファイルシステムアクセスとシェル実行が必要 |
| WorkBuddy | 適応中 | マーケットプレイス対応バージョンを別途準備中 |
| プレーンチャットボット | 非推奨 | ファイルシステムとブラウザプレビューがないと、完全なデッキ生成は安定させにくい |

## インストール

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

```bash
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

```bash
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`](./SKILL.md) を参照。

## スタイルB スイス

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

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

スイスバリデーション：

```bash
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/image-prompts.md) にあります。スクリーンショットのフレーミングは [`references/screenshot-framing.md`](./references/screenshot-framing.md) にあります。

## カバー生成

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

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

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

## プロンプト例

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

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

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

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

```text
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 エディトリアルテーマ

| プレビュー | テーマ | コアカラーと最適な用途 |
|---------|-------|--------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-12.png" width="260" alt="インククラシックテーマのプレビュー"> | 🖋 **インククラシック** | `#0a0a0b` / `#f1efea`。汎用デフォルト、商用発表、迷ったときはこれ。 |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-12.png" width="260" alt="インディゴポーセリンテーマのプレビュー"> | 🌊 **インディゴポーセリン** | `#0a1f3d` / `#f1f3f5`。テック、研究、AI、テクニカルキーノート。 |
| <img src="https://file.nanoskill.ai/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657-11.png" width="260" alt="フォレストインクテーマのプレビュー"> | 🌿 **フォレストインク** | `#1a2e1f` / `#f5f1e8`。自然、持続可能性、文化、ノンフィクション。 |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-12.png" width="260" alt="クラフトペーパーテーマのプレビュー"> | 🍂 **クラフトペーパー** | `#2a1e13` / `#eedfc7`。ノスタルジック、ヒューマニスト、文学、インディーズ雑誌。 |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-12.png" width="260" alt="デューンテーマのプレビュー"> | 🌙 **デューン** | `#1f1a14` / `#f0e6d2`。アート、デザイン、クリエイティブ、ファッション、ギャラリー風デッキ。 |

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

### スタイルB スイステーマ

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

| プレビュー | テーマ | アンカーカラーと最適な用途 |
|---------|-------|---------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-12.png" width="260" alt="インターナショナルクライン青スイステーマのプレビュー"> | 🔵 **インターナショナルクライン青** | `#002FA7`。デフォルト、商用発表、AI製品、フレームワーク。 |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-12.png" width="260" alt="レモンイエロースイステーマのプレビュー"> | 🟡 **レモンイエロー** | `#FFD500`。ユース、スポーツ、小売、消費財、Y2Kレトロ。 |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-12.png" width="260" alt="レモングリーンスイステーマのプレビュー"> | 🟢 **レモングリーン** | `#C5E803`。エコロジー、持続可能性、健康、Z世代ブランド。 |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-12.png" width="260" alt="セーフティオレンジスイステーマのプレビュー"> | 🟠 **セーフティオレンジ** | `#FF6B35`。アラート、ニュース、産業トピック、スポーツ、エネルギッシュなテーマ。 |

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

## コアデザイン原則

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

## ビジュアルリファレンス

- [*Monocle*](https://monocle.com) 雑誌レイアウト
- 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](https://github.com/op7418)

## FAQ

### Guizang HTML PPTエージェントスキルとは何ですか？

Guizang HTML PPTスキルは、単一ファイルのHTMLプレゼンテーション、付随画像、およびマルチプラットフォームカバーを生成するために設計された、AIエージェント対応ツールです。電子マガジンとスイス・インターナショナリズムの2つの異なるビジュアルスタイルを提供します。

### Guizang HTML PPTエージェントスキルをインストールするにはどうすればよいですか？

ターミナルで \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` を実行するか、シェル対応のAIエージェントにリポジトリをスキルディレクトリにクローンするよう指示することで、インストールできます。

### HTML PPTの色をカスタマイズできますか？

いいえ、カスタムHEX値は使用できません。スキルは、美的な一貫性と高品質の出力を確保するために、スタイルA（電子マガジン）とスタイルB（スイス・インターナショナリズム）の両方にプリセットテーマの選択肢を提供します。

### 提供される2つのビジュアルスタイルは何ですか？

スタイルA「電子マガジン × E-ink」は、ストーリーテリング、意見、個人的な表現に最適です。スタイルB「スイス・インターナショナリズム」は、事実、製品分析、方法論をグリッドベースのミニマルなデザインで提示するのに最適です。

### HTML PPTをPPTX形式でエクスポートすることは可能ですか？

主な成果物はHTMLであり、ブラウザで直接デモンストレーションしたり、スクリーンショットを撮ったり、録画したりできます。直接PPTXにエクスポートすることは主要な機能ではありませんが、必要に応じてHTMLページを変換用のビジュアルドラフトとして使用できます。

### このスキルはHTML PPTの画像生成をサポートしていますか？

はい、Codex環境で使用すると、このスキルはGPT-Image 2.0 / GPT-M 2.0を活用して、さまざまな種類の画像、インフォグラフィック、UIシナリオを生成し、それらをテンプレートの比率に従ってプレゼンテーションに挿入します。
