guizang-ppt-skill - HTMLを出力するオープンソースのWebページPPT生成スキル。 - AiBoss

guizang-ppt-skillとは何ですか？

guizang-ppt-skillは、プロンプトを水平ページめくり機能付きの単一ファイルHTMLスライドショーに変換するオープンソースのClaude Code/Claude Agentスキルです。guizang-ppt-skillのビジュアルスタイルは、「電子雑誌×電子インク」をコンセプトとしており、『Monocle』や『The Guardian』といった印刷雑誌のレイアウトやKindleの読書体験からインスピレーションを得ています。WebGLによる流動的な背景、セリフ体の見出し、厳密なグリッドシステムを統合し、ダブルクリックで開くことができる単一ファイルHTMLドキュメントを生成するため、ビルドツールやサーバーは不要です。

guizang-ppt-skillの主な機能

10種類のページレイアウトオープニングカバー、チャプターカバー、データポスター、左側にテキストを配置した画像レイアウト、画像グリッド、パイプラインフロー、サスペンスフルな質問、大きな引用文、ビフォーアフター比較、テキストと画像を組み合わせたレイアウトなどを提供します。
5種類のプリセットテーマカラー以下のカテゴリーのインクを提供しています：クラシック（一般）、インディゴポーセリン（テクノロジー／人工知能）、フォレストインク（自然／人文科学）、クラフトペーパー（ノスタルジア／文学）、デューン（アート／創造性）。
WebGLの動的背景表紙のヒーローページには繊細な流動／拡散効果が用いられており、本文ページでは余白が控えめに使われている。
雑誌レベルのページめくり体験キーボードの左右矢印キー、マウスホイール、タッチスクリーンのスワイプ、下部ドットナビゲーション、およびESCキーによるサムネイルインデックスに対応しています。
3段階のフォント分業セリフ体の見出し（視点）＋サンセリフ体の本文（情報）＋等幅フォントのメタデータ（ページ番号／章番号）。
単一ファイル形式のHTML出力ビルド不要、依存関係なし、ブラウザで直接開き、フォントとアニメーションは他の場所にコピーしてもそのまま維持されます。

guizang-ppt-skillの使い方

インストール方法
- 方法1（推奨）Claude Code/CursorなどのAIエージェントに以下のコマンドを送信してください。
  
  代わりにインストールしてください。 guizang-ppt-skill、埋め込む git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt検証ディレクトリには SKILL.md、assets/、references/ 3つのアイテム。
- 方法2（手動）上記のgit cloneコマンドをコマンドラインで実行してください。
使用手順
- トリガースキルクロードに伝えるには、「雑誌風のPPTを作成してください」や「横スクロール式のデッキ」などのキーワードを使用してください。
- 要求事項の明確化クロードが提起した6つの質問（視聴者の状況、共有時間、オリジナル素材、画像要件、テーマカラーの選択、厳しい制約）に答えてください。
- アウトラインの配置クロードはまずアウトラインとテーマのリズム表を出力し、確認後にのみコードを生成するため、80%の手戻りを防ぐことができる。
- コンテンツを入力する：から references/layouts.md レイアウトの骨組みを選択して貼り付けます template.htmlテキストと画像のパスを置き換えてください。
- 画像管理画像アップロード images/ フォルダ名は、次の規則に従って命名する必要があります。「ページ番号にゼロを詰めた値 + 英語の意味」(例: ...)。 03-figma.png同じ名前で上書きするだけで、画像を失うことなく置き換えることができます。
- 自己チェックとプレビュー：比較 references/checklist.md P0レベルの問題を確認するには、ブラウザでプレビューを直接開き、インラインスタイルを使用してフォントサイズと間隔を微調整してください。

guizang-ppt-skillの重要な情報と使用要件

動作環境Claude Code、Claude Agent、およびシェル権限を持つあらゆるAIエージェントをサポートします。
製品フォーマットローカルサーバーを必要とせず、ダブルクリックするだけでブラウザで開くことができる単一ファイルのHTMLファイルを提供します。
画像ガイドライン写真はJPG形式、スクリーンショットはPNG形式にしてください。各画像の幅は最低1600ピクセルにしてください。名前はゼロで埋めてください（1ではなく01）。
テーマカラーの制限選択できるプリセットは5つまでで、美的一貫性を保つため、カスタムの16進数値はサポートされていません。
グリッド規律本文は厳密な7:5/6:6のグリッドを使用しており、同じトピックが3ページ以上連続する場合はP0レベルのエラーとみなされます。
PDFをエクスポートブラウザ印刷機能、1ページにつきA4用紙1枚印刷。

guizang-ppt-skill の主な利点

