DeckMason: AIプレゼンテーションワークフロー
概要: トピック、ドキュメント、またはアウトラインからプロダクション品質のHTMLスライドデッキを作成します。このファイルは6フェーズのワークフローのエントリーポイントです。まずこのファイルを読み、各フェーズに到達した時点でオンデマンドでリファレンスファイルをロードしてください。すべてのリファレンスファイルを一度にロードしないでください。
ファイルシステムアクセスが可能なAIコーディングエージェントが必要です: Claude Code、Cursor、Codex CLI、Windsurf、Aider、またはファイルを読み取りスクリプトを実行できる任意のエージェント。
出力品質基準
すべてのプレゼンテーションは、トップクラスのSaaSマーケティングページやエディトリアルスプレッドにふさわしいものになるようにします。クリーンで、自信に満ち、ミニマルで、プロフェッショナルに。AIスロップは禁止。汎用的なグラデーションは禁止。埋め草コピーは禁止。
クイックスタート
新しいプレゼンテーションの場合:
「[トピック]についてのピッチデッキを作成して」
「[対象]向けに[テーマ]のプレゼンテーションを作成して」
自分のコンテンツを使う場合:
「このメモをスライドに変換して: [コンテンツを貼り付け]」
「このアウトラインをプレゼンテーションのスタイルにして」
ブランドを使う場合:
「company-deck.pptxのブランドを使ってプレゼンテーションを作成して」
「このピッチデッキにhttps://linear.appのスタイルを合わせて」
既存のPPTXをインポートする場合:
「company-deck.pptxをHTMLプレゼンテーションに変換して」
予備スコーピング（デッキ生成前）
スライドを1枚も書く前に、美的方向性を確定します。ユーザーがすでに明確な回答をしている場合のみ、質問をスキップできます。スキップする場合は、その前提を明示的に言い直してください。
ステップ0: ビジュアルプレビュー（推奨パス）
3つの異なるテーマを使用して3枚のクイックビジュアルプレビュースライドを生成し、ユーザーが視覚的に方向性を選べるようにします:
python3 scripts/preview_themes.py "あなたのトピック"
これにより、previews/に3つの単一スライドHTMLファイルが作成されます:
previews/preview-1-dark.html（Deep Spaceテーマ）previews/preview-2-light.html（Modern SaaSテーマ）previews/preview-3-bold.html（Bold Signalテーマ）
ユーザーに3つのファイルを開いて方向性を選んでもらいます。選ばれた方向性が美的方向性（ステップ1）となり、以下のテキストベースの提案はスキップされます。
ステップ1: 美的方向性（テキストフォールバック）
ユーザーがテキストを希望する場合、この特定のトピックと対象に合わせた3つのビジュアル方向性を提案します。固定のプリセットリストからではありません。各オプションは、バイブワード＋具体的なビジュアル要素（パレット、タイポグラフィ、モチーフ）を組み合わせて、ユーザーがイメージできるようにします。3つの方向性は、同じアイデアの3つのバリエーションではなく、互いに意味のある違いがなければなりません。1つを推奨としてマークします。
各方向性について、カラーハーモニー（モノクロマティック、アナロガス、コンプリメンタリー、スプリットコンプリメンタリー、トライアディック、ニュートラル＋アクセント）、温度（ウォーム、クール、ニュートラル）、および60-30-10配分（どの色が支配的、二次的、アクセントか）を記述します。これにより、色の決定を後付けではなく計画段階で強制します。
ステップ2: ページ数
以下のブラケットを提案します:
- 3-5 スライド: 短め / ティーザー
- 6-10 スライド: 標準
- 11-20 スライド: 詳細
- カスタム: ユーザー指定
ステップ3: 1ページあたりのテキスト密度
以下の4段階のいずれか:
- 最小限: 1行または大きな数字
- 軽め: 見出し + 2-3箇条書き
- 標準: 見出し + 4-5箇条書き
- 高密度: マルチカラムまたは詳細なリファレンスコンテンツ
ステップ4: モーション
静的、控えめなライブレビューモーション、または別のビデオアセット。PDF、PPTX、Googleスライド、および事前読み込み用デッキではデフォルトで静的を選択します。
GSAPを使用したアニメーションパターン（フェードインアップ、スタガーリビール、クリップパスリビール、スケールイン、スライドイン左/右、ブラーイン）については、references/animation-patterns.mdを参照してください。これらは、ユーザーがライブHTMLレビューやキーノートスタイルの再生を希望する場合に使用します。
これらが確定するまで、アウトラインに進まないでください。
6フェーズのワークフロー（概要）
この概要を読んでパイプライン全体を理解してください。各フェーズに到達した時点で、対応するリファレンスファイルをロードします。
| フェーズ | 名前 | 処理内容 | リファレンスファイル |
|---|---|---|---|
| 予備 | スコーピング | ビジュアルプレビューまたは4つのテキスト質問: 美的方向性、ページ数、テキスト密度、モーション | このファイル（上記） |
| 0 | ブリーフ | リクエスト、デフォルト、前提を記録。対象、アーク、依頼、成功条件を含むブリーフを作成。PPTインポートワークフローもカバー。 | references/phase0-brief.md |
| 1 | 構造 | ピラミッド原則、主張-証拠見出し、テーゼ、コントラストのビート、プロダクトデザインレイヤー | references/phase1-structure.md |
| 2 | アウトライン | ページタイプ分類法、10のエディトリアルレイアウトタイプ、スライド数のスケーリング | references/phase2-outline.md |
| 3 | HTML | キャンバススケールアーキテクチャ、ビューポートフィッティング、垂直予算計算、1スライド1アイデア、HTML構造、アニメーションパターン、DOMルール、グリッド比率 | references/phase3-html.md |
| 4 | 画像 | 7つの名前付き画像ロール、画像タイプ分類法、画像スライドモード、チャートアンチパターン | references/phase4-images.md |
| 5 | ポリッシュ | ページリズム、フォント階層、カラー理論システム、AIの痕跡、業界制約、ボイスガイダンス、デザイナーズアイ批評、ナラティブスパイン | references/phase5-polish.md |
| 6 | エクスポート | PPTX（python-pptxまたはpptxgenjs）、PDF、Vercelデプロイ | references/phase6-export.md |
専門モード（オンデマンドでロード）
- シネマティックスライドモード: ワークフローデモ用の5シーン22秒フィルムクリップ
- スイスインターナショナルストリクトモード: ヴィニェッリに触発された超クリーングリッドデザイン
- エディトリアルWebデッキモード: 雑誌スタイルのキーノートデッキ
- HTMLスライドテンプレートライブラリ:
beautiful-html-templatesからの32のプロダクション品質テンプレート - テーマバリエーションプロトコル: 確定前に3つの異なるビジュアル方向性
- デザイン哲学スクールシステム: 曖昧なブリーフのための5つのスクール
- スピーカーノートオーバーレイ: Nキートグル、スライドごとに自動更新
- ブランドインポートワークフロー: PPTX、ウェブサイトURL、またはブランドガイドラインPDFからテーマを抽出
全専門モードの詳細: references/specialized-modes.md
品質ガードレール（配信前にロード）
すべての品質ガードレール、禁止ワード、データスロップルール、30%コピーカットルール、配信前セルフチェック、トラブルシューティング、および要件: references/quality-guardrails.md
スタイルプリセット
STYLE_PRESETS.mdで31の厳選スタイル（11オリジナル＋20拡張）にKami Warm Editorialを加えたものを参照してください:
オリジナル11: Modern SaaS（デフォルト）、Neon Cyber、Midnight Executive、Deep Space、Terminal Green、Paper & Ink、Swiss Modern、Soft Pastel、Warm Editorial、Brutalist、Gradient Wave
拡張20: Bold Signal、Electric Studio、Creative Voltage、Dark Botanical、Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial、Liquid Glass Bento、Engineering Blueprint、Watercolor Map、Golden Serif Quote、Chalkboard Lesson、Exploded Layer Stack、Hyperreal Product、Summary Infographic、Cobalt Grid、8-Bit Orbit、Raw Grid、Broadside
Kami Warm Editorial: 印刷品質のペーパーライクなデッキ向けの完全なエディトリアル仕様。STYLE_PRESETS.mdのKamiセクションを参照してください。
CSSとフォントの詳細はSTYLE_PRESETS.mdにあります。
このスキルの読み方
- 最初にこのファイルを読んでください。これにはクイックスタート、予備スコーピング、および6フェーズの概要が含まれています。
- 各フェーズに到達した時点で、オンデマンドでリファレンスファイルをロードしてください。すべてのリファレンスファイルを一度にロードしないでください。
- デッキを配信する前に、
references/quality-guardrails.mdをロードし、セルフチェックリストを実行してください。 - 専門モード（シネマティック、スイスストリクト、エディトリアルWebなど）については、ユーザーがそのモードをリクエストした場合にのみ
references/specialized-modes.mdをロードしてください。 - GSAPアニメーションについては、ユーザーが標準のCSSトランジションを超えたモーションを希望する場合に、
references/animation-patterns.mdをロードしてください。
このプログレッシブディスクロージャ構造により、コンテキストトークンを節約できます。元の単一ファイルのSKILL.mdは1,195行でした。このエントリーポイントは約200行です。各リファレンスファイルは必要なときにのみロードされます。
エクスポートクイックリファレンス
# PPTXエクスポート（パスA: python-pptx、画像ベース）
python3 scripts/pptx_export.py presentation.html --output presentation.pptx
# PPTXインポート（既存の.pptxをDeckMason用JSONに変換）
python3 scripts/pptx_import.py input.pptx --output decks/input_deck.json
# ビジュアルプレビュー（ユーザーが選ぶ3つのテーマ）
python3 scripts/preview_themes.py "あなたのトピック"
# PDFエクスポート（ヘッドレスChrome）
chrome --headless --print-to-pdf=presentation.pdf --run-all-compositor-stages-before-draw --virtual-time-budget=5000 presentation.html
# Vercelデプロイ（ライブURL）
npx vercel
要件
- ファイルシステムとターミナルアクセスが可能なAIコーディングエージェント
- 任意の高性能LLMバックエンド
- PPTXエクスポートパスA用のPython 3 +
python-pptx（pip3 install python-pptx） - PPTXエクスポートパスB用のNode.js +
pptxgenjs（npm install pptxgenjs） - モダンなブラウザ（Chrome/Edge/Firefox/Safari）
追加のAPIキーは不要です。すべてローカルで実行されます。
npmインストール（オプション）
# クローンせずにクイックスタート
npx deckmason init [dir]
# グローバルインストール
npm install -g deckmason
deckmason init
deckmason themes
deckmason preview "あなたのトピック"
deckmason import company-deck.pptx
完全なnpm説明書はREADME.mdを参照してください。