デザイン経験の蓄積著者は、UIデザインとAIエフェクトに関する10年間の経験をSkillに注ぎ込み、開発過程で遭遇したあらゆる落とし穴を詳細に記述している。 checklist.md。
人間×AIコラボレーションインターフェース6つの質問からなるチェックリストを用いて事前に要件を整理することで、AIが直接チェックリストを生成した後に誤った方向に進んでしまうことを防ぐことができる。
制約は美学であるこのテーマはわずか6つのCSS変数によって制御され、カスタムカラーは禁止されており、制約が厳しければ厳しいほど、スタイルは安定します。
印刷品質のタイポグラフィ白い背景に黒い文字。純粋な白や純粋な黒ではなく、印刷業界やKindleの電子書籍規格を参考にしている。
導入コストゼロ単一ファイルHTMLのクロスプラットフォーム互換性をサポートしており、他者に送信する際にはファイルを1つコピーするだけで済みます。

guizang-ppt-skill のプロジェクトアドレス

GitHubリポジトリ：https://github.com/op7418/guizang-ppt-skill

guizang-ppt-skill と類似製品の比較

比較対象寸法	guizang-ppt-skill	Tome
製品形態	クロード・コード / エージェント・オープンソース・スキル	SaaSウェブアプリケーション
コアポジショニング	単一ファイル形式のHTMLマガジン風デモジェネレーター	AIを活用した物語プレゼンテーションツール
ビジュアルスタイル	電子雑誌×電子インク、印刷品質のセリフ体フォント、余白の控えめな使用	映画のような臨場感あふれるレイアウトで、全面画像と未来的なビジュアルの流れが特徴です。
生成方法	6段階の会話明確化 → アウトラインの整列 → HTMLスケルトンの記入	たった一つのキーワードを入力するだけで、ワンクリックで完全な物語の流れを生成でき、AIが自動的にストーリー構造を構築します。
出力形式	単一ファイルHTML（ビルド不要、依存関係なし）	Webネイティブの共有リンク。PDFエクスポート機能は限定的にサポートされています。
ページをめくる際の操作	キーボード、スクロールホイール、タッチスクリーン、ドット、ESCキーのサムネイル一覧にアクセスするには、水平方向または左右にスワイプしてください。	非同期型の垂直／水平スクロールによるストーリー展開に対応し、埋め込み3DモデルやライブWebページをサポートします。
トピックコントロール	5つのプリセットテーマ（インク／インディゴ／森／クラフト紙／砂丘）カスタム16進数は許可されていません	AIはレイアウトを動的に生成するため、テーマ選択において高い自由度を提供するが、厳密な色彩制御には欠ける。
画像処理	地元 `images/` フォルダ管理、同名画像によるロスレス置換、幅1600ピクセル以上	DALL-Eとの統合機能とUnsplashギャラリーを内蔵し、AIが画像を自動生成します。
コラボレーション機能	なし（静的な単一ファイル、ファイル経由で転送）	リアルタイムでのコラボレーション、コメント、および視聴者の閲覧データ分析
価格設定モデル	完全無料かつオープンソース（MITライセンス）	無料版は利用制限があり、Pro版は月額16ドル、エンタープライズ版はカスタマイズ可能です。
オフラインでの使用	完全対応です。ブラウザをダブルクリックするだけで開きます。	非対応。インターネット接続が必要です。
デザイン哲学	制約こそ美学：10年間のデザイン経験を凝縮した、不変のタイポグラフィルール	創造性は自由である：視覚的なインパクトを最優先とした、AIを活用したストーリーテリング。

guizang-ppt-skillの応用シナリオ

オフライン共有とプライベートセッション15分から30分程度の業界特化型スピーチや非公開の意見交換に適した雑誌スタイルのレイアウトは、講演者の個性とプロ意識を高めます。
AI製品発表会およびデモデー技術や研究関連のリリースには、「インディゴポーセリン」テーマをお勧めします。WebGLを駆使した流線型の表紙とデータをテーマにしたレイアウトは、技術製品の先駆的なイメージに完璧にマッチします。
創造的な提案とギャラリー展示美術やデザインのプレゼンテーションでは、「砂丘」や「クラフト紙」といったテーマを用い、余白を広くとり、印刷された雑誌を思わせるセリフ体の見出しを使うことで、独立系出版物にふさわしい美的雰囲気を演出できる。
人文主義的でノンフィクション的な物語「フォレストインク」テーマは、自然、持続可能性、文化的なコンテンツに適しています。白い背景とインク色のテキストが、Kindleの電子書籍のような没入感のある読書体験を提供します。

すべてのカテゴリ